In this post we will talk about
- HTML elements hierarchy
- Specificity
HTML Hierarchy Tree
The elements which are present higher in this hierarchy tree are known as ancestors and the elements which are below these ancestors are known as the descendants of these ancestors. The descendants inherit the style form their ancestors or parents. Inheritance is really useful as we do not need to duplicate styles for descendants because they pick up all the style from their parents. So in the image below if there is a style applied to the div they will be implicitly inherited by their descendants which are h1, h2, ul, a and their descendants em and li.
HTML Family Tree
However there are a few properties that are not inherited. These properties are
- Placement tags
- Margins
- Borders
- Background Colors
Which makes sense because generally we do not want inherit these properties to the child element anyways. Also the styles that are more specific override the less specific or inherited style. So in the case of above hierarchy tree if we have a specific style for li then it will override the style provided by div or ul. So let us see this Inheritance in action. There are some styles properties that we want to apply to all the elements in our web page so the best way to do that will be adding that style at the body level. If you recall from the previous post that we have 3 types of selects which we can use to specify styles (tag, class and Id). The tag selector is specific to a tag and the Id selector is supposed to be unique on a page so our best option to define this style is as a class. So let us a style for our web page. The way we define style by class is prefixing (.) before the class name. As you can see below we have created a style for the page where we have defined the style name as .webPage where (.) represents that the style is for a class.
.webPage {
font-family: Calibri, Cooper, Verdana, sans-serif;
font-size: 16px;
color: #117c13;
background-color: #000000;
width: 800px;
margin: 5 auto;
}
We have specified multiple fonts followed by a complete font family. It is useful because if the browser does not Calibiri font available, it will use Cooper and if does not have Cooper it will use Verdana and if it does not have Verdana then the browser will use any sans-serif font. Then we have also specified the default font-size of the text on the page along with font color, background color, width and margin of the body. Now let us refer this style in the html page.
<body>
The complete code of the webpage is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Learn CSS3</title>
<style>
.webPage {
font-family: Calibri, Cooper, Verdana, sans-serif;
font-size: 16px;
color: #117c13;
background-color: #000000;
width: 800px;
margin: 5 auto;
}
</style>
</head>
<body>
<article id="first-article">
<section id="header-section">
<h1>Learn everything about CSS</h1>
<div>
<span>Posted on 12th Sep 2013</span>
<span>by</span>
<span>Abhishek Shukla</span>
</div>
</section>
<section>
<p> </p>
<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.
<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p>
<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.
In this course we will have a look at the various basics of CSS3.
We will also get our hands dirty with some practical examples.</p>
</section>
<aside>
<section>
<h2>About CSS3</h2>
</section>
<section>
This section is generally used for the side panels. Sometime it is also used to give additional information.
<ul>Here is a list of few useful concepts in CSS
<li>Selectors</li>
<li>Inheritance</li>
<li>Specificity</li>
<li>Border</li>
<li>Margin</li>
<li>Padding</li>
<li>Positioning</li>
</ul>
</section>
</aside>
</article>
<footer>
<p>Copyright 2013 Abhishek Shukla</p>
</footer>
</body>
</html>
When we see this page in the browser it looks something like below.
Style Body
While in browser if want to see a style then we need to press F12 and click on the lens icon at the bottom of the page and then select the element which we want to inspect.
Find Element Style
Find Element Style
Once we make this selection in the same Elements Window we see the styles that are applied to the selected element.
Find Element Style
We can also look at the styles of the element by simply right clicking the element and selecting Inspect element.
Find Element Style
Specificity
Specificity is the methods by which a browser chooses which property estimations are the most important to a component and becomes connected. Specificity is just dependent upon the matching administers which are made out of selectors of distinctive sorts. This means that at any point of time the style that will be applied to an element will be the most specific style. We can determine which of the style is most specific by counting the number of ID selectors, class selectors, attribute selectors, pseud-class selectors, type elements and pseudo-elements. So let us say Number of Id selectors (Tag Selector) = x Number of class, attribute and pseud-class selectors (Class Selector) = y Number of type and pseudo-elements (Id Selector) = z Then xyz is our specificity of our style or (x*100 + y*10 + z) Below are a few instances showing us how we can find specificity of a style.
li x=0 y=0 z=1 => specificity = 1 ul li x=0 y=0 z=2 => specificity = 2 ul ol+li x=0 y=0 z=3 => specificity = 3 ul + *[ rel="nofollow"] x=0 y=1 z=1 => specificity = 11 ul ol .footer x=0 y=1 z=2 => specificity = 12 .footer .webpage x=0 y=2 z=0 => specificity = 20 # first-article # header-section x=2 y=0 z=0 => specificity = 200 # first-article li .footer x=1 y=1 z=1 => specificity = 111
So this is the exact reason lot of CSS designers prefer not to use Id but use classes instead. Ids change the specificity a lot on their own and might have some unintended behaviors at times. We generally don’t need to calculate the specificity as we can inspect the element to see how the styles are working on it. As we can see in the image below the font-size specified in .webPage is overwritten in p.
Find Element Style
The code for this post can be found @ here or @ mirror
