WEB STANDARDS CREATIVITY

38
#sidebar .module {
color:#A07029;
padding:15px 15px 15px 0;
border-top:1px solid #111;
clear:both;
}
#footer-wrapper {
background:#1B1B1B url(../i/bg_footer_wrapper.gif) repeat-x;
padding-right:10px;
clear:both;
border-top:1px solid #333;
}
#footer {
background:#262626 url(../i/bg_footer.gif) repeat-x;
padding:20px 0 20px;
}
There is nothing really odd about any of this. It’s a mixture of container s (or wrappers), some floats for the columns,
and a dash of absolute positioning. Since the purpose of this chapter isn’t to teach you the basic principles of CSS, I won’t
go into the details here. I recommend reading Simon Collison’s Beginning CSS Web Development (Apress, ISBN: 1-59059-
689-7), if you feel you’re lagging behind in any of the basics.
I like to name images based on the convention type_id_label to make it easier to remember the purpose of
each image (for example, logo_footer_geffen.gif). Also, file-naming conventions make it easier for a third
party or your client to determine the “whats and whys” associated with your design and code. While a style
guide can also accomplish this task, often a project’s budget or timeline doesn’t allow for the creation of a
style guide, or if one exists, it might not be available to someone making changes in the future.
Targeting CSS selectors
The big problem with the generated markup contained within the basic shell markup I showed you earlier is that I have no
say in the decision of which markup is used. Where a definition list with nested paragraphs within the description might be
most appropriate, I could be forced to deal with a few nested s containing s with s littered all over the place.
You can see this for yourself by reviewing the source of the live site. Ugh. Have another (strong) cup of tea to help you get
over that mental image.
Thankfully, as bad as that sounds, there is a relatively easy way to dig out of that hole. CSS selectors come in many shapes
and sizes. Many designers are used to working with only the basics:
IDs: Appear as #footer in CSS, and as an attribute value on an element in (X)HTML, such as ,
where div is the element, id is the attribute, and footer is the value.
Classes: Appear as .readmore in CSS, and as an attribute value on an element in (X)HTML, such as , where p is the element, class is the attribute, and readmore is the value.
Element selectors: Target any (X)HTML element. Examples include ul, p, div, body, table, and even html.
However, we have much more at our disposal than those basic selectors, and that’s where the shell markup comes into play.