CSS Class

CSS Classes can be used to apply different CSS properties on arbitrary html elements.

  • CSS Classes provides us the freedom to apply our css design on any HTML Tag.
  • CSS Classes can have any name.
  • CSS Class name usually start either with a period(.) or hash(#)

How To define a CSS Class 

A general Syntax of how to define a CSS Class is given here

#ClassName
{
   Property:Value;
   Property:Value;
   Property:Value;
}

or

.ClassName
{
   Property:Value;
   Property:Value;
   Property:Value;
}

Lets define a class and name it myheading.

.myheading
{
Background-color: Red;
Color:White;
Font-Size: 25px;
}

now to apply this class, we need to use some thing called id. For instance if we need to use the above class one of our heading one on our web page, we will apply is using class=NameOfClass.

<H1 class=myheading> this is my html heading one </H1>

Another way of naming our Class is that we use a hash (#) before the name of class. This will make our class to work on a region. The common syntax

#ClassName
{
   Property:Value;
   Property:Value;
   Property:Value;
}

Lets make two classes using hash and then apply them on our html web page 

#MyDiv1
{
color:blue;
font-size:15px;
}

#MyDiv2
{
color:red;
font-size:9px;
}

Now lets apply these above two classes on our hyperlinks and paragraphs. To apply any class that starts with a hash we need to use id=NameOfClass. Lets start with MyDiv1 Class

<DIV id=MyDiv1>
<a>all hyperlinks here</a>
<p>all text here</p>
</DIV>

Now lets apply MyDiv2 Class

<DIV id=MyDiv2>
<a>all hyperlinks here</a>
</DIV>