An introduction to CSS; 
designing with style!

As you grumble through the third change in all the pages of your website, have you ever wished for a better way? Well, CSS (Cascading Style Sheets, also known as Style) just might be it. Style sheets are a method of setting up the presentation - or style - of your site independently of the content. This ensures that your site design is consistent throughout, and makes it easier to make changes in the website as a whole. Style sheets make the the HTML of the individual page smaller as a style definition can be established once and applied to the whole website, thus improving load time. In addition, most browsers will cache an external style sheet, allowing the visitor to view additional pages in the site faster.  It can also be applied to just a single page.  

A style sheet is made up of style rules that tell a browser how your document should look. For example, a style sheet can establish the background color, the font and the margins of your web pages. The STYLE element is placed in the HEAD of your documents HTML code. To do this, you can use traditional HTML syntax or invent your own classes. The STYLE element can contain the style rules for a single page, or refer to an external style sheet for use in more than one page.  An external style sheet will always end in .css.

Not all browsers support CSS, and those that do may not support all aspects of style sheets. (Click here for a chart.) Generally, CSS is ignored by older browsers.  If a particular element is important to the appearance of your web page, be sure to specify an alternative method to CSS.  When testing your style sheets, always check Netscape 4 first since that seems to be the browser with the most difficulty interpreting CSS.  

Style sheets look pretty intimidating when you first see them. However, once you understand what is going on, they become easy to read and easier to use. Here is a portion of the style sheet used on this page:

<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
body
{
font-family: Verdana, Geneva, Arial, Hevetica, sans-serif
background-color: #C8FFFF;
color: #582480;
}
</STYLE>
</HEAD>
<BODY>
text
text
</BODY>
</HTML>

What’s going on here? A style sheet starts with a selector (usually an HTML element  such as BODY, P, H2 or EM) and the style to be applied to it. In the above example, the HTML element BODY is the selector. There are any number of properties that can be applied to this selector. In this example, they are:

{
font-family: Verdana, Geneva, Arial, Hevetica, sans-serif
background-color: #C8FFFF;
color: #582480;
}

A property (such as font-family) and a corresponding value (such as Verdana) is called a declaration.  Several declarations for a single selector is called a declaration block.  Multiple style declarations for a single selector are separated by a semicolon as shown above.  A selector plus its declaration block enclosed in curly brackets is called a rule (or rule-set.) The declaration block above is the declaration block for the selector BODY.  A block always begins and ends with a curly brace.  If the declaration block above had the word BODY above it, it would be a rule.    

In the above declaration block, the font of the web page using this style will be Verdana.  If Verdana is not available on the viewers browser, Times New Roman will be used.  The background color of this page will be #C8FFFF and the text will be #582480.  You can choose your colors from the decimal RGB color codes which are considered browser safe and generally show the same across platforms.  

Another selector possibility are the header tags.  These are the tags that indicate the size and importance of a heading.  Headings are preferable to larger fonts, as they are often used by search engines to identify the importance of a topic on a page. Screen reader software will give it the proper emphasis as well.

Here is the rule for the headers on this page:

h1, h2, h3, h4
{
font-family: Bookman Old Style, Times New Roman, Times;
}
h1
{
color: rgb(51,51,204);
}
h2
{
color: rgb(0,153,51);
}
h3
{
color: rgb(204,51,51);
}
h4
{
color: rgb(51,0,204);
}

From this rule, you can see that the heading tags will be in the Bookman Old Style font or, failing that, Times New Roman and will be colored as defined.  

H1    

H2     

H3

H4

Say you wanted three different selectors to have the same value.  You could show it like this:

H1, P, BLOCKQUOTE 

{

font-family:verdana 

}

This rule specifies that all text within <H1>, <P>, and <BLOCKQUOTE> tags will display in the verdana font.

What else can be defined? 

  • Font Properties, such as font family, font style, font variant, font weight and font size

  • Color and Background Properties, such as Background Color, Background Image, Background Repeat, Background Attachment and Background Position

  • Text Properties such as Word Spacing, Letter Spacing, Text Decoration, Vertical Alignment, Text Transformation, Text Alignment, Text Indentation, Line Height

  • Box Properties, such as Top Margin, Right Margin, Bottom Margin, Left Margin, Top Padding, Right Padding, Bottom Padding, Left Padding, Padding, Top Border Width, Right Border Width, Bottom Border Width, Left Border Width, Border Width, Border Color, Border Style, Top Border, Right Border, Bottom Border, Left Border, Border, Width, Height, Float, Clear

  • Classification Properties such as Display, White space, List Style Type, List Style Image, List Style Position, List Style

  • Units such as Length Units, Percentage Units, Color Units, URLs

Using Style Sheets

click here to keep going to page two....