Приглашаем посетить

The Three Ways to Style Your Document

There are three ways to add CSS to your Web pages, inline, embedded, and linked from a separate CSS style sheet. The only one that really makes any sense in terms of developing Web sites is to link your XHTML pages to a CSS style sheet, but we will examine the other two as well, as they can be useful while developing your pages.

A style sheet is an entirely separate file from your XHTML file, and contains only CSS. A style sheet can be shared by an infinite number of XHTML pages, which helps ensure a consistent look from page to page and allows edits made to a style to be instantly reflected across an entire site.

Inline Styles

Inline styles (also known as local styles) are added to a tag using the XHTML style attribute, like this

[View full width]
<p>This paragraph simply takes on the browser's default paragraph style.</p>
<p style="font-size: 25pt; font-weight:bold; font-style:italic; color:red;">By adding
 inline CSS styling to this paragraph, we can override the default styles.</p>
<p>And now we are back to a regular default paragraph without any inline styles.</p>

which looks like this

Figure 2.1. Inline styles are only applied to the tag to which they are attached.

The Three Ways to Style Your Document

Here are some things you need to know about inline styles:

Their scope is very restricted. An inline style only affects the tag to which it is attached.
The practice of using inline styles is simply another way of putting presentational markup directly on the tags, as we did in days of yore. Adding inline styles everywhere is as bad for the portability and editability of your markup as adding (X)HTML attributes such as FONT. Inline styles should be generally avoided.
On those rare occasions when you need to override a style in just one specific instance and there is no better way to do it, you can create an inline style and not feel too guilty about it. That said, you can almost always avoid using inline styles by adding a unique ID or class to the tag in question, and then writing a corresponding style in your style sheet.
Using an inline style is a good way to try out a style before you move it into the style sheet (see "Linked Styles" on the next page). Just remember to clear out the style attribute entirely once you achieve the effect you want and cut and paste just the style itself into the style sheet. Otherwise that inline style will always trump whatever change you try to make to that particular tag from the style sheet, and you can spend hours trying to fix the style sheet when the problem is hidden in the markup.
Inline styles win out over styles you define with embedded styles (described next), which win out over global styles you define in style sheets. (See "The Cascade" later in this chapter for details on how style conflicts are resolved).

Embedded Styles

You can place a group of CSS styles in the head of your XHTML documentthese are known as embedded styles (or page styles). The terms "embedded styles" and "page styles" are often confused as the former is the official name and the latter is the more commonly used namebut they are synonymous. Embedded styles work like this

<head>
<title>Inline Styles example</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
/* <![CDATA[ */
h1 { font-size: 16pt; font-weight:bold;}
p {color:blue;}
/* ]]> */
</style>
</head>
a comment */

The commented CDATA tags (/* <![CDATA[ */ and /* ]]> */) are wrapped around the styles. This prevents them from being interpreted as XML which could cause parsing confusion over characters that XML expects to find coded as entities. (Remember, XHTML is XML-based.) For the embedded styles examples in this book, I have not added CDATA tags, and I have never encountered problems that can be attributed to leaving them off. However, you can decide if you want to add them after reading the W3 Schools' explanation of XML CDATA (www.w3schools.com/xml/xml_cdata.asp).

The style tag tells the browser it is about to encounter code other than (X)HTML; the tag's attribute states that the code is CSS. (If you want to include JavaScript in the head of your document instead of CSS, use a style tag with the "text/javascript" attribute).

Here are some comments on embedded (or page) styles:

The scope of embedded styles is limited to the page that contains the styles.
If you are only publishing a single page with these particular styles, you can embed the styles in the head of the document, although you are not truly separating the styles from the content; they are still in the same document. You will become familiar with embedded styles as you follow along with the hands-on single-page examples in this chapter.
If you are working up multiple styles for a complex layout such as a form, sometimes it's easier to write the styles as embedded styles in the head of the document, so you don't have to constantly switch between the markup and the style sheet. Then, once everything is working, you can move the styles into the main style sheet and replace the styles in the header with a link to the style sheet.
Page styles win out over style sheets, but they lose out to attributes you define in inline styles. (See "The Cascade" later in this chapter for details on how such style conflicts are resolved).

Linked Styles

You can place styles in a separate document (a style sheet) that links to multiple pages so that the styles have global (site-wide) scopethe styles defined in this style sheet can affect every page of your site, not just a single page or a single tag. This is the only method of the three that truly separates the presentational styles from the structural markup. If you centralize all your CSS styles in a style sheet in this way, Web site design and editing becomes much easier.

For example, if you need to make changes that affect the whole site ("The client wants all the body text to be blue, not black."), doing so is as quick and painless as modifying one CSS style. This is certainly much easier than the pre-CSS task of modifying every font attribute of every paragraph tag in every page of the site.

You can link your style sheet to as many XHTML pages as you wish with a single line of code in the head of each XHTML page:

<link href="my_style_sheet.css" media="screen" rel="stylesheet" type="text/css" />

Then the styles are applied to each page's markup as the page loads.

Note that, in the above link tag, the media attribute is defined as "screen", meaning the style sheet is designed for the screen, which currently means Web browsers. (Certain user agents look for particular media attributes that best suit their display capabilities; possibilities here include: all, projection, handheld, print, aural. See a full list on the W3 Schools site (www.w3schools.com/css/css_mediatypes.asp).

Any browser that loads the page uses the style sheet the link tag indicates. But by adding a second link tag with the media attribute of "print", you can offer a second style sheet that the browser will use when printing. A style sheet for printing might hide navigation and other elements that don't make sense when the content goes to paper.

If you create a second style sheet for printing, its link tag might look like this

<link href="my_style_sheet_print.css" media="print" rel="stylesheet" type="text/css" />

So now that you know what style sheets are, let's look at how you write style sheet rules, and how concepts like Inheritance, Specificity, and The Cascade control how these rules affect your markup.

What Are Cascading Style Sheets?

Let's split the question in two: What are style sheets? and How do they cascade? I'll answer the first question right off and, although I've hinted at the answer above, I'll talk about the cascade later in the chapter.

A style sheet is simply a text file with the file name extension .css.

A style sheet is list of CSS rules. Each rule defines a particular style that is applied to your XHTML markup; a rule can define the font-size of the text of paragraphs, the thickness of a border around an image, the position of a headline, the color of a background, and so on. Many of the sophisticated typography and layout features of print-design programs such as Adobe InDesign can now be emulated in Web pages with CSS; Web designers finally have comprehensive control of the layout of their pages, without having to resort to workarounds like tables and spacer GIFs.

Table of Contents