Selector -tag

Selectors refers to the HTML elements with the styles the users want to apply to them.The four different types of CSS selector are as follows.

Type/Element selector
class selector
id selector
universal selector

Type/Element Selector

A type selector simply specifies the element name along with the style to aaplied to the element .This result in applying the specified style to all the occurance of that element in a web page.

Example-

<html>
<head>
<title>CSS</title>
<style>
p
{
width:100%;
height:50%;
background-color:red;
}
</style>
</head>
<body>
<p> is a type/element selector</p>
</body>
</html>

Class Selector

The .class selector is used to select all elements which belong to a particular class attribute. In order to select the elements with a particular class, use the period (.) character specifying the class name ie., it will match the HTML element based on the contents of their class attribute.

Example-

class selector start with(.)period

<html>
<head>
<title>CSS</title>
<style>
.demo
{
width:100%;
height:10%;
background-color:lightblue;
tetx-align:center}
</style>
</head>
<body>
<div class="demo">this is demo example of using class selector</div>
</body>
</html>

output

CSS

this is demo example of using class selector

ID Selector

The “#” CSS id selector is used to set the style of the given id. The id attribute is the unique identifier in an HTML document. The id selector is used with a # character.

Example-

An ID selector start with hash symbol(#) .

<html>
<head>
<title>CSS</title>
<style>
#demo
{
width:100%;
height:10%;
background-color:lightblue;
tetx-align:center}
</style>
</head>
<body>
<div id="demo">this is demo example of using ID selector</div>
</body>
</html>

output

CSS

this is demo example of using class attribute

Differance between id and class selector

KEY	ID	CLASS
Syntax	In HTML, for an element, the ID name starts with the "#" symbol followed by a unique name assigned to it.	"class" assigned to an element has its name starts with "." followed by class name.
Selector	Only one ID selector can be attached to an element.	Multiple class selectors can be attached to an element.
Uniqueness	ID is unique in a page and can only apply to at most one element	The class can be applied to multiple elements so it could be multiple times on a single page.

<html>
<head>
<title>CSS</title>
<style>
#myHeader
{
width:100%;
text-align:center;
color:black;
background-color:lightblue;
}
.city
{
width:100%;
text-align:center;
background-color:tomato;
color:white
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>
<h1 id="myHeader">My Cities</h1>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>

output

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

My Cities

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Universal Selector

As the name suggests, Universal Selector in CSS is used to select all the elements on the HTML page, such as <p>, <h1>, <img> etc. Therefore, CSS styles applied to the universal selector affect every element on the web page (including and ). Asterisk (*): symbol denotes the universal selector in CSS.

Example-

universal selector start with(*)Asterisk

<html>
<head>
<title>CSS</title>
<style>
*
{
font-family:monotype corsiva;
text-align:center
}
</style>
</head>
<body>
<h6>this is demo example of using class selector</h6>
<div class="demo">
<p>this is demo example of using class selector</p>
<b>this is demo example of using class selector</b>
</div>
</body>
</html>

Grouping and Nesting of Selector/Comma Operator

The grouping selector selects all the HTML elements with the same style definitions. Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

Example-

<html>
<head>
<title>CSS</title>
<style>
p,h6,b
{
color:green;
font-size:20px;
text-decoration:underline;
}
</style>
</head>
<body>
<p> This is a paragraph </p>
<h6> Smaller Heading </h6>
<b> This is bold tag </b>
</body>
</html>