December 24th 2007 08:16 pm
Semantic CSS
Cascading Style Sheets in themselves are semantical in nature. The whole reason why CSS is so powerful is due to their cascading nature. Rules lower in the CSS code are actually higher in value, hence the term cascading. And that means rules supplied in your inline style attributes will supersede those within an external style sheet.
Why?
Because of its “rule execution” format, those rules cascading from the top of your styles will not overwrite style blocks that are lower (after) them in the style declaration. But the last rule will carry the most value, or weight – thereby generating the final style.
So let’s say you have the following CSS rules in an external style sheet:
* {margin: 0; padding: 0;}
And you declare a h1 tag to present as such:
h1 {margin: 0 0 2em 0;}
So your CSS file looks like this:
* {margin: 0; padding: 0;}
h1 {margin: 0 0 2em 0;}
Do you see why the h1 will have a bottom margin of -2em? Good. Now what if you had an inline style (although you don’t do you? I mean, you want to separate content from presentation as much as possible, right?) for your h1 tag within your webpage:
<h1 style="margin-bottom: -2em">Heading</h1>
Due to the cascading effect, that h1 tag will have it’s bottom margin raised up to -2, because of its inline style. That’s the power of CSS, and that’s all for now!
Popularity: 40% [?]
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
11 Comments »
11 Responses to “Semantic CSS”
Leave a Reply
You must be logged in to post a comment.
Wow thanks for that info.
I found that some guy tells that the CSS is Worthless. look here http://www.contentwithstyle.co.uk/Articles/106/
What do you think about that ?
Ummmm, you seem to have misunderstood the cascade. CSS properties over-ride as you step through the cascade, they don’t add. So in your example the resulting margin-bottom on the h1 is -2em.
Yes Mike, you are 100% correct, and I stand corrected
Nice site you have there btw.
Web Design Company, the title of that article is a really great example of “link bait”
I agree that CSS used with semantic HTML is the ONLY way to go. Yes, CSS can be used in a very un-standard way, with inline styles all over your markup like that old depreciated font tag!
Is Onsite SEO Dying Down? - Page 4 - WebProWorld on 19 Jun 2008 at 5:35 pm #
[...] than you. I know for darn sure that Semantics and CSS are two different things. I understand: Semantic CSS | Semantic HTML And the answer about all we discussed and disagreed above, have a look at this 47 pages slideshow [...]
Is Onsite SEO Dying Down? - Page 4 - WebProWorld on 19 Jun 2008 at 5:38 pm #
[...] than you. I know for darn sure that Semantics and CSS are two different things. I understand… Semantic CSS | Semantic HTML And the answer about all we discussed and disagreed above, have a look at this 47 pages slideshow [...]
There is a “heated” discussion going on at Is Onsite SEO Dying Down? And while the original topic is about onsite SEO, and it’s importance in today’s techniques, there have been comments made about the use of semantics, and specifically Semantic CSS.
Do check it out, and sign-up to become a member at WebProWorld.com to have your say.
You have this all wrong. This is due to adjoining margins collapsing, its one of more trick areas of CSS. You can read about it in the CSS 2.1 specifaction. Margins don’t sum the way you suggest.
If you theory was correct this would result in a 0em margin between heading and test, however it is actually -2em and thus off the page.
http://pastebin.com/f3b9f6531
Hello Matt,
You need to read the comments before yours buddy.
Thanks!
Distaste for Mediocrity on 25 Nov 2008 at 7:38 pm #
@martin
…bone-heads.
my oh my….
Hum… Yes, I will edit the original article due to the fact that I over looked simplicities. Funny though, that people who call people “bone-heads” don’t have the BALLS to sign their real names and such…
my oh my…