intro |  html |  css |  design |  scripting |  dhtml |  server 


This page covers:
   Basic Syntax for Style Sheet Definitions
   Class: Creating Definitions for a Subset of an Element
   ID: Creating Definitions for a Single Use Subset
   Recommendations for Using CSS

Basic Syntax for Style Sheet Definitions
As you have seen from the examples from the previous, the basic syntax for writing style sheet definitions is element / id / class (class and id are explained below) name followed by a space or a tab and style sheet attributes enclosed in curly brackets. Each attribute is separated by a semicolon ( ; ):
TD {font-family: Arial; font-size: 12px; margin-left: 20; margin-right: 20;}

Class: Creating Definitions for a Subset of an Element
You can assign a style to a subset of elements in a document (for example <P>) by creating a "class". The syntax for creating a class is:
P.classname {margin-left: 15px; margin-right: 15px}
You could then use that class of the P element with the following syntax:
<P class="classname">

You can also create classes that are not bound to a particular element and apply them to any element you choose:
.important {color: red; font-weight: bold;}

Here is a bit of text using <U class="important">. Notice how anything outside of the U (underline) element is normal text.

ID: Creating Definitions for a Single Use Subset
Id lets you define a rule that applies only to one element in the entire document. You can bind it to a particular element or leave it by itself. Whether you choose to bind it to an element or not, an ID can only be used once. ID's are identified by a # in front of it:
#specialid {border: 3px; color: purple;}

Recommendations for Using CSS
One thing I strongly recommend when using style sheets is to check all your pages in several browsers. Not all browsers support all tags. For example, I do most of my testing with Navigator 4.x, IE 4.x, and Opera and have found that setting style definitions for the BODY element only works in Explorer. Neither Navigator or Opera showed any of the settings I had defined for that element, therefore I chose not to include it in my style sheets.

I also recommend viewing your pages with the style sheet definitions turned off so you can see what the pages will look like to those with browsers that do not support CSS. It's alwasy best to cross-browser check. © 1999-2011. all rights reserved. // site created and maintained by kathy ahn