CSS Specificity, CSS Letter-Spacing, And CSS :Root Selector
CSS Specificity
CSS specificity and CSS Letter-Spacing help the browsers decide which property value is most suitable for the element. It specifies which style order is applied to an element.
Here are some important facts about CSS specificity:
- The CSS specificity is only essential when different selectors affect the same element. When this happens, the browser requires a way to identify the style to apply to the matching element, and that’s where CSS specificity comes in.
- If two or more selectors have equal specificity values, then the latest one assumes.
- Universal selectors (*) and the inherited values have lower specificity.
- The style property is of a more important specificity value than the selectors (excluding the !important in the stylesheet selector).
- The !important changes the selector specificity. If two selectors have equal specificity, then the selector has !important.
Specificity Hierarchy
Every selector has a place in the hierarchy. Four categories Four main categories define a selector's specificity level:
Inline Styles: This is attached directly to the element to be styled. For example: <p style="color: red;">.
IDs: This is an identifier that is unique for a page's elements with the second-highest priority. For example: #para.
Classes, Attributes, and Pseudo-classes: It contains classes, attributes, and pseudo-classes (like :focus, :hover, etc.).
Elements and Pseudo-elements: It contains the name of elements (div, h1) and pseudo-elements (like :after and :before). They generally have the lowest priority.
Specificity Rules
Specificity is the weight applied to the CSS declaration. Matching selectors have a certain number of selector types. Below is the calculation of specificity.
ID selectors are more specific than attribute selectors.
Observe the example below to understand.
Example
In this example, we use the id selector with the background-color property.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
font-size: 30px;
color: black;
background-color: orange;
}
#div1 {
background-color: blue;
}
div#div1 /*Higher specificity*/
{
background-color: green;
}
div[id=div1] {
background-color: red;
}
</style>
</head>
<body>
<div id="div1"> Welcome to Hubtolearn Solutions </div>
</body>
</html>
For equal specificity, the most recent rule will be considered.
If the same rule is applied twice to the external stylesheet, the latest or last rule is applied.
Example
In this example, since the specificity of the name of elements is the same, the latest specified element name will be considered.
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size: 30px;
text-align: center;
}
div
{
background-color: orange;
color: black;
}
div
{
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h2> Equal specificity </h2>
<div> Welcome to Techstack </div>
</body>
</html>
Element selectors are less specific than class selectors.
A class selector (.nav, .high, etc.) is more specific than element selectors (like div, h1, p, etc.)
Example
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: orange;
text-align: center;
color: black;
font-size :40px;
}
div {
background-color: pink;
text-align: right;
color: green;
}
</style>
</head>
<body>
<h1>Hello Everyone</h1>
<div class="intro">Welcome to TechStack Solutions</div>
</body>
</html>
CSS Letter-spacing
CSS Letter-Spacing property controls the space between each letter inside an element or text block. This property can increase or reduce the space between text characters and change the space between the neighboring characters.
Possible Values
Normal: This default value does not place space between the characters or change the default spacing between the letters. It is the same as setting the value to 0.
Length: This setting specifies an extra space between the characters. It permits negative values that tighten the text's appearance instead of loosening it. The greater the length, the greater the space between the letters. It supports the font-relative values (em, rem), and absolute values (px).
Example
In this example, we try different values of the letter-spacing property to see the different results we can get. We also use the possible length values to see the spacing between the characters.
<!DOCTYPE html> <html> <head> <title>CSS letter-spacing Property Example</title> </head> <body style = "text-align: center;"> <h1 style = "color: blue;"> Welcome to TechStack Solutions </h1> <h2> Here is an example of the CSS letter-spacing Property </h2> <p style= "letter-spacing: normal;"> This sentence has letter-spacing: normal; </p> <p style= "letter-spacing: 7px;"> This sentence has letter-spacing: 7px; </p> <p style= "letter-spacing: 0.7em;"> This sentence has letter-spacing: 0.7em; </p> <p style= "letter-spacing: -1px;"> This sentence has letter-spacing: -1px; </p> </body> </html>
Note: A negative or positive value of CSS letter spacing that is too large will make the word unreadable. The letters appear unconnected and individual whenever the positive value is very large. In contrast, with a very large negative value, the letters will overlap with each other, making the word unrecognizable.
CSS:root Selector
In CSS, this pseudo-class matches the root element of a document. It chooses the highest-level parent of the document tree.
In HTML, the <html> element is the root element. The: root selector is equivalent to the HTML selector since both target the same element but are more specific.
Example
<!DOCTYPE html>
<html>
<head>
<title>:root selector</title>
<style>
:root {
background: lightgreen;
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to TechStack Solutions</h1>
<h2>Here is an example of :root selector</h2>
</body>
</html>
Now, we see how the html selector and :root selector work simultaneously. Though they both work similarly when it comes to specificity, the :root selector wins.
Example
In this example, we will define similar properties in the html selector as well as in the :root selector. Due to higher specificity, properties in :root selector will work, but properties in html selector that are not in :root selector will work.
<!DOCTYPE html>
<html>
<head>
<title>:root selector</title>
<style>
:root {
background-color: lightgreen;
color: blue;
text-align: center;
}
html{
background-color: violet;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to TechStack Solutions</h1>
<h2>Here is an example of :root selector and html selector</h2>
</body>
</html>
Notice that the background-color and color properties are mentioned in both html and :root selector, but in the output, only the properties mentioned in :root selector will work. This is due to the high specificity of the :root selector.
