How CSS is Applied in Browsers

In the previous post we have explained the 3 ways to use css in html documents. We have explained the inline CSS, embedded CSS and the external CSS. We have tried to explain these through the code examples. Try to follow us along to understand all the concepts to write efficient CSS styles. Learn CSS step by step to understand more and understand better.

In this post we are going to explain that how browser apply CSS to a document. The CSS styles are simple and easy to use but they can get complex if the size of a document grows up. When the size of a document grows up it is difficult to stop styles by conflicting with one another. This can lead to code bloat or inefficient code the code that does not even work. In order to confidently navigate through a big and complex file you have to know that how browsers render the code. Let us see a simple example of how the browsers render the CSS code.

#wrapper p span a{color: red; font-size: 16px;}

In the above code the browser will first look at all the <a> tags in the document. Then it will search for the <span> tag that has an anchor tag in it. Then it will look for the <p> tag that have a <span> tag that holds an <a> tag in it. On the end it will select an <a> tag that is inside a <span> tag and it is in a <p> tag and the <p> tag is in an element that has an id of wrapper. So the browser renders the code from right to left.

What is Cascading and how it works

The cascading style sheets have derived their name from the cascading order in which the browser apply CSS rules. The CSS rules are applied in cascading order. It means that first the external styles are applied then the embedded styles are applied and in the end the inline styles are applied. If any of these styles conflicts with each other the most recent style wins and overrides the other styles applied to the element. Let us see an example of the overriding code.

HTML code example:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>How cascading style sheets work</title>

<style>

p{

color: #ccc;

font-style:italic;

}

a{

text-decoration: none;

color: #eee;

}

</style>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

</body>

</html>

In the above code the styles for <p> and <a> tag will be over written if the external style sheet has the styles declared for <p> and <a> tag. It is because the external style sheet is included after the embedded styles in the above code. So the most recent style will from the external CSS not from the embedded CSS. The same rule is applied within a CSS document. The most recent style for top to bottom will be applied by the browser. It is because the browser starts reading a document from top to bottom.

Inheritance in CSS

The rules in CSS can be inherited from a parent element. It is a very important to understand inheritance in CSS. The child elements inherit styles from their parent elements. To understand inheritance let us see the following example:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>How cascading style sheets work</title>

<style>

body{

font-size: 100%;

color: green;

}

p{

color: #ccc;

font-style:italic;

}

</style>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Heading one</h1>

<p> This is a paragraph.</p>

<blockquote>It is a block quote tag.</blockquote>

<a href="#">This is a link.</a>

</body>

</html>

In the above code we have written CSS styles in the style tag. The style for body tag is the style that every element inside the body tag will get. If the child element wants to override the parent tag’s style it can override the style. The style for the child element will be applied. So this is inheritance in CSS for you.

Comments