4.3 Location of Styles
As mentioned earlier, CSS style rules can be located in three different locations. These three are not mutually exclusive, in that you could place your style rules in all three. In practice, however, web authors tend to place all of their style definitions in one (or more) external style sheet files.
4.3.1 Inline Styles
Inline styles are style rules placed within an HTML element via the style attribute, as shown in Listing 4.1. An inline style only affects the element it is defined within and overrides any other style definitions for properties used in the inline style (more about this below in Section 4.5.2). Notice that a selector is not necessary with inline styles and that semicolons are only required for separating multiple rules.
Listing 4.1 Inline styles example
<h1>Share Your Travels</h1>
<h2 style="font-size: 24pt">Description</h2>
...
<h2 style="font-size: 24pt; font-weight: bold;">Reviews</h2>
Using inline styles is generally discouraged since they increase bandwidth and decrease maintainability (because presentation and content are intermixed and because it can be difficult to make consistent inline style changes across multiple files). Inline styles can, however, be handy for quickly testing out a style change.
4.3.2 Embedded Style Sheet
Embedded style sheets (also called internal styles) are style rules placed within the <style> element (inside the <head> element of an HTML document), as shown in Listing 4.2. While better than inline styles, using embedded styles is also by and large discouraged. Since each HTML document has its own <style> element, it is more difficult to consistently style multiple documents when using embedded styles. Just as with inline styles, embedded styles can, however, be helpful when quickly testing out a style that is used in multiple places within a single HTML document. We sometimes use embedded styles in the book or in lab materials for that reason.
Listing 4.2 Embedded styles example
<head>
<meta charset="utf-8">
<title>Chapter 4</title>
<style>
h1 { font-size: 24pt; }
h2 {
font-size: 18pt;
font-weight: bold;
}
</style>
</head>
<body>
...
4.3.3 External Style Sheet
External style sheets are style rules placed within a external text file with the .css extension. This is by far the most common place to locate style rules because it provides the best maintainability. When you make a change to an external style sheet, all HTML documents that reference that style sheet will automatically use the updated version. The browser is able to cache the external style sheet, which can improve the performance of the site as well.
To reference an external style sheet, you must use a <link> element within the <head> element, as shown in Listing 4.3. You can link to several style sheets at a time; each linked style sheet will require its own <link> element.
Listing 4.3 Referencing an external style sheet
<head>
<meta charset="utf-8">
<title>Chapter 4</title>
<link rel="stylesheet" href="styles.css" />
</head>
Note
There are in fact three different types of style sheets:
Author-created style sheets (what you are learning in this chapter)
User style sheets allow the individual user to tell the browser to display pages using that individual’s own custom style sheet. This option can usually be found in a browser’s accessibility options.
The browser style sheet defines the default styles the browser uses for each HTML element. Some browsers allow you to view this stylesheet. For instance, in Firefox, you can view this default browser style sheet via the following URL: resource://gre-resources/forms.css. The browser stylesheet for WebKit browsers such as Chrome and Safari can be found (for now) at: http:/