Cascading Order and Inheritance in CSS

43 comments so far | Add yours Digg del.icio.us

CSS styles can be specified in many ways, but they will all cascade into one style sheet in the end. Sometimes conflicts will arise between the style sheets that influence how styles are merged. The cascading priorities of CSS can be confusing, and could often lead to excessive use of the !important rule in frustration when dealing with large sites. This post is to clearify the cascading order of CSS.

[ skip to examples ]

The Cascading Order

Styles are read in three ways: browser default (blue links etc), style sheets (internal in the <head> or external via @import or <link>) and inline styles. Here is the simulated default priority order, where no.4 as most important:

  1. Browser default
  2. External style sheet
  3. Internal style sheet
  4. Inline style

Let me try to explain how this works. If two rules have the same weight, the latter wins. Imported style sheets and internal style sheets actually carry the same weight, but since imported styles are considered to be before any rules in the style sheet itself, the latter will win (the internal). This is not the case if you f.ex have two <style> tags inside your <head>, where second one uses the @import rule to import an external style sheet. That could be considered invalid according to the specs: In CSS1, all ‘@import’ statements must occur at the start of a style sheet, before any declarations.

Also worth noting in this list, is that any inline style will carry the same weight as #id definitions inside the style sheet. But again, since the inline style attribute comes latter, it will win the battle.

Internal Priorities

Now, let’s make a general list of the internal priorities for CSS (3 has the highest priority):

  1. element
  2. .class
  3. #id

This is the default priority order. In addition to this, specificity will also count, f.ex ul li will override li. W3C has made a decent table over how you should calculate internal weight:

LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */
#list         {...}  /* a=1 b=0 c=0 -> specificity = 100 */

  • a represents the number of #id attributes in the selector
  • b represents the number of class attributes
  • c represents the number of tag names

Combining these into a number will give you the actual weight. This means that f.ex li#list will have the same weight as ul #list. This is probably one of the most confusing things about the cascade, but it’s actually simpler than you might think: it’s all about counting.

!important

The !important rule is the way to override all of this. Putting !important after the declaration, but before the semicolon will simply override all previous cascade and give it the highest priority. If !important is specified more than once for the same element, they will fall back to the normal cascading rules. Also, declaring a shorthand property to be !important is equivalent to declaring all of its sub-properties to be !important.

Inheritance

Many web designers who are new to CSS often get confused by inheritance and how it works. During the cascade, property values are resolved to computed values. Some of these values are inherited from its parent’s element in the document tree. The very basic principle of inheritance is that properties with the value “inherit” will inherit its parent’s value for the same property into a computed value. Here’s a basic example:

red text

<p style="color: red; border: 1px solid #000;"><q><span>red text</span></q></p>

The property “color” with the value “red” will be inherited into the <q> and <span> elements, because it has the value “inherit” as default. The “border” property does not have inherit as default value, so only the paragraph will have a border, not its children. This is the most straightforward inheritance. Here is another more complex example, where a computed value will be calculated when inheritance occurs:

big text

<p style="font-size: 10px;"><span style="font-size: 200%;">big text</span></p>

The property “font-size” with the value “10px” will be inherited into the <span> element. The span takes this value and sums up its property “font-size” by combining it with the inherited value. So the <span>’s property “font-size” will have the value 20px after the cascade.

Some screen properties already have “inherit” as a default value, forcing themselves on children in the document tree. Here’s the list:

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font
  • font-family
  • font-stretch
  • font-size
  • font-size-adjust
  • font-style
  • font-variant
  • font-weight
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-type
  • quotes
  • text-align
  • text-indent
  • text-transform
  • white-space
  • word-spacing

Note: When using the universal selector * in CSS, be careful not to include any of the properties above that naturally inherit. Doing so will ruin the inheritance flow in the document later on.

Examples

I set up som cascading examples here as a reference. Here is the sample HTML I used for the test:

<p class="pclass" id="pid"><span class="sclass" id="sid">text</span></p>

Here are some CSS scenarios that could reside inside the style sheet with results explained:

  1. span#sid { color: red; }
  2. #pid span { color: green; }

The text will be rendered green. Both styles carry the same weight (one id, one tag) but the green value is last defined.

  1. #pid #sid { color: red; }
  2. p.pclass span#sid.sclass { color: green; }

The text will be rendered red. The first definition has two id’s, (weight 200) and second has one id, two tag names and two class attributes (122).

  1. #pid { color: red !important; }
  2. span { color: green; }

The text will be rendered green. Even if the first definition is #id-specified with !important and color will be inherited, targeting elements further down the document tree wins.

  1. #pid { color: blue; font-size: 10px; }
  2. #pid span { color: red !important;}
  3. p #sid { color: green; font-size: 150%; }

The text will be rendered red in 15px size. Both definitions carry the same weight as default, but red wins the color battle for its !important rule. The span will inherit the #pid defined font-size: 10px; and combine it with it’s own 150%. The result will be 10×1.5=15px.

Further reading:

43 Responses so far. Add yours.

Permanent link At 7:36 am on May 12th, 2007 , Andy Vaughn wrote:

Good article. This should be very helpful for people who have yet to encounter inheritance issues.

Permanent link At 9:55 pm on May 13th, 2007 , NHL Fan wrote:

Nice one, but I didn’t understand few details. For example on which dependecies priority is built?

Permanent link At 10:20 pm on May 13th, 2007 , David (author) wrote:

@NHLFan: Exactly what section are you referring to? If you could elaborate your question a tad, I might be able to help you out.

Permanent link At 5:49 am on May 14th, 2007 , Stu wrote:

Great Article, thank you. Just one small thing. You’ve used “it’s” instead of “its” - “it’s” is a contraction of “it is”. Thought it might help for next article. Thanks again

Permanent link At 9:11 am on May 14th, 2007 , David (author) wrote:

Thanks Stu, I tried to correct the cases where I used it’s its the wrong way!

Permanent link At 2:42 am on July 20th, 2007 , Jon Clark wrote:

Best article I’ve seen so far that sums up everything I needed to know about inheritance, thanks a lot!

Permanent link At 4:05 pm on August 13th, 2007 , Seb wrote:

Hey, great article! 2 thumbs up :)

Permanent link At 9:18 pm on May 12th, 2008 , PlNG wrote:

This blog displays the common misconception that the specificity value is a single base 10 value. CSS specificity values work on specificity or occurrence of each selector type in the order of least to greatest specificity: Selector, class, ID, and inline. If I were to write these css test rules: div.test {color:green} (11 under “base10″, 1 selector, 1 class) and div div div div div div div div div div div{color:red;} (11 under “base10″, 11 selector, 0 class) The green rule would win because it has the higher specificity due to the class despite appearing first.
The blog I’ve linked to in my name does a fabulous job of explaining the cascade order, and the legendary CSS Guru Eric Meyer even makes a comment there. The comments are as important as the article in clarifying issues.

Permanent link At 4:01 am on May 21st, 2008 , Matt wrote:

PINK: picky picky… for most this is good enough. Yes, you may run into issues with complex css, but if you are doing that complex css then you already understand the specificity rules.

This is a great post!

Permanent link At 5:21 pm on August 11th, 2008 , Photo Shop wrote:

CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

Permanent link At 9:33 pm on August 26th, 2008 , non reciprocal wrote:

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

Permanent link At 8:46 am on April 8th, 2009 , CuriousReader wrote:

very useful article …and well organized..thanks dude,the writter

Permanent link At 9:57 pm on April 28th, 2009 , GenericViagra50 wrote:

Our Online Pharmacy no Prescription doctors will evaluate your health information and provide you with a prescription, so you do not need a prescription from your regular family physician to cheap Generic Viagra. More info at: http://www.safemeds.com/

Permanent link At 12:00 am on May 7th, 2009 , Generic Viagra wrote:

Our order viagra will evaluate your health information and provide you with a prescription, so you do not need a prescription from your regular family physician to cheap Generic Viagra. More info at: http://www.xlpharmacy.com

Permanent link At 10:47 am on May 15th, 2009 , Kamagra wrote:

Great, thanks

Permanent link At 10:47 am on May 15th, 2009 , Acai berry wrote:

fnx

Permanent link At 10:48 am on May 15th, 2009 , Best fat burner wrote:

fnx alot

Permanent link At 10:17 pm on May 28th, 2009 , Gay Prison sex wrote:

Nice site fnx!

Permanent link At 4:12 pm on June 5th, 2009 , tummy tuck wrote:

thanks very interesting ana useful post

Permanent link At 9:09 am on June 10th, 2009 , Generic Viagra wrote:

hey this is a nice place to get information about cascading Style sheet Inheritance…

thanks for a nice post

Permanent link At 9:17 am on June 10th, 2009 , Sildnafil Citrate wrote:

nice place to learn cascading order and inheritance in CSS…
good going..

Keep it up..

Thanks and Regards..
Mark Gats

22 Trackbacks & Pings:

Permanent link Trackback at 7:23 pm on May 13th, 2007 by Links for 5/13/07 [my NetNewsWire tabs]:

[…] Cascading Order and Inheritance in CSS | monc’s kitchen #&8212; Using !important […]

Permanent link Trackback at 9:11 pm on May 17th, 2007 by Wolf’s Little Store » Interessant leesvoer van de laatste dagen (2):

[…] interessant artikel over overerving in CSS. Wat leren we hier concreet uit? Een declaratie zoals ul#sidebar li ul […]

Permanent link Trackback at 11:28 pm on June 23rd, 2007 by am Design » Baabelin kirjasto » Artikkelikatsaus: Toukokuu 2007:

[…] Cascading Style Sheets. Cascading kuten kaskadi, putous. David’s Kitchen opastaa artikkelilla Cascading Order and Inheritance in CSS hyödyntämään tätä kaskadia. Lopputuloksena on tiiviimpää, selkeämpää, toimivampaa ja […]

Permanent link Trackback at 8:39 am on August 24th, 2007 by freelancer - webdesign tutzing starnberg | just4freaks.de:

[…] CSS styles can be specified in many ways, but they will all cascade into one style sheet in the end. Sometimes conflicts will arise between the style sheets that influence how styles are merged. The cascading priorities of CSS can be confusing, and could often lead to excessive use of the !important rule in frustration when dealing with large sites. more […]

Permanent link Trackback at 3:42 am on December 20th, 2007 by generic cialis Acheter online:

generic cialis Acheter online…

27c6899db6:38 Pharmacie en ligne http://fr.generics-first-hand.com/…

Permanent link Trackback at 9:55 am on October 13th, 2008 by Kamagra Jelly:

Kamagra Jelly…

Where are your related posts?…

Permanent link Trackback at 10:18 am on May 21st, 2009 by Web Design Industry Jargon: Glossary and Resources | How-To | Smashing Magazine:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 5:07 pm on May 21st, 2009 by Web Design Industry Jargon: Glossary and Resources:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 5:42 pm on May 21st, 2009 by Wordpress Blog Services - Web Design Industry Jargon: Glossary and Resources:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 1:15 am on May 22nd, 2009 by Web Design Industry Jargon: Glossary and Resources | Programming Blog:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 1:15 am on May 22nd, 2009 by Web Design Industry Jargon: Glossary and Resources | Programming Blog:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 4:05 am on May 22nd, 2009 by Web Design Industry Jargon: Glossary and Resources | Breaking News | Latest News | Current News:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 6:14 am on May 22nd, 2009 by Web Design Industry Jargon: Glossary and Resources | i-Technews:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 9:39 am on May 22nd, 2009 by ZachBrowne.com - Web Design, SEO, & Other Cool Stuff For Entrepreneurs : ZachBrowne.com:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 1:06 pm on May 22nd, 2009 by Web Design Industry Jargon: Glossary and Resources | Misr IT Reader:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 12:40 am on May 25th, 2009 by Web Design Industry Jargon: Glossary and Resources | WORDPRESS-TEMPLATES-PLUGINS-RSS | Web Design Industry Jargon: Glossary and Resources >>>:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 12:40 am on May 25th, 2009 by Web Design Industry Jargon: Glossary and Resources | WORDPRESS-TEMPLATES-PLUGINS-RSS | Web Design Industry Jargon: Glossary and Resources >>>:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 9:57 pm on August 18th, 2009 by Cascading Order and Inheritance in CSS | David’s kitchen:

[…] See the article here: Cascading Order and Inheritance in CSS | David’s kitchen […]

Permanent link Trackback at 3:51 pm on September 27th, 2009 by Żargon projektantów stron: słownik i źródła:

[…] Cascading Order and Inheritance in CSS – David’s Kitchen […]

Permanent link Trackback at 9:30 pm on October 16th, 2009 by Aino | David’s kitchen:

[…] posts have been very popular around here, like the lightweight image gallery, Scalable CSS buttons, cascading order in CSS and rendering quotes with CSS. They will still be here as an […]

Permanent link Trackback at 6:02 pm on October 23rd, 2009 by new-impulse multimedia | Blog » Blog Archive » Webdesign vakjargon uitgelegd:

[…] Cascading Order and Inheritance in CSS from David’s Kitchen […]

Permanent link Trackback at 9:23 pm on March 10th, 2010 by The Worst Movies (that I love): “Repo! The Genetic Opera” | DailyGenetic.info:

[…] Cascading Order and Inheritance in CSS | David's kitchen […]

This entry was posted on Friday, May 11th, 2007.

React

Categories

RSS Feeds

Bookmark

Translate

Recently Posted

Both comments and pings are currently closed.