Adding Style to a Document | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Style information can be included in an HTML document in any one of three basic ways:

Use an outside style sheet, either by importing it or by linking to it.
Embed a document-wide style in the head element of the document.
Provide an inline style using the style attribute exactly where the style needs to be applied.

Each of these style sheet approaches has its own pros and cons, as listed in Table 10-1.

Table 10-1: Comparison of Style Sheet Approaches
	External Style Sheets	Document-Wide Style	Inline Style
Syntax	<link rel= stylesheet href= main.css />	<style type= text/css > body { color : red;} </style>	<p style= color:red; >Test </p>
Pros	-Can set style for many documents with one style sheet. --Style information cached by the browser.	--Can easily control style document by document. --No additional page requests for style information.	--Can easily control style to a single character instance. --Overrides any external or document styles.
Cons	--Require extra download time for the style sheet, which might delay page rendering or, in the case of import, cause a rendering flash.	--Need to reapply style information for other documents.	--Need to reapply style information throughout the document and outside documents. --Bound too closely to markup ”difficult to update.

Linking to a Style Sheet

An external style sheet is simply a plain text file containing the style specifications for HTML tags or classes. The common extension indicating that the document provides style sheet information is .css, for Cascading Style Sheets.

Note	The file extension .jss was used to indicate Netscape's JavaScript Style Sheets (JSSS), which provided the base functions of CSS but in an unusual Netscape 4. x-specific fashion. Page designers should always avoid the .jss style approach as it is no longer supported.

The following CSS rules can be found in a file called sitestyle.css, which defines a style sheet used site wide:

 body       {font-size: 10pt;             font-family: Serif;             color: black;             background-color: white;}     h1         {font-size: 24pt;             font-family: Sans-Serif;             color: black;             text-align: center;}     p          {text-indent: 0.5in;             margin-left: 50px;             margin-right: 50px;}     a:link     {color: blue; text-decoration: none;}    a:visited  {color: red; text-decoration: none;} a:active   {color: red; text-decoration: none;} a:hover    {color: red; text-decoration: underline;}

Note	The pseudoclasses, a:link, a:visited, a:active, and a:hover are selectors that are associated with the various states of a link. These selectors are discussed later in this chapter.

An XHTML or HTML file that uses this style sheet could reference it by using a <link> tag within the head element of the document. Recall from Chapter 4 that the link element isn't exclusive to style sheets and has a variety of possible relationship settings that can be set with the rel attribute. The following is an example of how style sheet linking is used:

  <!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>  Style Sheet Linking Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <link rel="stylesheet" href="sitestyle.css" type="text/css" />   </head>   <body>   <h1>  HTML with Style  </h1>   <p>  Cascading Style Sheets 1 as defined by the  <a href="http://www.w3.org">  W3C  </a>  provides powerful page layout facilities.  </p>   </body>   </html>

In this example, the relationship for the link element as indicated by the rel attribute is set to stylesheet; then, the href attribute is used to indicate the URL of the style sheet to use. In this case, the style sheet resides in the same directory as the referencing file and is known as sitestyle.css . However, it would be wise to collect all style sheets in a special styles directory usually named "styles" or "css." Given that we are setting a URL here, it is of course possible to reference a remote style sheet using a full URL such as http://www.htmlref.com/styles/remotestyle.css. Note that linking to an external style sheet has the same problems as linking to an external object insofar as the object may no longer be available or the speed of acquiring that object could inhibit performance of the page.

The last thing to note in the linked style sheet example is the use of the type attribute in the link element, which is set to the MIME type "text/css" . This value indicates that the linked style sheet is a cascading style sheet (CSS). However, CSS is not the only format we could use. If you want to avoid having to use the type attribute, you may want to set a default style sheet language in the head element of the document by using the <meta> tag shown here:

  <meta http-equiv="Content-Style-Type" content="text/css" />

As it stands, by default, most browsers assume that CSS is being used; the type setting may have little effect, regardless of how it is applied.

Embedding and Importing Style Sheets

The second way to include a style sheet is to embed it. When you embed a style sheet, you write the style rules directly within the HTML/XHTML document. You could separate the style rules into another file and then import these rules, or you could type them directly into the document. Either possibility involves using a <style> tag within the head of the document. The basic syntax of the <style> tag is as follows :

  <style type="text/css" media="all  print  screen" >   style rules here   </style>

Here, the type attribute again is used to indicate the MIME type of the enclosed style sheet. Because this is almost always CSS, it is often omitted as browsers infer this. The media attribute indicates the media for which the style sheet applies. By default, the style sheet is applied to all media so most developers omit this attribute as well. However, it is possible to define style sheets that are applied only to a particular output medium. The most common values are print and screen , which indicate rules applied only to the page when it is printed or correspondingly shown onscreen. Other values are possible for the media attribute but are as of yet not supported. Within the style block, style sheet rules are included. It is important to note that effectively once within the <style> tag the rules of HTML/XHTML do not necessarily apply. The <style> tag defines an island of CSS within an ocean of markup. The two technologies are intertwined but have their own distinct characteristics.

One concern when including style sheets within an HTML/XHTML document is that not all browsers, particularly older ones, understand style sheets. Given the possibility that a browser will render the content of an unknown tag as text on the screen, you might want to mask the CSS from noncompliant browsers. To avoid such a problem, comment out the style information by using an HTML comment, such as  . A complete example of a document-wide style sheet, including hiding rules from older browsers, is shown here:

  <!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>  Document Wide Style Sheet Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!-- /* Simple Document Wide CSS rules */     body       {font-size: 10pt;             font-family: Serif;             color: black;             background-color: white;}     h1         {font-size: 24pt;             font-family: Sans-Serif;             color: black;             text-align: center;} p          {text-indent: 0.5in;             margin-left: 50px;             margin-right: 50px;} a:link     {color: blue; text-decoration: none;}    a:visited  {color: red; text-decoration: none;} a:active   {color: red; text-decoration: none;} a:hover    {color: red; text-decoration: underline;} -->  </style>   </head>   <body>   <h1>  HTML with Style  </h1>   <p>  Cascading Style Sheets 1 as defined by the  <a href="http://www.w3.org">  W3C  </a>  provides powerful page layout facilities.  </p>   </body>   </html>

Note	The preceding example shows the use of CSS comments as designated by /* and */, which can be used to leave comments about complex or confusing CSS usage.

You can have multiple occurrences of the style element within the head of the document, and you can even import some styles, link to some style rules, and specify some styles directly. Dividing style information into multiple sections and forms might be very useful, but a way must exist to determine which style rules apply. This is the idea of the cascade, which is discussed in more detail later in the chapter.

Another way to use document-wide style rules rather than type the properties directly within a <style> tag is to import them. The idea is somewhat similar to linking. An external style sheet is still referenced, but in this case, the reference is similar to a macro or inline expansion. The syntax for the rule for importing a style sheet is @import , followed by the keyword url and the actual URL of the style sheet to include. This rule must be included within a <style> tag; it has no meaning outside that element, as compared to the linked style sheet. An example of how to import a style sheet is shown here:

  <!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>  Imported Style Sheet Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!-- @import url(corerules.css); @import url(linkrules.css);     /* a rule specific to this document */     h1         {font-size: 24pt;             font-family: Sans-Serif;             color: black;             text-align: center;} -->  </style>   </head>   <body>   <h1>  HTML with Style  </h1>   <p>  Cascading Style Sheets 1 as defined by the  <a href="http://www.w3.org">  W3C  </a>  provides powerful page layout facilities.  </p>   </body>   </html>

In the preceding example, we could include rules for body and p in the file corestyles.css, whereas the rules affecting the a element could be included via the document linkstyles.css. A special rule for the h1 element, used in this document alone, is placed within the style block to give the reader some sense of how the @import feature is used to organize the various parts of a complete style rule. (All @import directives should always come before all other style rules.) Although imported style sheets might seem to provide a great advantage for organizing style information, their use currently is limited by the fact that some older CSS-aware browsers such as Netscape 4. x do not support this style sheet inclusion form properly. Furthermore, using @import can cause an annoying flashing effect on browsers as they load and apply the style. Page designers should stick to the external style sheet reference by a <link> tag.

Note

Because Netscape 4.x generation browsers ignore @import directives, they are often used to hide complex CSS rules from the browser. In some sense, this is a simplistic form of browser detection. The developer puts modern CSS rules in an @import CSS file and leaves the older rules in the main <style> block. However, this is a misuse of the directive and scripting really would be appropriate for such logic.

Using Inline Style

In addition to using a style sheet for the whole document, you can add style information directly in a single element. Suppose you want to set one particular <h1> tag to render in 48-point, green, Arial font. You could quickly apply the style to only the tag in question using its style attribute. Recall that style is one of the core HTML attributes besides class , id , and title that can be used within nearly any HTML element. For example, the following example shows how style rules could be applied to a particular <h1> tag:

  <h1 style="font-size: 48pt; font-family: Arial; color: green;">  CSS1 Inline  </h1>

This sort of style information doesn't need to be hidden from a browser that isn't style sheet-aware because browsers ignore any attributes that they don't understand.

Although inline style seems an easy route to using CSS, it does have some significant problems. The main problem is that inline rules are bound very closely to a tag. If you want to affect more than one <h1> , as shown in the previous example, you would have to copy- paste the style attribute into every other <h1> tag. The separation of markup from CSS presentation is just not where it should be. However, for quick and dirty application of CSS rules this might be appropriate, particularly for testing things out.

< Day Day Up >