Home arrow Style Sheets arrow Learn CSS: Introduction to Inheritance, Specificity, and Cascade

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
  1. · Learn CSS: Introduction to Inheritance, Specificity, and Cascade
  2. · The Style Tag
  3. · Importing Style Sheets
  4. · CSS Inheritance

print this article

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

Before we discuss the meaning of the CSS cascade and the related concepts, you need to know that there are places to write styles other than the .css file (this is essential for the following sections). You also need to understand that there is more than one type of CSS file that affects how Web pages will look. Let's take a look.

Inline Styles

Up to this point we have been applying CSS styles by using an external file (with the extension .css) and linking it to the HTML document with the help of the <link> element. In fact there are other places where you can write your CSS styles. As we will see (in the Cascade sections), writing styles in these places without knowledge of the cascade concept will produce unexpected results. That's why I begin this article with a discussion of these places.

The first place to write styles is the HTML element itself using the Style attribute. You write your CSS declarations surrounded by double quotations, as in the following HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>CSS Structure</title>
  <body style="font-family: Arial; font-size: 1.1em;">
    <div style="color: white; background-color: black; height: 30px;">
      This is a div element with an inline style


In the HTML code I have stated that the font-family of the document is Arial, the font-size is 1.1em, and the style for the <div> element is a white text and a black background with an area of 30px height. When you have an element that needs a specific style that will not be applied to any other element, you may consider using the element's style attribute to define this style.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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