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

Poor Best

Rating:

/ 16

July 18, 2005

TABLE OF CONTENTS:

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: