The CSS Hierachy
Listed In XHTML » Basics — Viewing Full TutorialThis tutorial is going to teach you the following:
[b] - The CSS hierachy (class, ID, tag/HTML selector)
- Multiple selecting (#id .class <selector>)
- Generally keeping your CSS files small and organized.[/b]
First off, I'm going to introduce you to classes, IDs and HTML selector tags. This is pretty basic, so you shouldn't be able to get lost at all.
Classes
Classes are for separating out your styles, so you can have more than one style per HTML element. For example:
<div class="text_one">Here is some text.</div>
<div class="text_two">Here is some more text, differently styled to text_one.</div>
To properly impliment these, you can do either of the following:
.text_one {
color: #FF0000;
}
.text_two {
color: #00FF00;
}
This CSS allows these two classes to be applied to any element in HTML, of course in this instance it would only be useful to those that are used for containing text (div, p, span, td) and so on. You could call this the "universal class declaration".
The other method you could use is this one:
div.text_one {
color: #FF0000;
}
div.text_two {
color: #00FF00;
}
The CSS above is exactly the same as the one before it, only this time by adding a HTML selector before the class name, it means that those classes are only available to the <div> HTML tag. This smoothly follows us onto the HTML selectors.
HTML Selectors
This is also very basic, if you want to set font styles for an entire tag without having to redeclare them in classes or IDs, you should use these. Strictly speaking, there should only ever be ONE style declaration for each HTML selector you decide to style. It's pretty straight forward, here is an example:
body {
font-family: Tahoma, Verdana, Sans-Serif;
color: #FF00FF;
}This links in with the HTML hierachy. Since body is a major tag that contains all the page contents, this rule flows through onto each tag you put inside the <body>. To override this for another HTML tag, i.e. <td>, simply add another style declaration for that tag.
Multiple style declarations
You can do this by simply adding a comma, you can mix classes, IDs and HTML selectors with these. Here is an example:
div,td,.purple,#dark {
color: #FF00FF;
font-weight: bold;
font-size: 12pt;
}This contributes to making your stylesheets much smaller.
IDs
I've seen a lot of misuse of using IDs before, because IDs can be used for HTML, Javascript and CSS; often causing a lot of confusion. IDs can be seen as second level HTML tags inside your CSS file, as you can assign classes to IDs as you can with HTML tags. There is one difference: you can only use an ID name once. If you do something like this:
<div id="foo">Bar</div>
<!-- A few lines later.. -->
<table id="foo"><tr><td>Bar</td></tr></table>Your code validation will fail, if you're using HTML 4.01 loose, transitional, strict, XHTML or anything it will fail.
Javascript IDs
A lot of people are now using the ID tag as a means of implimenting Javascript into their websites. You must make sure that your document object model (don't understand what document object model means? Visit Wikipedia's Definition) is well formed, or well designed. When in Javascript you're using document.getElementById(), you will run into all sorts of problems when misusing the ID tag for CSS.
How should it be done?
By all means, use ID for organisation of your pages. This applies especially for CSS/div designs, I suggest using them for the header, page body and footer and then classing the rest for boxes. Classes should be used for common styles.
Keeping stylesheet size small
Grouping similar styles is good, and then redefining the style with its unique parts allows faster rendering and smaller filesize.
For anomolous styles that are only ever seen once, that aren't major (perhaps a text style), don't be afraid to use an inline style tag on that element, or if it's just the same as another style, you could use the <b>, <u>, <i> tags instead.
The end
I hope this mega tutorial helped you.
