Simple example for css class and id selector

While defining the css block, we can use either the class name or id as the selector.

example:

selector {
property1:value1;
property2:value2;
}

Using the class name as the selector:

.[Class Name] {
property1:value1;
}

That is..

.nav {
color:#0220FF;
}

can be used in html as follows

<div class="nav">using a class selector.</div>

We can specify different instances of a class selector, by using the following syntax:

[tag type].[class] {
property:value;
}

example:

div.clr {
color:#02400FF;
}

span.clr {
color:#1F0E00;
}

can be used in html as follows

<div class="clr">div one</div>
<span class="clr">span one..</span>

We can use multiple selectors for an html component


.fntsize{
font-size:22px;
}

.fntcolor{
color:#FF4710;
}
can be used as follows..
<p class="fntsize fntcolor">multiple classes.</p>

Using ID as selector :

#[ID Name] {
property:value;
}

#test {
color:#FF00FF;
}

<p id="test">using ID as selector.</p>