CSS (Cascading Style Sheets) is a language used for describing the presentation of a document written in a markup language, such as HTML or XML.
It is used to control the layout and visual design of web pages.
CSS selectors are used to select elements on a web page and apply styles to them.
Some common types of selectors include:
Element selectors: Selects elements based on their HTML tag name, such as "p" for paragraphs or "h1" for headings.
Example:
p {
color: blue;
}
Class selectors: Selects elements based on their class attribute. Classes are assigned to elements using the "class" attribute, and multiple elements can share the same class.
Example:
.highlight {
background-color: yellow;
}
ID selectors: Selects elements based on their id attribute.
IDs are assigned to elements using the "id" attribute, and each element can have only one unique id.
Example:
#header {
font-size: 20px;
}
Attribute selectors: Selects elements based on their attributes and attribute values.
Example:
a[href='https://example.com']
{
color: red;
}
There are also more advanced selectors such as:
Pseudo-class selectors: Selects elements based on their state or position in the document, such as links that have been visited or elements that are being hovered over.
Example:
a:hover {
text-decoration: underline;
}
Pseudo-element selectors: Selects a specific part of an element, such as the first letter of a paragraph or the ::before and ::after of an element.
Example:
p::first-letter {
font-size: 20px;
}
You can also group selectors to apply the same styles to multiple elements.
Example:
h1, h2, h3 {
color: blue;
text-align: center;
}
You can also use CSS cascading and inheritance to apply styles to child elements.
Example:
#parent {
color: blue;
}
#parent .child {
background-color: yellow;
}
It is important to note that the specificity of the selectors is also important, more specific selectors will have precedence over more general selectors.
