Date-26-01-2023
It is my first blog with CSS Today, I start with the CSS selectors.
CSS selectors are used to targeting the HTML code and design to this and give a look, style and color to the element to use CSS selectors are very help full by using CSS selectors to target the element as you want. And you give the selectors as that element the CSS applies the whole element which is selected.
The CSS selectors provide code reusability and it saved a lot of time. for example, if you use CSS selectors to write one or more lines of code and you want to change the same property on each code then change in one place and they apply themselves in all the code in which you use CSS selectors.
There are mainly four types of CSS Selectors
Simple selectors (select elements based on name, id, and class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)
Simple selectors
p { // tags name selectors
text-align: center;
color: red;
}
#para1 { // id selectors
text-align: center;
color: red;
}
.center { // class selectors
text-align: center;
color: red;
}
p.center {
text-align: center;
color: red;
}
<p class="center large">This paragraph refers to two classes.</p>
Universal Selectors
* {
text-align: center;
color: blue;
}
CSS Grouping Selector
h1, h2, p {
text-align: center;
color: red;
}