Home arrow Style Sheets arrow Page 4 - Learn CSS: Introduction to Inheritance, Specificity, and Cascade
STYLE SHEETS

Learn CSS: Introduction to Inheritance, Specificity, and Cascade


We are still discussing the basic concepts of CSS. In this article (and the next part) we will talk about how the structure of the CSS document can affect Web page design. Actually, there's something that I haven't discussed until now, which is what are the places that we can use to write styles and how it can affect the Web page. This is also related to the cascade, inheritance and specificity concepts which help you to understand how to structure your CSS document. This article is the ninth in a series covering CSS.

Author Info:
By: Michael Youssef
Rating: 4 stars4 stars4 stars4 stars4 stars / 21
July 18, 2005
TABLE OF CONTENTS:
  1. · Learn CSS: Introduction to Inheritance, Specificity, and Cascade
  2. · The Style Tag
  3. · Importing Style Sheets
  4. · CSS Inheritance

print this article
SEARCH DEVARTICLES

Learn CSS: Introduction to Inheritance, Specificity, and Cascade - CSS Inheritance
(Page 4 of 4 )

Maybe you noticed that in some previous articles we set some styles (like the font-family and the font-size properties) with the body element selector to set the the font-size and the font-family to all elements in the Web page. For example, if you set the font-size to .9em and the font-family to Arial, the descendant elements of the <body> element will have these values too (like the <p> and <div> elements). That's why you will find the <p> and <div> elements have the same font-family and font-size. This is what inheritance is all about. CSS inheritance means simply passing the values of some properties to the descendant elements of the element.

Not all properties are inheritable. Most of the font properties and the text properties are inheritable because this makes sense. For example, if you have a <div> element with a nested <p> element (child element), then if you set a Arial font-family to the div element, the <p> element will have the same font. Without inheritance the <p> element would have the default font-family for the browser. If you wanted the <p> element to have the same font as the <div> element you would write a separate rule. That's why inheritance makes our life a lot easier, because the descendants of a given element will inherit most of the properties from that element.

There are some other properties that are not inherited like the margin, padding and border properties, which we will discuss after a while in this series. Let's think about it for a minute, suppose that for some reason we need a two pixel solid blue border on the <div> element (which contains three <p> elements). Don't you think that it will be tedious that the three <p> elements inherit that border too? Yes, it will be tedious, especially because you will have to write more code in order to remove the borders from the descendant elements.

The element passes the inheritable properties to its descendants, not its ancestor, so if you defined a border on the <p> element it will not pass it to the parent <div> element. Let's take a look at an example of inheritance. The following is the HTML code and the associated CSS code for the example.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>CSS Structure</title>
    <link rel="stylesheet" href="Primary.css" type="text/css">
  </head>
  <body>
    <p> Information Technology (IT) has been the most famous and attractive field in the last 20 years and many students choose to study Computer Science and Information System which qualify them to work as Programmers, Developers, Database Administrators and Network Engineers.</p>
    <div> The <a href="http://www.w3.org">W3C website </a>
contains specifications for web standards and it's very useful for web designers, developers and software architectures to navigate this website. For example, you have the CSS 2.1 Specifications and the XHTML 1.0 Specifications discussing everything from A to Z about the technology<br>
    <p>You can use CSS with markup languages like HTML, XHTML and XML. All those markup languages and also CSS has Specifications as the <a href="http://www.w3.org">W3C website</a></p>
    </div> 
  </body>
</html>

 

Here is the CSS code:

div
{
  font-family: Arial;
  color: blue;
  font-size: .9em;
  border: 1px solid black;
}
p
{
  font-family: Arial;
  color: blue;
  font-size: .9em;
  border: 1px solid black;
}
a
{
  font-family: Arial;
  color: blue;
  font-size: .9em;
  border: 1px solid black;
}
 

In the HTML code we have a <p> element followed by a <div> element with a nested <p> element and twp hyperlinks (the first one in the text of the div itself and the other in the <p> element's text). Actually I assumed that there's nothing called inheritance in CSS to show you how much code is needed to create the above styles. Now that we can use inheritance, I will modify the above CSS rules.

div
{
  font-family: Arial;
  color: blue;
  font-size: .9em; 
  border: 1px solid black;
}
p
{
  border: inherit;
}
a
{
  border: inherit;
}


Replace the CSS code, then reload the Web page.

In the above CSS code we have removed the properties font-family, font-size, and color from the <p> and <a> elements, and we have relied on CSS inheritance because the values of these properties will be passed from the <div> element to the <p> and the <a> elements. So there is no need to write them again in the descendant elements (if you need another value for these properties, you must write it in explicitly).

The keyword inherit is used in the above CSS code. We use this keyword to inherit the property's value of the parent element. In other words, we use this keyword to enforce inheritance of the properties that are not inheritable like the border, padding and margin properties. In our example, we have used it to inherit the border style from the parent element.

Note that the first <p>element in the Web page has inherited the default font-size, font-family and color, because the parent of this <p> element is the <body> element (not the <div> element that we styled in the above CSS code), which has used the default browser styles because we didn't define any styles for it. We stated the <p> elements in the document will inherit the border style of the parent, so in the case of the first <p> element there's no border, because the parent has no border. I will modify the CSS code one more time, to remove the <p> and <a> element selectors from the CSS code.

div
{
  font-family: Arial;
  color: blue;
  font-size: .9em; 
  border: 1px solid black;
}

Reload the Web page again.

Now the first <p> element has the default styles, and the div element is styled as we stated in the CSS code. Note, however, that the nested <p> and <a> elements have inherited only the font-size, font-family and color properties (not the border style). I think that we have covered what we need to know in this article. When we delve more into specificity and cascade in the next part, you will get the big picture.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials