WebReference.com - Part 2 of chapter 1 of Cascading Style Sheets: Separating Content from Presentation, from glasshaus (4/7) | WebReference

WebReference.com - Part 2 of chapter 1 of Cascading Style Sheets: Separating Content from Presentation, from glasshaus (4/7)

To page 1To page 2To page 3current pageTo page 5To page 6To page 7
[previous] [next]

Cascading Style Sheets

Now, let's take a closer look at the markup and style rules. We'll be going into much greater detail in future chapters, so don't worry if not everything makes sense. It is enough now to get a general sense of how stylesheets interact with XHTML markup.

The first thing to notice is the <style> element itself:

<style type="text/css">
...
</style>

The <style> element appears in the <head> element of an XHTML document. Its type attribute declares that the style language is CSS, and overrides the default stylesheet language used by the browser when rendering stylesheets. Actually, there are no other style languages in use by browsers today, except for Netscape Navigator 4.x's proprietary "JavaScript Stylesheets", which use the type attribute value "text/javascript". However, as with many things in CSS, the type attribute looks forward to a time when browsers provide support for multiple style languages.

Contained within the <style> element are the style rules that define certain presentational aspects of the page. Each rule contains two main parts: a selector followed by a list of declarations. The selector defines which XHTML page element(s) the rule applies to, and the declarations define the presentational aspects that are to be applied to those elements.

The first rule in our sample page (seen below) selects the <body> element and declares that text within it should be presented with the Verdana typeface. If that font is not installed in the system, then Arial should be used; if this typeface is not available either, a sans-serif typeface is to be used.

body {
  font-family: Verdana, Arial, sans-serif;
  }

The next rule in our stylesheet declares that all <a> elements are to be displayed with bold, red text with no text decoration (underlines, overlines, etc.).

a {
  color: red;
  font-weight: bold;
  text-decoration: none;
  }

The final three rules in our stylesheet are quite different from the first two:

#Header {
  position: absolute;
  left: 25px;
  top: 10px;
  }
#MainText {
  position: absolute;
  left: 225px;
  top: 100px;
  margin-right: 25px;
  }
#SiteNav {  
  position: absolute;
  left: 25px;
  top: 100px;
  width: 175px;
  }

Each of these three rules do not apply to all elements of any one type, such as all links in the preceding example, but instead apply to elements with a specific id attribute value. The # character is used to indicate this type of rule, followed by the id attribute value itself. So, the following rule:

#Header {
  position: absolute;
  left: 25px;
  top: 10px;
  }

applies to the following element:

<div id="Header">
  <h1>Ye Olde Cheese Shop</h1>
</div>

and instructs the browser on the exact location that the <div> element should appear on screen.

The example above is of course quite simple, and does not even really scratch the surface of what CSS is capable of. In subsequent chapters we'll explore how CSS gives you powerful typographic control over your pages, allowing you to specify not only the font, but the relative size, the line height, and numerous other presentational aspects of your text. You'll also learn how to select broad areas or certain specific elements of your document with a given rule, along with how to use CSS to define complex page layouts.


To page 1To page 2To page 3current pageTo page 5To page 6To page 7
[previous] [next]

Created: June 20, 2002
Revised: June 20, 2002

URL: http://webreference.com/authoring/style/sheets/cssseparate/chap1/2/4.html