As the name implies, Cascading Style Sheet is a styling system used to style HTML elements. These styles cascade from top to bottom, where the style above another on the same element will be overwritten by the one below it.
Styles that are applied to HTML are done using a selector. A CSS selector will let you choose the specific HTML element you wish to style. There are three basic ways of achieving this:
A CSS type selector will enable you to select an HTML element base on it, <tagname>. With this kind of selector, every element in the HTML code with the specified <tagname> will be styled. For example:
<html>
<head>
<style>
p{
color: Red;
background-color:yellow;
}
</style>
</head>
<body>
<p>This is an example para</p>
<body>
</html>
A class selector is used to select elements that have the same class name in order to style them in the stylesheet.
<html>
<head>
<style>
.pTry{
color: Red;
background-color:yellow;
}
</style>
</head>
<body>
<p>This is an example para class</p>
<body>
</html>
In the styles, you start the class name with a period (.)
ID selectors are used to target a specific element using the id attribute value given to that element.
<html>
<head>
<style>
#pTry{
color: Red;
background-color:yellow;
}
</style>
</head>
<body>
<p id="pTry">This is an example para ID</p>
<body>
</html>
In the styles, you start the ID name with a pound sign (#)
We also have pseudo selectors.
As mentioned earlier, the styles applied on elements on top of the cascade will be overwritten by the ones applied under them on the same element.
But with specificity weight in mind, this can be altered and an element with the same style from different selector types will have the style on top with the two selectors applied to it. We will see how as we move on.
Specificity can also allow you to pick out an element in a very direct manner. It entails how specific you want to be in applying the said style.
The different selector types have the following specificity:
The type selector has the lowest specificity weight and holds a point value of 0-0-1.
The class selector has a medium specificity weight and holds a point value of 0-1-0.
The ID selector has the highest specificity weight of 1-0-0.
These weight values are not base 10 values, and that is why they are hyphenated.
With these weights, if an element is given different styles with the three selector types targeting it, no matter where it is placed in the cascade, the style from the ID selector will take precedence over the others, followed by the class selector, and lastly by the type selector.
Let’s examine this concept with the code below.
From the code snippet above, the id selector on top in the cascade has its style applied to the <p> element over the style from the class and type selector. It was for the class selector over the type selector as well, all due to the specificity weight of these selectors.
Meanwhile, the styles on the <span> tag will follow the normal cascade rule where the style which is below has precedence over the one above it.
If you want to increase the specificity weight of an element, you can do that by adding different weights from the different selector types you use to target the element.
For example, let’s compare the two weights of the selector combination:
type type id class] the individual weights [0-0-1 0-0-1 1-0-0 0-1-0].Total weight =
0-0-1 +
0-0-1 +
1-0-0 +
0-1-0
= 1-1-2
id``id type]
the individual weight [1-0-0 1-0-0 0-0-1]Total weight =
1-0-0 +
1-0-0 +
0-0-1
= 2-0-1
Among the two combinations, the second with a total weight of 2-0-1 will surely take precedence over the first, with a total weight 1-1-2, if targeted on the same element. Let’s see this example below, using the combination made in this example.
The code above is just a simple implementation of our example for calculating specificity weights of combined selectors. As indicated in the calculation, it has also been confirmed by our code, as we saw above.