Style Sheet Basics | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

A style sheet associates look or formatting to a particular piece of content in a document. In the case of CSS, style sheets rely on an underlying markup structure, such as XHTML. They are not a replacement for markup. Without a binding to an element, a style really doesn't mean anything. The purpose of a style sheet is to create a presentation for a particular element or set of elements. Binding an element to a style specification is very simple; it consists of a selector ”in this case, simply the element name ”followed by its associated style information (called rules ) within curly braces. The rules are composed of property names and property values separated by colons with each rule in turn being separated by a semicolon. The basic syntax is as follows :

 selector {property1 : value1;  propertyN : valueN;}

Given this syntax, suppose that you want to bind a style rule to all h1 elements so that they appear as 28-point text. The following rule would result in the desired display:

 h1  {font-size:  28pt;}

Additional rules such as setting the color of the h1 elements to red or the font face to Impact also could be added simply by separating each style property with a semicolon:

 h1  {font-size: 28pt; color: red; font-family: Impact;}

Note	The final rule in a list of style properties does not require the semicolon. However, for good measure and easy insertion of future style rules, page authors should always use semicolons between every style property.

In general, you will find that CSS property names are separated by dashes when they are multiple words ”for example, font-face, font-size, line-height, and so on.

As rules are added, you may take advantage of the fact that CSS is not terribly whitespace sensitive, so

 h1 {font-size: 28pt;color: red;font-family:Impact;}

should render the same as

 h1  {font-size: 28pt; color: red; font-family: Impact;}

This may allow you to improve your rules for readability or crunch them for delivery. You may also add comments using /* */ like so:

 /* first CSS rule below */ h1 {font-size: 28pt; color: red; font-family: Impact;}

Lastly, under most browsers property names and selectors are not case sensitive, so

 h1  {font-size: 28pt; color: red; font-family: Impact;}

could also be used although it isn't encouraged. However, be careful with changing the selector case. While H1 might work just as well as h1 in most browsers, you are binding to a tag in a markup language where case may actually matter.

To make the style rule useful, it must be bound to an actual document. There are numerous ways to add style to a document, either using an external style sheet referenced by a <link> tag, a document-wide style sheet specified by the <style> tag, or using inline styles with the style attribute common to most HTML elements. All these methods will be discussed in the next section. For the purpose of this demo, we'll use a document-wide style, as defined with the <style> tag found in the <head> element of an HTML/XHTML document:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  First CSS Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  h1   {font-size: 28pt; font-family: Impact; color: red;}  </style>   </head>   <body>   <h1>  New and Improved Markup with CSS Style  !</h1>   </body>   </html>

CSS provides a powerful set of properties for manipulating the look of HTML elements. Notice even with this simple example the rendering difference between a style sheet “capable and non-style-sheet-supporting browser, as shown in Figure 10-1.

Figure 10-1: CSS versus no CSS rendering

< Day Day Up >