After unloading my thoughts on building an XHTML web page I thought I would take a stab at dumping all my thoughts on creating the ideal style sheets. I say ideal because some of the steps I mention have not moved from my theoretical thoughts and in to actual practice. Some of this information will more than likely seem cryptic, so a good understanding of CSS is a must-have if this information is going to be helpful.

Step 1

Clarify how the document is encoded on the first line of each style sheet.

@charset "utf-8";


Step 2

Decide on a linking methodology from your XHTML document to your style sheets. I usually try and stick to one of the following methods. I will proceed on with the steps under the notion that I am using the first method.

<link rel="stylesheet" type="text/css" href="failsafe.css" />
<style type="text/css" media="all">
@import "global.css";
@import "page specific name.css";
</style>

Note: I like my global.css style sheet to contain two main components. The first is any style that is used consistently throughout the site. The second is any style that is applied to a specific page based on that page’s body id tag. For example, I could give the home page a body id of “home” and the contact page a body id of “contact”, and then style the header differently depending on which page I’m on. The second imported style sheet is used simply for organizational purposes and is not necessarily used if I can isolate specific pages from the global.css by using the method I just explained. This same thought applies to the next method.

or

<link rel="stylesheet" type="text/css" href="failsafe.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css" media="all">
@import "page specific name.css";
</style>

Note: The styles.css will hold a link to several other CSS files. An example is shown below. This method allows for adding style sheets without editing any XHTML documents.

@import "global.css";
@import "fonts";
@import "colors";
@import "tables";
@import "default";


Step 3

Add some global default styles. The following are the default styles I believe every XHTML page should have as a starting point. Remember that the XHTML tag attribute class can have multiple values.

.hide {display: none;}
img {border: 0;}
.clearspace {padding: 0; margin: 0;}
.floatleft {float: left;}
.floatright {float: right;}
.clearfloat {clear: both; line-height: 0px; height: 0px; display: block;}
.noborder {border: 0;}
body {background-color:#fff; margin: 0px; padding: 0;}


Step 4

Declare a default font/size & font line-height size for all XHTML pages.

html body {font: 76%/1.4em Arial, Helvetica, sans-serif;}
html>body {font: 76%/1.4em Arial, Helvetica, sans-serif;}


Step 5

Add global font size declarations so you can add selectors to each declaration as you build a site. This method will keep a majority of font settings in one place.

add selectors here {font-size: 0.8em}
add selectors here {font-size: 0.9em}
add selectors here {font-size: 1.0em}
add selectors here {font-size: 1.1em}
add selectors here {font-size: 1.2em}
add selectors here {font-size: 1.3em}


Step 6

Add global default link declarations.

a:link {color: #add color; text-decoration: none;}
a:visited {color: #add color; text-decoration: none;}
a:hover {color: #add color; text-decoration: none;}
a:active {color: #add color; text-decoration: none;}


A CSS Template

This will more than likely be a starting point for the content inside a global.css file.

@charset "utf-8";
/*
global default styles
*/
.hide {display: none;}
img {border: 0;}
.clearspace {padding: 0; margin: 0;}
.floatleft {float: left;}
.floatright {float: right;}
.clearfloat {clear: both; line-height: 0px; height: 0px; display: block;}
.noborder {border: 0;}
body {background-color:#fff; margin: 0px; padding: 0;}
/*
base default font size, type, and line height
*/
html body {font: 76%/1.4em Arial, Helvetica, sans-serif;}
html>body {font: 76%/1.4em Arial, Helvetica, sans-serif;}
/*
add selectors here for font sizing
*/
add selectors here {font-size: 0.8em}
add selectors here {font-size: 0.9em}
add selectors here {font-size: 1.0em}
add selectors here {font-size: 1.1em}
add selectors here {font-size: 1.2em}
add selectors here {font-size: 1.3em}
/*
base links
*/
a:link {color: #add color; text-decoration: none;}
a:visited {color: #add color; text-decoration: none;}
a:hover {color: #add color; text-decoration: none;}
a:active {color: #add color; text-decoration: none;}


Other Details

• Embedded styles are good for development. Working from one document can be very handy in the beginning.
• Remember that inline styles are tied to markup and break the goal of separating content from presentation.
• Assign multiple class values to an HTML attribute instead of more HTML code to enclose the element.
• To vertically align to the center consider setting the line-height of a contained element to the same size as the container. If you have a container with a height of 2ems set the line height to 2 ems and the content for the container will be centered. It won’t be perfectly centered, however, depending upon font sizes.
• The class attribute is used for styling multiple elements, while id is used to identify and style a single unique element.
• Margin values are applied to the outside of a box.
• Padding values are applied to the inside of a box.
• When optimizing CSS files, consider using shorthand properties, multiple selectors for one declaration, no comments, and eliminating white space in the CSS file (spaces and returns).
• Verify all XHTML pages have a class or id attribute/value in the body tag.