CSS Selectors
A CSS selector is utilized to pick the particular HTML element you desire to style.
CSS selectors are categorized under the following:
- Universal Selector
- Element Selector
- Id Selector
- Class Selector
- Group Selector
Universal Selector
The universal selector targets all the HTML elements in the page. It is expressed using an asterisk (*).
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Selectors
</title>
</head>
<body>
<h2>
CSS Tutorial
</h2>
<p> Example of css selecters
</p>
</body>
</html>
CSS
*
{
color: red;
text-align: center;
}
Output
Element Selector
The element selector is utilized to choose HTML elements like
<h1>, <p>,
<div>, etc.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Selectors
</title>
</head>
<body>
<h1>
Tutorials4Coding
</h1>
<p>In our website you can learn:</p>
<p>
C Programming
</p>
<p>
Python
</p>
<p>
JavaScript and many more...
</p>
</body>
</html>
CSS
*
{
color: blue;
}
p
{
color: violet;
}
Output
ID Selector
An ID selector selects a particular HTML element based on its own identifier. It is declared with the hash "#" symbol followed by the name of the ID.
Example:
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Selectors
</title>
</head>
<body>
<h1 id="heading">Tutorials4Coding</h1>
<p
id="para">
A Coding Website
</p>
</body>
</html>
CSS
#heading
{
color: blue;
}
#para
{
color: red;
}
Output
Class Selector
The class selector chooses the HTML element based on their class attribute. It is specified using the period "." character followed by the class name.
Example:
<!DOCTYPE html>
<html>
<head>
<title> CSS Selectors </title>
</head>
<body>
<h1 class="heading"> CSS Class Selector </h1>
<p class="para"> This is an example of css class selectors </p>
</body>
</html>CSS
.heading
{
color: blue;
}
.para
{
color: red;
}
Output
