Cascading Style Sheets - CSS

By Neil Williams
2007-11-08


Style classes, ID's and altered HTML tags

The following is taken from the content.css file used at CodeHelp

BODY {font:10pt sans-serif;color:black;text-align:justify;
background-color:white;}
TABLE {font:10pt sans-serif}
H1 {font:18pt sans-serif;color:navy;}
H2 {font:16pt sans-serif;color:navy;}
H3 {font:14pt sans-serif;color:navy;}
B {font-weight:bold;}
#navbar {position:absolute;top:60;left:10;width:246px;}
.header {position:absolute;top:10;left:270;}

In the above example, all the selectors are HTML tags. The BODY tag is set to only show in a sans-serif font with black text on a white backgrond colour. Text is justified (even left and right). The table tag is also set to a specific font family and the H1, H2 and H3 tags are given both colours and fixed point scales.

# defines a ID selector which can be applied to any element by adding the id="navbar" attribute to any HTML4 tag. However, each ID must be unique in HTML4 so this is used for elements that are common to several files - to ensure consitent display properties.

. defines a class selector which is more global and can be applied to any HTML4 tag by adding class="header" attribute to the tag.

Tutorial Pages:
» The HTML4 way to control HTML output
» Introduction to style sheets
» Style classes, ID's and altered HTML tags
» Using CSS to avoid tags deprecated in HTML4
» Your complete CSS1 + CSS2 reference


Copyright © Neil Williams

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » CSS Shorthand Properties » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS