CSS Classes and Ids


Classes v/s Ids

 

CSS Classes refer to the codes that format the same HTML elements within a page, with different attributes based on the context.


CSS IDs refer to the unique identifier of a HTML element that is used only once within a page, to format the element.

Some examples where the use of IDs go handy is Table of Contents, Banner, Menu, etc.


Syntax:

 

<HTMLelement>#<CSSID name>{<definition>}

 


Here is an example on this:

 

h1#colorID1 { color: green; }

p#colorID2 { background-color: orange;}

 


Here are how the IDs are used on HTML:

 

<html>

<body>

<h1 id=”colorID1”>This heading has the text color green</H1>

<p id=”colorID2”>This paragraph has an ID name of colorID2 with red css background.</p>

</body>

</html>

 


Output

 

This heading has the text color green

 

This paragraph has an ID name of colorID2 with red css background.