Monday, May 27, 2013

CSS Id and Class

The id Selector

The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":

For example:

<html>
<head>
<style>
#para1
{
     text-align:center;
     color:red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>


"Hello World!" with center aligned and red color shown.   

 -------------------------------------------------------------------------------------

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class. 

The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:

For example :
 
.center {text-align:center;} 
p.center {text-align:center;}

No comments:

Post a Comment