Cascading Style Sheets (CSS) Classes and ID’s

CSS – Classes

CSS Classes Classes are used to define alternative styles for selectors.
Like all the h4 headings are in black but you want to create few h4 headings in red and blue. This can be done easily by using class selector.
Here we define h4 heading with a warn (red) class and cool (blue) class
h4.warn { color:red; }
h4.cool { color:blue; }

SYNTAX
selector.class name {property: value};

Another method to use CSS classes is to create all purpose classes. These classes can be be used with any HTML tags.
Like for above example
a class warn and cool is created
.warn{ color:red ;}
.cool { color:blue; }
In html file it can be used as below

<html>
< head>
< link type=”text/css” rel=”stylesheet” href=”HeadingStyle.css”>
< /head>
< body>
< p class=”cool”>
I’m blue paragraph.
< /p>
< h4 class=”warn”>
I’m a red HEADING
< /h2>
< /body>
< /html>

SYNTAX
.class name {property: value};

CSS – ID’s

CSS ID’s are similar to CSS classes with one difference – An ID work’s only once on a give Web page — only a single element (the one with the ID) is affected. Any further use of ID down in HTML code to an already used ID will be ignored.
CSS Style
#warn{ color:red ;}

SYNTAX
#class name {property: value};

CSS ID most of times doesn’t work as it should be and browser ignore this once use condition.