Integrating Style | ASP.NET 2.0 Illustrated

Style can be delivered to a document by a variety of methods. The method with which style is connected with a document is referred to as integration. There are a variety of ways to integrate style, and how you decide to integrate style will depend largely upon what you are trying to accomplish with a specific document or number of documents.

Essentially, there are three main types of style sheets:

Author These are style sheets you create for your users. There are several ways of doing this, and you may find yourself using more than one method at a time.

User These are style sheets a user can create to view sites and even to override any author styles. These are rarely used, but they are interesting and have at least one important application, which I’ll discuss in a bit.

User Agent This can be considered as the default browser style; it is the agent’s own set of rendering behaviors. While this book isn’t concerned with the User Agent styles, it’s important to be aware of them.

In the following sections, you’ll explore the primary methods of authoring style sheets for users, with a short discussion on user-defined styles.

Inline Style Sheets

The inline integration method allows you to take any tag and add a style to it. Using inline style gives you maximum control over a precise element of a web document, even just one character. Say you want to control the look and feel of a specific paragraph. You could simply add a style="x" attribute to the paragraph tag, and the browser would display that paragraph using the style values you added to the code.

Listing 2.1 shows an XHTML document with a simple inline style rule (in bold) that defines the header font as Arial. You’ll read more about style rules in the “Exploring CSS Grammar” section later this chapter.

Listing 2.1: WWW. Inline Style

<!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"> <head> <title>Inline Style Sample</title> </head> <body> <h1 style="font-family: Arial">Welcome!</h1> </body> </html>

Figure 2.1 shows the results.

click to expand
Figure 2.1: Using inline style

Inline style is useful for getting precise control over something in a single document, but because it only applies to the element in question, you most likely won’t be using inline style as frequently as other integration methods.

Embedded Style Sheets

Embedding allows for control of a full document. Using the style element, which you place within the head section of a document, you can insert detailed style attributes to be applied to the entire page.

Embedding is an extremely useful way of styling individual pages that may also have other style methods influencing them. You can also style a single page or use multiple embedded sheets. The latter is especially useful if you’d like your document to have different styles for different media types.

In Listing 2.2, you’ll see the same simple style rule I used in Listing 2.1, but this time within an embedded style sheet using the style element. I’ve also added the type attribute to define the MIME type of the sheet, and the media attribute to define this particular sheet to be used for presenting the document onscreen.

Listing 2.2: WWW. Embedded Style Sheet

<!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"> <head> <title>Embedded Style Sample</title> <style type="text/css" media="screen"> h1  {      font: Arial; } </style> </head> <body> <h1>Welcome!</h1> </body> </html>

As you can see, the style rule looks essentially the same as it did in the inline example, but it’s now applied via the style element as opposed to the style attribute. Unlike the inline example, which applied only to that specific h1, this rule will apply to all the h1 elements within the document, unless a class or inline style is applied.

Note

Notice the inclusion of the type attribute in the style element shown in Listing 2.2. The type attribute is required in HTML 4 and XHTML documents. The attribute value, text/css, defines the MIME type of the style document. Be sure to use this attribute every time you define an embedded style sheet.

If you’d like to have a different style for a different media type, you can add another style sheet. In Listing 2.3, I show two embedded style sheets, the second one styled for print rather than screen.

Listing 2.3: Embedding Multiple Style Sheets

<!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"> <head> <title>Embedded Style Sample</title> <style type="text/css" media="screen"> h1  {      font: Arial; } </style> <style type="text/css" media="print"> h1  {      font: Times; } </style> </head> <body> <h1>Welcome!</h1> </body> </html>

When the site visitor seeks to print preview (Figure 2.2) or print the document from a compliant browser, the print version will appear in the Times font rather than the Arial font.

click to expand
Figure 2.2: Previewing the print style

Linked Style

Also referred to as an “external” style sheet, a linked style sheet contains as many style rules as you like and helps to provide a most powerful means for you to create master styles that you can apply to one page or one billion pages.

An external style sheet is exactly that—all of the style is placed in an external file. You can link to the style sheet from any document you wish, using the link element in the head portion of those documents with which you’d like to integrate the style.

The external style document is a text document that you can write in any editor or tool that allows you to save a document as text. To create a linked style sheet, follow these steps:

Open your text or HTML editor of choice.
Enter the style rule or rules you’d like. For the h1 rule in Listings 2.1 and 2.2, you’d type in the following:
```
h1  {      font: Arial; } 
```
Select File Ø Save and save your file with the name of h1style and a .css extension (style.css).

You’ll notice that the CSS file contains no additional information and tags. This is because an external style sheet is simply a list of style rules. You may also use style sheet commenting (discussed later in the “Exploring CSS Grammar” section), but no declarations, elements, attributes, scripting, or other constructs should be in this document.

The next step is to link the document or documents you want to integrate with this style sheet:

In your document, place a link element within the head section. I’m using XHTML, so my link element, which is an empty element, uses the trailing slash, unlike HTML:
```
<link />
```
Add the rel attribute, which describes the integration relationship type, in this case, a style sheet:
```
<link rel="stylesheet" />
```
Add the type attribute and appropriate type, just as you would for an embedded sheet:
```
<link rel="stylesheet" type="text/css" />
```
Include the media for which the sheet is intended. This can be any of the media types described earlier: print, screen, Braille, aural, and so on. In this instance, I’ll use the screen value.
```
<link rel="stylesheet" type="text/css" media="screen" />
```
Reference the source file using the href attribute and the location of the source file. In this case, both documents are residing in the same directory, so I’ll reference it relatively:
```
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
```
Save your document as h1styletest.html.

Listing 2.4 shows the complete XHTML document with the link element included.

Listing 2.4: WWW. The XHTML Document and External Style Sheet Are Now Integrated

<!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"> <head> <title>Linked Style Sample</title> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <h1>Welcome!</h1> </body> </html>

Simply load your document into a style sheet compliant browser, and you’ll see that the h1 will render using the Arial font.

As with embedded sheets, you can link to as many style sheets as required to achieve your goals. If you wanted to have a different print sheet, you’d create the external style sheet containing whatever rules you wanted for print display, save it with an appropriate name and the .css extension, and integrate that sheet using the link element within the document.

Listing 2.5 shows the document, now integrated with two external style sheets.

Listing 2.5: WWW. Multiple Linked Style Sheets Described in an 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"> <head> <title>Linked Style Sample</title> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" /> </head> <body> <h1>Welcome!</h1> </body> </html>

Using multiple linked sheets is a common practice, especially now that designers are working with CSS for layout but still dealing with legacy browsers. A CSS author might put all of the style rules for fonts and colors into one sheet and all the rules related to layout into another. And, as you can see here, the use of multiple sheets to address multiple device presentation is a particularly exciting and incredibly powerful aspect of CSS.

Note

The order in which you list your linked style is important because it will influence the order and manner in which the sheets are read and interpreted. For more information on this issue, see “About the Cascade” later this chapter.

Imported Styles

Imported styles work similarly to the linked style except that it uses the @import rule, a specialty rule that allows you to import a style sheet rather than link to it directly. Imported styles have inconsistent support so using linked style is typically recommended.

However, it’s become a convention among designers and developers using CSS to exploit the lack of support for @import rules in certain browsers. This way, if a style isn’t supported by a browser that doesn’t support the @import rule, using @import means you can completely mask your imported styles from those browsers. This has become especially useful when using CSS for layout and attempting backward compatibility with certain problematic browsers. A more detailed example of this use is in Chapter 6, "Working with CSS Layouts."

Using the @import method involves creating an external sheet just as you would for linking purposes, and importing it into the document using the @import rule. Listing 2.6 shows how the external document created earlier, style.css, can be imported into an XHTML document.

Listing 2.6: WWW. Importing Style

<!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"> <head> <title>Linked Style Sample</title> <style type="text/css" media="screen">@import "style.css";</style> </head> <body> <h1>Welcome!</h1> </body> </html>

A compliant browser will now properly render the imported style, whereas a noncompliant browser will ignore the rule (Figure 2.3).

click to expand
Figure 2.3: The @import style is ignored in this noncompliant browser.

Note

While you can use other embedded and linked sheets along with imported sheets, always place your imported sheets first within the head portion of your document to avoid potential rendering conflicts.

User-Defined Style Sheets

While it’s something you are rarely likely to use, a user-defined style sheet is any style sheet that the user can use to override other CSS and HTML or XHTML styles included in a document.

Most site visitors don’t know how to do this, of course, so it’s not something that’s talked about a great deal. However, a user-defined style sheet can be helpful to anyone who requires special rendering of documents. If you have a certain type of color blindness or require your fonts to be quite large to read a document, the creation and implementation of such a sheet could be invaluable. For example, if you were colorblind you could create a sheet that would force all pages viewed to render with specific background and text colors that you can see. Similarly, you could use a user-defined sheet to ensure that all fonts appeared at a size that was readable to you.