CLASS STYLES

Class styles enable you to set-up an independent style that can be applied to any HTML tag. A class is given unique name which can be added to any tags with the style attribute. 

 When assigning a class style you have to define in the CSS as:

HTMLselector.class {property: value;}  Example:  .headerfont {font-size: 15px; font-family: Arial; color: red; }

Then in the HTML body you would put:  <p class”headerfont”>This is The Header</p>

Notice how there is a period (.) in front of the selector. This signals that were are dealing with a class style. Then in the <p class”headerfont”> you’ll notice there is no period.

Class name may not contains spaces or underscores and they must always begin with a letter, even though they can include numbers in the class name.

 The Result of the Class Style: This is the header.

ID STYLES

ID selectors are a lot like CLASS selectors in that they create unique styles that are independent of the HTML tags. ID styles are crucial to Dynamic HTML (DHTML) in that they allow javascript functions to to identity a unique object on the screen. While this section will not get into DHTML, it's imporant to understand why ID Style Selectors can only be used once per page.

#subheaderfont {font-size: 15px; font-family: Arial; color: red;}

Then in the HTML body you would put:  <p class”headerfont”>This is The Header</p>

ID Style Selectors are best used when you need to give an element or property a unique name and identity. This is not as critical in basic CSS as it is when you get into page layouts with CSS.

For basic CSS declarations that are unique to a certainl element of the page, most designers to stick with CLASS styles because they tend to be more flexible.

The Result of the ID Style: This is the header.