For example, I can get the same results by the following two ways.
<html>
<head>
<style type="text/css">
p#red{color:red} /* This is a CSS id selector*/
p.green{color:green} /* This is a CSS class selector*/
</style>
</head>
<body>
<p id="red">red color</p>
<p class="green">greencolor </p>
</body>
</html>
They both can give me a colored text. But where is the difference between them? Thanks for your answer.
ID's are unique Each element can have only one ID. Each page can have only one element with that ID Classes are NOT unique You can use the same class on multiple elements. You can use multiple classes on the same element. More About
The id selector is used to specify a style for a single, unique element. on other hand 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.and this allows you to set a particular style for many HTML elements with the same class.
Example : 1)
#para1{
text-align:center;
color:red;
}
->this style rule will be applied to the element with id="para1"(if found more then one with same id style rule will applied to first element only.
Example 2)
.center {text-align:center;}
p.center {text-align:center;}
->this style rule will be applied to the all element with class 'center' and second rule will applied to all "P" element with class=center.
For HTML ID is unique, Class is reusable.
For CSS an ID is equal to 256 Class. So you will need 256 class to override an ID's style. Here's and example: http://codepen.io/chriscoyier/pen/lzjqh
