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.