What if I told you that today, your site's source code could be reduced by two-thirds, saving you an equal amount of your bandwidth every month?
Your site would be more accesible to non-sighted users and alternative browsing platforms such as PDAs, indexed more efficiently by search engines, and would load faster by orders of magnitude, making for happier customers.
Site-wide design changes would take minutes rather than days.
This is all possible by designing with standards and CSS.
Part III: Everything Cascades From Here
I must apologize for the lengthy introductory lessons that preceded this one. Having said that, I didn't go into the theory behind CSS nearly as deeply as I could have. For that, there is Jeffrey Zeldman's excellent book, Designing With Web Standards.
From here on in, this segment will feature bite-sized chunks of basic CSS for those who want to make the switch to standards.
Know Your Body
Cascading Style Sheets rely on rules that are broad at the root level and become more specific as required. Since the <body> element encompasses all that the user sees when browsing a site, it is the root level one looks to first to establish a style.
The basic idea is, if you can establish something in the <body> once, you never have to do it again. This includes background-color, font-family, margin, etc.
What About Exceptions?
CSS is all about exceptions. A rule set in the <body> can be overridden by any rule that is more specific.
For instance, if the background-color of the <body> element is grey and the background-color of the <p> tags is red, <p> will override <body>.
If the background-color for the <p> tags is undefined, they will inherit the style of their parent, in this case <body> or grey.
Now We're Stylin'
If you'd like to follow along with this lesson, the stylesheet, and XHTML documents are provided for reference. A great way to experiment on your own would be to use the Firefox browser with the free Web Developer extension.
Otherwise, you can use a text editor such as BBEdit, PageSpinner, textedit or notepad and your favourite browser. Apparently, HTML-Kit is good for Windows.
Take a look at the stylesheet, and XHTML. The code underlying the resulting webpage is simple, but look at the page with no styles applied. In Firefox, View > Page Style > No Style. Very different, isn't it. Simple code, sophisticated results.
How Does This Work?
Here is the code at a glance:
body {
margin: 20px;
border: 20px solid #fff;
padding: 20px;
background: #ccc url(../i/bg.jpg) repeat-x left bottom;
font-family: geneva, verdana, arial, helvetica, sans-serif;
color: #333;
}
Some basic syntax:
- body is the page element being described
- { } - these are terminators that contain the relevant code
- The words to the left of the colons (:) are properties that CSS-compliant browsers understand
- Each of these properties should be closed with a semi-colon(;)
- The characters to the right of the colons (:) are parameters that you set
Some basic properties
- margin: The amount of space outside the element relative to any other elements; in this case, the browser bounds
- border: Yes, it's the thick, white border surrounding the text
- padding: The space between the border of an element and its contents
- background: Everything to do with the background, in this case, of the whole page
- font-family: Sets the default font for the entire page
- color: This sets the font colour, for the whole page
Bite-Sized
OK, maybe I was being a bit optimistic. We did cover a lot of core ideas though.
That's it for now. Detailed explanations of the specific parameters covered can be found in the stylesheet itself. In the meanwhile, continue to use the Web Developer extension with the lesson page. Swap out different values or try removing lines entirely. See what you get.
As always, please leave any comments or questions and I'll be sure to respond.