Home arrow Style Sheets arrow Page 2 - 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 - The Style Tag
(Page 2 of 4 )

Inline styling (through the Style attribute) is limited because you can't use selectors, you simply apply certain declarations on the current element (the element that declared the Style attribute). The Style tag, on the other hand, is unlimited because you can define almost anything you define in the .css external file. You place the Style tag (which we used to call the embedded style sheet) in the <head> section after the <title> element, as in the following HTML code:

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

Older browsers don't support CSS, so when you browse a Web page that has an embedded style sheet (using the Style tag) it will cause problems. The solution to this problem is to surround the CSS rules inside the opening <style> and the closing</style> with an HTML comment. This makes sense because a comment text will be escaped. This rule applies to both older and modern browsers with only one trick. The CSS engine in the modern browsers understands that CSS rules may be surrounded by an HTML comment inside the Style tag, so it will apply the styles to the document. So if we surrounded the above CSS rules with an HTML comment it will look like the following code:

<style type='text/css'>
<!--
body
{
  font-family: Arial;
  font-size: 1.1em;
}
div
{
  color: white;
  background-color: black;
  height: 30px;
}
-->
</style>


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