Just like most things in life, experience is the best teacher. If you want to learn CSS your absolute best bet is to get a website (if you don’t have one already) and just jump right in. The worst thing that can happen is you totally botch your styling. Without error there is no learning. When it comes to HTML and CSS there simply is no substitute for DOING.
Still, sometimes certain principles can be learned which will aid the learning process, and that’s why I’m writing this article. It’s very basic. It’s meant for the almost completely unexperienced. It assumes that you know HTML, however. If you don’t know HTML do a Google search for HTML tutorials and get a handle on that first.
How it used to be
Originally the Internet wasn’t the beautiful place you see today. At first it was just fugly text on a plain background. Then people started adding in some good looking style and totally rad animated gifs. They added the styling directly to their HTML document and it looked a bit like this:
<td valign="top" width="0%">
<img src="grx_vspacer_v01-40.gif" border="0" width="34" height="346"></td>
<td valign="top" width="100%">
<font face="arial, helvetica, verdana" size="2">
<img style="width: 500px; height: 60px;" src="grx_bar_v01-40.gif" border="0">
</font><font face="arial, helvetica, verdana" size="2">Pretty ugly and frankly, very hard to read. Now we do things differently.
How it is today
Today we separate the structural code (HTML) from the stylistic code (CSS) into separate documents. They’re then combined when they are loaded in the users browser. They’re combined by adding a link to the stylesheet within the <head> tags of your html document. The link looks like this:
<link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css" />
So now we put our structure together, our “skeleton” if you will, with HTML totally devoid of styling. Then we use our stylesheet to hang the style “skin” on. Consequently, it really does help to think of things this way. HTML is the skeleton, CSS is the skin and Javascript is the muscles. But we’re not getting into Javascript here 
Understanding how CSS relates to HTML
Every HTML document has this basic skeleton:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
So far the only element we can style is the <body> element. But, quite obviously, when we make a website there is more that just the bare skeleton above. The biggest parts of any website are its divisions.
Almost every website has a few similar components: the Header, the Body or Content, a Sidebar and a Footer. So what we do is take everything that will go within the Header and put it in a division like this:
<div id="header">
. . . Header content goes here . . .
</div>And now we can style everything within the header with this CSS:
div#header {
style elements go here
}Since the div had an ID of “header” we then use “div#header” in the CSS; consequently we could also completely leave off the “div” and just write “#header”. If the div had a CLASS of “header” then we would use “.header” in the CSS. This is an important distinction.
Divisions are used, generally, to separate large chunks of content from other large chunks of content. There are exceptions to this rule, however. The <div> tag is not the only HTML tag that can receive a class or an id. You can assign a class or id to <p> tags, <span> tags, <ol> tags and the list goes on and on. Virtually any HTML tag can have assigned to it a specific class or id.
Also, the name of the class or id doesn’t matter so long as you remember what you called it so you can then style it in the CSS.
ID or CLASS? Which one?
I get asked this question a LOT. The answer seems trivial but is very important. Id’s are meant to be used once per page. So basically you could, on the same page, have this following code chunk and be totally fine.
<div id="header"></div>
<div id="sidebar"></div>
<div id="footer"></div>You could not, however, have this:
<div id="header"></div>
<div id="header"></div>That’s illegal. The Markup police will come and arrest you.
If you want to style two elements the same way then you just give them both the same class. Classes can be repeated infinity times per page. So this would be OK:
<li class="sidebar-item"></li>
<li class="sidebar-item"></li>
<li class="sidebar-item"></li>
<li class="sidebar-item"></li>
<li class="sidebar-item"></li>
<li class="sidebar-item"></li>This could then be styled with the following CSS:
li.sidebar-item {
style goes here
}
Don’t use spaces
Spaces don’t translate well from HTML to CSS; or anywhere on the Net for that matter. If you want to name a class “sidebar module” then you should put a hyphen or an underscore instead of a space; making it “sidebar-module”. Trust me, it won’t work any other way.
Basic descendants
In any given HTML page there are going to be some elements that are “nested” inside other elements. Here, let me give you an example:
<ul id="navigation">
<li><a href="http://google.com">google</a></li>
<li><a href="http://yahoo.com">yahoo!</a></li>
<li><a href="http://msn.com">msn</a></li>
<li><a href="http://wordpress.org">wordpress</a></li>
<li><a href="http://openswitch.org">openswitch</a></li>
</ul>Now, there are a few descendants there. We can style the whole unordered list:
ul#navigation {
styling
}We can style the list items within the unordered list:
ul#navigation li {
styling
}Or we can even go so far as to style the links inside the list items inside the unordered list:
ul#navigation li a {
styling
}Note that there is just a space between the descendant elements in the CSS. Understanding how descendants work is IMPERATIVE to mastering CSS. There’s just no way around it. Work extra hard at understanding this.
Conclusion
I hope this helped you understand basic CSS a little more. If this was a little over your head please let me know, I don’t mind editing this article after the fact.
Also, I am really interested to find out if there are any other blogging related technical questions I could answer with a how-to post here.
12 Comments
Hey Ben,
Sweet, thanks. The W3Schools site also has some good info.
The whole descendants thing could be a little clearer.
Is that related to the concept of inheritance? I\’ve been trying to modify the appearance of heading tags in Unsleepable, but I can\’t get things to appear just right…
Cheers,
-Alex
Inheritance is a fairly different issue. It\’s basically that if you don\’t specifically style an element then it will inherit the style of its parent element with regards to font, color, etc.
I\’ll look into making the part about descendants a little more clear. Thanks very much for the feedback.
I must suck extra at CSS, because neither is particularly clear to me. But, I\’m sure future posts will clarify it.
Thanks for the quality info.
Hmmm. Methinks I went a little too fast or started with stuff a little too advanced.
Alex <– Marketer, not a Coder
Your more technically inclined audience is probably just fine with this.
Maybe using Unsleepable\’s CSS as an example might help show things in action.
Plus, then I selfishly get free training. Woot!
Well, part of that is right on the money. The best way to figure all this stuff out is going to be to jump in and start tinkering. Seriously, there\’s really no other way to get a grasp on it.
[...] If you don’t know HTML do a Google search for HTML tutorials and get a handle on that first. (more…) This entry was written by Ben Gray and posted on at 11:12 pm and filed under Feature. Bookmark [...]
Thanks Ben, this is very helpful. And thanks for all your help on my recent re-design. I was looking at my CSS today and wanted to style the h3 tags in my comment-reply so the colors are different from the h3 tags I use in my entries. Is it something like what you did above: h3.comment {style style}?
Well, here\’s the code for the h3 tags at the top of your comments list:
So it looks like you would style the h3 tag with something like this:
div#comments h3 { }
or
div#comments h3 a { }
Ok - that makes sense. I\’ll try it out. Thanks!
Oh, that\’s weird. Scribe pinged you on this one, Ben. I check into it.
Yeah, I saw that. Very odd.