CSS Selectors are used to selecting a particular HTML element you want to style. There are several different types of selectors in CSS.
The element selector selects the HTML element by name.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
h1 {
color:green;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
The CSS ID selector is used to add a style for a particular HTML element of a page. An ID is always unique for a single page. If you use the same id for two HTML elements on the same page always first ID working.
It is declared within style element followed by a # symbol.
<!DOCTYPE html>
<html>
<head>
<style>
#heading{
color: green;
text-align: center;
}
#paragraph{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 id="heading">Hello World!</h1>
<p id="paragraph">This paragraph is styled with CSS.</p>
</body>
</html>
It is declared within style element followed by a (.) Dot symbol. It is used to add a style for a group of the element which class name is the same.
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 id="heading">Hello World!</h1>
<p class="paragraph">This paragraph is styled with CSS.</p>
<p class="paragraph">It is very easy and simple.</p>
</body>
</html>
The universal selector is used as a wildcard character. It selects all the elements on the pages.
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
The grouping selector is used to select all the HTML elements with the same style definitions.
Grouping selectors are used to minimizing the code. Commas are used to separate each selector in a grouping.
Let's see the CSS code without a group selector.
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
As you can see, you need to define CSS properties for all the elements. It can be grouped in following ways:
h1,h2,p {
text-align: center;
color: blue;
}
Let's see the full example of CSS group selector.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello studentstutorial.com</h1>
<h2>Hello studentstutorial.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>