Difference between CSS id and class

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called “id” and “class”.

CSS ID SELECTOR

Id Selector is used to specify the style for a single or unique element.

CSS id selector is defined as #

SYNTAX:

#idvalue

EXAMPLE:


<html>
<head>
<style>
#data
{
text-align:center;
color:blue;
}
</style>
</head>

<body>
<p id="data">THE QUOTES</p>
<p>LEARN WEB DEVELOPMENT</p>
</body>
</html>

OUTPUT:

THE QUOTES

LEARN WEB DEVELOPMENT

CSS CLASS SELECTOR

Class Selector is used to specify the style for a group of  element within the class.

CSS class selector is defined as .

SYNTAX:

.classvalue

EXAMPLE:


<html>
<head>
<style type="text/css">
.data
{
text-align:center;
color:blue;
}
</style>
</head>

<body>
<p class="data">THE QUOTES</h1>
<p class="data">LEARN WEB DEVELOPMENT</p>
</body>
</html>

OUTPUT:

THE QUOTES

LEARN WEB DEVELOPMENT

You can also specify style for a particular element using class selector

EXAMPLE:


<html>
<head>
<style type="text/css">
p.data
{
text-align:center;
color:blue;
}
</style>
</head>

<body>
<h1>THE QUOTES</h1>
<p>LEARN WEB DEVELOPMENT</p>
</body>
</html>

OUTPUT:

THE QUOTES

LEARN WEB DEVELOPMENT

Posted in CSS Tagged with: