I was wondering if someone could explain to me how exactly block level tags work.
If I put
.test {
font: red;
}
and then apply it to a <div class="test"> the font color inside of this should be red. What I have my question with is when you have a large number of classes. Is there a certain way to arrange them so they all work? I seem to have the most problem when I try to do stuff to links. For instance if I do something like this
.test A {
text-decoration: none;
}
It seems like it only works some of the time. Any ideas?
One other thing...Is .test A or a.test the correct meathod?Style Sheets need a valid HTML tree to work properly so the place to start is with the HTML validator at <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->. And there's a CSS validator at <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->.
The selector .test a refers to a elements that are contained by elements of class test.
<div.test><a href=http://www.webdeveloper.com/forum/archive/index.php/"www.w3.org">W3C</a></div>
a.test refers to a elements of the class test.
<a class="test" href=http://www.webdeveloper.com/forum/archive/index.php/"www.w3.org">W3C</a>
It's all there in the CSS1 Specification <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a><!-- m --> which is an easy read.Originally posted by pyro
.test {
font: red;
}
It should be color: red not font.It should be color: red not font.
Ooops..I knew that. It was 1am my time when I posted that. Brain wasn't working so well...
Anyway, thanks for the link. I'll take a look at that.Block-level elements typically contain inline elements and other block-level elements, when rendered visually, block-level elements usually begin on a new line as apposed to inline elements, <div> is considered block-level.Note the Order of Precedence.
Easier understood by example.
I have a site, on which I have a navy background and I set my links to another colour, like so:
A {color: #FFF;}
If I also want to include a white footer, as a DIV, I would want a special colour for the links on that one. Say, my div has ID="footer". Here follows:
#footer A {color: #000;}
Now, the point:
The first statement refers to all the links in the document, while the second refers to a part of that "all". It is very important that I put the first statement before the second, because the browser would then think:
Colour all links white
Colour some of them black
and not
Colour some links black
Colour all links white,
because then I would have all the links white, that's not what I want.
Ok, sorry for really going into the basics like that.I guess I was more wondering if it made a difference when you have a lot of <div> tags. For instance do you need to have the first class that you use on the page defined first?Originally posted by pyro
I guess I was more wondering if it made a difference when you have a lot of <div> tags. For instance do you need to have the first class that you use on the page defined first?
No, you can have them in any order in your HTML.
However the order in which you declare your CSS rules does make a difference in which rule has priority.
To understand it you really need to read the CSS documentation for how the Cascading works
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/cascade.html#cascade">http://www.w3.org/TR/REC-CSS2/cascade.html#cascade</a><!-- m -->
If I put
.test {
font: red;
}
and then apply it to a <div class="test"> the font color inside of this should be red. What I have my question with is when you have a large number of classes. Is there a certain way to arrange them so they all work? I seem to have the most problem when I try to do stuff to links. For instance if I do something like this
.test A {
text-decoration: none;
}
It seems like it only works some of the time. Any ideas?
One other thing...Is .test A or a.test the correct meathod?Style Sheets need a valid HTML tree to work properly so the place to start is with the HTML validator at <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->. And there's a CSS validator at <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->.
The selector .test a refers to a elements that are contained by elements of class test.
<div.test><a href=http://www.webdeveloper.com/forum/archive/index.php/"www.w3.org">W3C</a></div>
a.test refers to a elements of the class test.
<a class="test" href=http://www.webdeveloper.com/forum/archive/index.php/"www.w3.org">W3C</a>
It's all there in the CSS1 Specification <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a><!-- m --> which is an easy read.Originally posted by pyro
.test {
font: red;
}
It should be color: red not font.It should be color: red not font.
Ooops..I knew that. It was 1am my time when I posted that. Brain wasn't working so well...
Anyway, thanks for the link. I'll take a look at that.Block-level elements typically contain inline elements and other block-level elements, when rendered visually, block-level elements usually begin on a new line as apposed to inline elements, <div> is considered block-level.Note the Order of Precedence.
Easier understood by example.
I have a site, on which I have a navy background and I set my links to another colour, like so:
A {color: #FFF;}
If I also want to include a white footer, as a DIV, I would want a special colour for the links on that one. Say, my div has ID="footer". Here follows:
#footer A {color: #000;}
Now, the point:
The first statement refers to all the links in the document, while the second refers to a part of that "all". It is very important that I put the first statement before the second, because the browser would then think:
Colour all links white
Colour some of them black
and not
Colour some links black
Colour all links white,
because then I would have all the links white, that's not what I want.
Ok, sorry for really going into the basics like that.I guess I was more wondering if it made a difference when you have a lot of <div> tags. For instance do you need to have the first class that you use on the page defined first?Originally posted by pyro
I guess I was more wondering if it made a difference when you have a lot of <div> tags. For instance do you need to have the first class that you use on the page defined first?
No, you can have them in any order in your HTML.
However the order in which you declare your CSS rules does make a difference in which rule has priority.
To understand it you really need to read the CSS documentation for how the Cascading works
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/cascade.html#cascade">http://www.w3.org/TR/REC-CSS2/cascade.html#cascade</a><!-- m -->