Class in CSS

Class

Class is specified by including a period (.) before the selector name.

 The syntax for declaring a Class selector is as follows:

.[Class Name] {

  property:value;

  ...

}

For example

.abc {

color:#bbbbbb;

}

To apply this style to the HTML, using the following code:

<html>

<head>

<title> </title>

</head>

<body>

<p class="abc">This is a sample using a Class selector.</p>

</body>

</html>

The above HTML code renders the output as follow:

This is a sample using a Class selector.

We can also specify different instances of a class selector.

This is achieved by using the following syntax:

[Type Selector].[Class Name] {

  property:value;

  ...

}

For example, if we have the following CSS declaration,

b.special {

  color:#aaaaaa;

}

i.special {

  color:#bbbbbb;

}

The following HTML,

<html>

<head>

<title> </title>

</head>

<body>

This shows how <b class="special">different instances</b> of a selector <i class="special">can be specified</i>.

</body>

</html>

The Output will be as follow:

This shows how different instances of a selector can be specified.