Programming Concepts Help: Precedence Order of CSS rules

Learning AngularJS; Guide for beginners:

Learning AngularJS Part 1: Introduction to AngularJS

Learning AngularJS Part 2: Model View Controller

Every web developer needs to write CSS for making a site beautiful and attractive. CSS is easy but also tricky due to its different behavior on different browsers. The most annoying thing with CSS any developer face is the order of precedence in which CSS rule applied.

Let say there is a div with class and id, and there is css rule define for class, id and tag.

<div class="div-class" id="DivId">
Here is content div...</div>
<style>
d iv{
background-color:red;
width:100px;
height:100px;
}

#DivId{
background-color:green;
width:200px;
height:200px;
}

.div-class{
background-color:yellow;
width:300px;
height:300px;
}
</style>

So, which rule will be applied to div? Any guess! No Lets see demo.

Order of precedence of CSS rule

There is a specific order in which CSS applied to an element. This order can further be divided into two parts.

A. Placement Method of CSS

Style to any HTML element can be applied in three different legal ways.

As inline styles — css style directly applied to an element using style attribute.

<div style="background-color: red; height: 100px; width: 100px;">
</div>

As embedded styles — style applied by writing CSS in style tag in head tag of HTML.

<style>
.div-class:{
  background-color: red; 
  height: 100px; 
  width: 100px;
}
</style>
<div class="div-class">
</div>

In an external stylesheet — in this we put all our code in file with extension .css and include in html page with link tag.

<link href="theme.css" rel="stylesheet" type="text/css"></link> 
<div class="div-class">
</div>
<!-- and a seperate theme.css file contain>
.div-class:{
  background-color: red; 
  height: 100px; 
  width: 100px;
}

CSS declaration overrides the other declaration in the order of precedence we listed above. Its means:

Inline styles have highest priority and it overrides all other rules if there is same property describe in other methods.
Embedded styles have less priority than inline style but it overrides the same propertied define in external stylesheets.
The External style sheet has lowest priority but it is the recommended way, as it separates the CSS from HTML and make it easy to manage CSS in one place. If there is more than one external style sheet than priority decided in the way files included in HTML, first file (top) has lowest priority while the last file included (at bottom) has greater priority.

B. CSS Selector Precedence

Within any of above method precedence is different for the CSS selector used. As we see in the first example in this post. A div having three different rules for different selector will result in only one of three CSS selector. The order of precedence of the various CSS selectors are:

ID Selector

ID is restrictive attribute, valid HTML page contains only one element with a specific ID. That is the reason ID selector has the highest priority. Which means a CSS rule in external CSS file will override all other CSS rules with the same properties for any element. Similarly the CSS rule define for ID in embedded style will override other rules in embedded style.

#DivId
{
  background-color:red;
}

Attribute Selector

In priority order second selector is attribute selector, in which we define CSS for the element which has a specific attribute value. It also has the same scope for external and embedded styles as for ID.

a[target]
{
  background-color:red;
}

<a href="http://goo.gl/DnIh3A">Angular JS

<a href="http://goo.gl/xk3G5A" target="_blank">c# inconsistency in equality

Class Selector

After attribute selector, class selector has the priority on others selector. Class selector is defined by a dot with class name.

.aClass{
  background-color : yellow;
}

<a class="aClass" href="http://goo.gl/DnIh3A">Angular JS

After class selector the order of precedence is:

Child Selector parent > first child of element
```
ul > li { }
```
Adjacent Sibling Selector two elements sibling to each other
```
#DivId + ul { }
```
Descendant Selector child at any level under parent tag
```
ul li { }
```
Type Selector tag name
```
li{ }
```

Order of declaration

Beside above given rules of precedence, CSS follows the descending fashion to apply CSS rule means if there are two different rules for the same class, will result the last rule to be applied

.aClass{
  background-color : yellow;
}
.aClass{
  background-color : red;
}
//this last one will override above ones
.aClass{
  background-color : green;
}
<a class="aClass" href="http://goo.gl/DnIh3A">Angular JS

The !important Rule

There can be a situation when we need to override the CSS in less priority place. Like if there is a width property assigned in inline CSS and we need to override in External Style Sheet or width property set in ID selector and we want to override it in class selector then we use !important with the rule we want to have higher priority.

For example anchor tag with inline CSS:

<a href="http://goo.gl/DnIh3A" style="background-color: #389abe; border: 1px solid red;">Angular JS

and we want to override background color in type selector rule than we use:

a {  
  border:5px dotted green;
  background-color: yellow !important; 
}

See Demo here

If two different Selectors or CSS styles placement contains the !important than priority will be according to above given conditions.

Learning AngularJS; Guide for beginners:

Learning AngularJS Part 1: Introduction to AngularJS

Learning AngularJS Part 2: Model View Controller

Wednesday, May 14, 2014

Precedence Order of CSS rules