Recipe 1.7. Associating Styles to a Web Page

Problem

You want to know about the different ways of adding styles to a web page.

Solution

You can apply styles in three ways: external, internal, and inline. An internal style sheet appears near the top of the HTML document within the head.

<style> <!-- #header {  width: 100%;  height: 100px;  font-size: 150% } #content {  font-family: verdana, arial, sans-serif;  margin-left: 20px;  margin-right: 20px  } .title {  font-size: 120%  } --> </style>

Note the use of HTML comments immediately after the style element. Comments are placed there to hide the CSS content and keep it from showing up in the web page layout or from being rendered by the browser in some unwanted fashion.

External style sheets are stored in a separate file, which become associated with the HTML file through linking. The following code is saved in its own file:

/* CSS Document */ h1 {  font-size: 150%; } h2 {  font-size: 120%; } p {  font-family: Verdana, Arial, Helvetica, sans-serif; }

Notice that the style element is not present in the external style sheet. Also, HTML comments are not used in external style sheets.

In the web page, add the following line between the head tags to link to the external style sheet that contains the above styles:

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

Inline styles work similarly to font in that they appear with the markup they affect.

<h1 style="font-family: verdana, arial, sans-serif;  font-size: 150%; color: blue;">Page Title</h1>   <p style="font-family: sans-serif; font-size: 90%;">Hello, world!</p>

Discussion

The three different types of style sheets are:

External: All web pages link to the external style sheet that contains nothing but CSS styles. If you want to change the font color on all pages linked to this style sheet, just update the external style sheet. Link to the style sheet with the link tag.
Internal: A unique web page may have its own style sheet so styles only affect the page and not all web pages. Define internal styles within the style tags.
Inline: Inline styles work similarly to font with the style information applied to a specific tag within a web page. Designers rarely apply inline styles.

External and inline style sheets save time spent over inline styles on maintaining web sites.

For example, you inherit a web page where all the text is blue and use font to control the size. You receive orders to make change the text to black, so you search for every instance of <p> to change it from blue to black like the following:

<p><font size="2" color="blue">Text goes here</font></p>

To change all p from blue to black in an external style sheet takes two steps. Open the CSS file and change the color.

p {  color: blue; }

In an internal style sheet, changing the text from blue to black takes one step. Search for the style at the top of the page and replace blue with black.

<style> <!-- p {  color: blue } --> </style>

When to use inline styles

However, with inline styles, changing the color takes as much time as fixing the original file with font tag:

<p style="font-color: blue">Test goes here.</p>

Why would anyone want to use inline styles considering it's time-consuming to make changes? It's rare, but you may have content that appears once in the whole web site that is in need of a special style. Rather than cluttering the external style sheet with the style for one item, you use inline styles instead.

When to use internal style sheets

As for internal and external style sheets, most sites use external style sheets. However, when starting to write CSS code for a web page design, it's best to start out with an inline style sheet. When you reach the point where the design is complete or starts to get a little unwieldy, move the style sheet to a separate file. Then make edits to the external style sheet as needed.

Also, you may have a special page that's not related to the web site or uses a special style. In this case, an internal style sheet could be easier to use as opposed to adding more clutter to the external style sheet.