Applying Styles


Before moving on, we'll quickly cover how to apply style properties to your documents. Remember, you have three methods to add style sheets: embedded, linked, and inline. We'll discuss each one in turn.

Tip

In designing your Web site, use linked style sheets to describe your most frequently used styles (the ones that will be formatted in the same fashion for all of the pages in your Web site), such as the heading tags and link tags. Use embedded style sheets to describe the formatting of tags that will remain the same within a single document, or set of documents, such as special table settings or page margins. Use the inline style sheets to describe the formatting of tags that vary from the site-wide formatting applied with the other style sheets, such as for a special callout or sidebar.


Embedded Styles

All the styles are defined at the top of the HTML document within the <head> tags because they contain information about the entire document. The styles defined here apply only to the one document in which they appear. If you plan to use these same styles in another document, you need to add them there as well.

<head> <style type="text/css"> table.nav {background:aqua} table.rest {background:yellow;              text-align:center;              color:black} a:link {color:red;          text-decoration:none} </style> </head>


Note

The <style> tag almost always includes the type="text/css" attribute, so you should get used to adding it.


Linked Styles

Linked style sheets hold all the style properties in a separate file. You then link the file into each HTML document where you want those style properties to appear.

<head> <link rel="stylesheet" href="mystyles.css" type="text/css"> </head>


With this method, I've created a separate file called mystyles.css (for cascading style sheet) that contains all my style properties. You can see that the same type="text/css" attribute shows up here. Following are the entire contents of the mystyles.css file. These are the same styles that showed up in the preceding embedded styles example, but now they appear in a separate text file.

table.nav {background:aqua} table.rest {background:yellow;              text-align:center;              color:black} a:link {color:red;          text-decoration:none}


Tip

Well-designed Web sites (with more than one page) contain repeated page elements and styles. The linked style sheet is most appropriate for this type of Web authoring. You'll learn more about designing effective Web sites in Lesson 13, "Designing with HTML."


Inline Styles

With inline styles, the style properties are added to the HTML tag as the tag is entered. This means that if I want the same style to appear on all the <h1> tags in my document, I would have to type those styles in all the <h1> tags. Look at the following example. I am still using the same style properties, as in the previous examples, but now you can see how the two tables would be created using inline styles.

<table style="background:aqua" width="100%"> <table style="background:yellow; text-align:center;                color:black" width="100%">


Using inline styles, the <style> tag becomes the style attribute. Multiple style properties are still separated by semicolons, but the entire group of properties for each tag is grouped within each HTML tag. This type of style sheet is fine for documents in which you need to apply styles to only one or two elements, but you wouldn't want to do all that work when you have a lot of styles to add.

Cascading Precedence

You've got one more thing to learn before moving on. These three styles are not treated equally by the browsers, nor are they supposed to be.

Web browsers give precedence to the style that appears closest to the tag. So, inline styles (which appear as attributes within the tag itself) are most important. Embedded styles (which appear at the top of the HTML file) are applied next, and linked styles (which appear in another file altogether) are applied last.

Imagine that you have created an embedded style for the <h1> tag, but want to change that style for one occurrence of the <h1> tag in that document. You would create an inline style for that new <h1> tag. The browsers recognize that fact and change the style for that tag to reflect the inline style.

Caution

Style sheet precedence is supposed to place more importance on embedded styles than on linked style sheets. In actual practice, however, you'll find that both Internet Explorer and Netscape treat linked sheets as more important than embedded sheets (but they do treat inline styles as more important than either of the other two). You'll find that you have better luck if you use either linked or embedded styles, but not both.




Sams Teach Yourself HTML in 10 Minutes
Sams Teach Yourself HTML in 10 Minutes (4th Edition)
ISBN: 067232878X
EAN: 2147483647
Year: 2004
Pages: 151
Authors: Deidre Hayes

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net