Basic Selection in CSS

Element selectors allow you to apply styles to all elements of a specific type on a web page. Let's apply the specified styles to all paragraphs and list items on the web page.

9
1
2
3
4
5
6
7
p {
  color: red;
}

li {
  font-size: 16px;
}

• Element selectors have low specificity, meaning they will be overridden by more specific selectors, such as class or id selectors;
• They can be combined with other selectors to create more specific styles. For example, you can use a descendant selector to apply a style to all paragraphs that are descendants of a particular element, like this:

9
1
2
3
#main-content p {
  color: blue;
}

This will apply the specified style to all paragraphs that are descendants of an element with the id main-content;

• Similarly, another way to use these elements can be to apply a similar style across the board to certain elements. This is done by providing a list of selectors.

9
1
2
3
4
h1,h2,h3{
  font-weight: bolder;
  color: red;
}