WEB STANDARDS CREATIVITY

40
So, let’s say that for most modules in the sidebar, I want to style any tags assigned class="fullsize" to float to the
right within the module, with a 5-pixel margin on the left and bottom and no border. With the new hooks, the generic style
should now look like this:
#sidebar .module img.fullsize {
float:right;
margin:0 0 5px 5px;
border:none;
}
This selector uses the class I’ve assigned to my wrapper , along with #sidebar, so that if I decide to use the module class
anywhere else in the layout, this rule will not apply.
With that taken care of, I can now style the video module to float the image to the left instead of to the right, and adjust the
margins accordingly:
#sidebar #mod-media img.fullsize {
float:left;
margin:0 5px 5px 0;
}
By replacing the class (.module) with the ID (#mod-media) in the selector, I instruct the browser to apply the generic styles
first, and then override the float and margin settings.
IDs have higher specificity than classes. See http://molly.com/2005/10/06/css2-and-css21-specificityclarified/
for a thorough explanation of how specificity is calculated, and see http://stuffandnonsense.
co.uk/archives/css_specificity_wars.html for a more lighthearted overview.
This same approach will get you out of almost any hole dug for you by CMS-generated markup. While none of us really want
to use an ugly selector like body#events #content .item .module .summary #membership p.permalink span {}, if you’re
in a bind and need to get the job done, combining and layering selectors along with a wrapper or two will make your
life much less stressful.
The typography
I’m a typography nut, and type usually features prominently in my designs. HTML text is at best difficult to control. Even with
CSS, font choices are limited to those installed on a user’s operating system, and typographical control really isn’t possible.
Yet my design uses headings set in the band’s typeface of choice, Franklin Gothic Condensed. I don’t want to hinder the basic
accessibility of the site. I’m not shooting for perfection in that area, but at the same time, it would be irresponsible to shut
people out entirely by using bad markup. But somehow I need to get that type to display. Enter CSS image replacement for
fixed headings, and sIFR for text that needs to change regularly, such as article headings generated by the CMS.
Let’s start with the vertical text headings. They are the most obvious candidate for special treatment, as there isn’t any way
to mimic them using HTML text alone.