Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page
Search the Web

cascading style sheet tutorial - css stylesheets class and id (ID)
 

cascading stylesheets class and id

how to give one html tag more than one appearance with the use of class and id

1. cascading stylesheets and class

 previously we looked at applying css values to tag (selector) properties

selector {property: value}
TT {color: red;}

this page describes how stylesheets can alter those values

the easiest way to explain class is to think of it as making-up a descriptive word to describe the effect we want to create
the example below forces any text between the <TT></TT> tags to be red in color and 8pt in size
TT {color: red; font-size: 8pt;}
<TT>This is typwriter text with style</TT>
however if the <TT></TT> tags are required to be a color other than red we can do this with a 'class'
(a descriptive word preceded by a dot or period)
the example below makes text between the <TT></TT> purple and 12pt in size
 .purple {color: purple; font-size: 12pt;}
<TT>This is typwriter text with style</TT>
<TT class="purple">This is typwriter text with class</TT>
other tags can share a class
<B class="purple">This is bold text with class</B>

2. cascading stylesheets and ID

 stylesheet ID and class are almost the same thing except where a class is declared by being preceeded by a dot (period) an ID is preceeded by a # hashmark
 #goblue {color: blue; font-size: 12pt;}
<TT>This is typwriter text with style</TT>
<TT class="purple">This is typwriter text with class</TT>
<TT ID="goblue">This is typwriter text with ID</TT>
<B ID="goblue">This is bold text with ID</B>

The ability to reuse the same class or id in multiple html tags can be a great timesaver
home
home
 		next: stylesheet problems
previous: applying stylesheets

html tutorial css tutorial javascript webmaster articles link exchange

css tutorial