CSS Selectors as the name indicates, A CSS Selector selects the HTML element or elements that we wanna to style. There are five types of CSS Selectors:
In this chapter we will learn the most basic CSS Selectors.
The element selector selects a particular HTML element based on the element name.
Example
h1 {
color:green;
}
Now, all <h1>
elements on the page will be green in color.
The class selector selects HTML elements that have a specific class attribute.
Example
.center {
text-align: center;
color: green;
}
Now, all the HTML elements with class=”center” will be green and aligned to center.
The id selector selects HTML elements that have a specific id attribute.
Example
#para1 {
text-align: right;
color: green;
}
Now, all the HTML Elements in a page with id “para1” will be green in color and aligned to right.
The class selector selects HTML Elements that have a specific class attribute.
Example
.center {
text-align: center;
color: green;
}
Now, all the HTML Elements with class “center” will be green and aligned to center.
The universal selector (*) selects all the HTML Elements on the page.
Example
* {
text-align: center;
color: green;
}
Now, all the HTML Elements on the page (p, h1-h6), will be green in color and aligned to center.
The grouping selector selects all the HTML Elements that have same style definitions.
Example
h2 {
text-align: center;
color: green;
}
h3 {
text-align: center;
color: green;
}
p {
text-align: center;
color: green;
}
In an above code you can see that h2, h3 and p elements have the same style definitions. Here we can also group the selectors, to minimize the code. Like this:
h1, h2, p {
text-align: center;
color: green;
}
Related Posts