Proffesional CSS

The text_n_colors.css style sheet is one that I wrote for a project a while ago and have since found very useful as a starting point for developing sites. Its purpose is to assign some overall styles for the most commonly used XHTML elements that are more to my taste than the default browser styles. This idea of creating style sheets that express one’s personal design preferences as a starting point for each site is an interesting concept, and the text_n_colors.css style sheet is an evolving example of it. To make this set of “starter styles” as useful as possible, I’ve started to standardize the names of the main divs in my page layouts (header, navigation, content, promo, and footer, for example), as you have seen throughout this book. If those names don’t make sense for the IDs of divs of a specifi c project, I just use names that are more relevant, and then do a quick search-and-replace on ID and class names in the style sheets to match up the style sheet with the “improved” names in the markup.

In the text_n_colors.css style sheet, I have created sets of colors and text sizes organized by a descriptive class name (e.g., lime, olive). Each style in each set has a contextual selector that uses one of these descriptive class names and a div ID (for example, .lime #nav p {color:#444;}). I can then easily select text styles for each of the main divs by simply adding a class name (lime, in this example) to the body tag of the page. (Take a look at the section of this style
sheet I show below if this explanation is confusing to you.) I always seem to end up tweaking these styles for each specifi c project, but this style sheet makes a great starting point. I get an acceptable and harmonious look to my text and element backgrounds from the getgo, and it has already saved me hours of work.

Note the use of repeat-y (repeat vertically) for both graphics, even though in normal circumstances, neither will actually visibly repeat. I do this because if either the header or footer becomes taller than its background graphic (which shouldn’t happen but might if someone inadvertently adds too much text, or if the user sizes up the layout to a really large size from the View menu), then there won’t be a gap below the background graphic—instead, it will repeat vertically.

Also, in case the graphic doesn’t load at all, I’ve added a gray background color. A background graphic is always displayed on top of a background color, so the color doesn’t normally show if the graphic fi lls the background, as it does here. While always stating a background color along with any background image is good practice, it is especially important in this case, as the light-colored text I will have to use over these dark background graphics will barely show on the default white background color of the page if the background graphic doesn’t load for some reason.

We’ll first add some background graphics. There are four of them, one for the header, one for the footer, and two in the main area of the page. Let’s start with the header and footer graphics. They were created in Adobe Photoshop by simply putting huge gray type on a darker gray background and then exporting them in .gif format. They are each 880 pixels wide, which is the maximum width I plan for this liquid layout. Once these graphics are in the images folder, making them appear in the background of the header and footer simply requires opening the 3_col_liquid.css file and adding the following CSS:

div#header {
background:url(../images/gray_header.gif) repeat-y #383838;
}
#footer {
clear:both;
background:url(../images/gray_footer.gif) repeat-y #383838;
}