13
Using Different Kinds of Style Sheets
In This Chapter
Using inline styles
Styling a page with the <style>
element
Using external style sheets
Styling a site with external style sheets
When you finish creating your style rules, you’re ready to connect them to your HTML page by using one of these options:
Insert style information into your document. You can either
• Use the style
attribute to add style information directly to a tag.
This is an inline style.
• Use the <style>
element to build a style sheet into a web page.
This is an internal style sheet.
Use an external style sheet. You can either
• Use the <link>
tag to link your web page to an external style sheet.
• Use the CSS @import
statement to import an external style sheet into the web page.
Applying Inline Styles
Each element in an HTML document has a special, optional attribute named style
. Web page authors use the style
attribute to apply CSS rules to that single element without having to worry about using a selector. Style rules applied in this way are called inline styles.
Listing 13-1 shows a sample HTML document that has been styled entirely with inline styles.
Listing 13-1: An HTML Document Styled with Inline Styles
One thing you may notice about this document is that it’s wordy. Because inline styles apply only to the element they’re inside of, using inline styles requires a lot of typing.
The result of all this typing is a web page that looks exactly like the original HTML5 Cafe home page.
Inline styles are also difficult to maintain. Imagine if you wrote the document from Figure 13-1 and then wanted to change the color that’s applied to the link elements. You’d need to carefully go through the markup and change the color for each link to the new value. In this particular example, that might take only a few moments. But what if the document had many more links? For example, what if it was a hyperlinked index for a book? You could spend hours going through and modifying the inline styles for each link.
Figure 13-1: The result of styling the HTML5 Cafe home page with inline styles.
Of course, no one would actually build a website this way.
In fact, if there’s any chance that you’ll ever want to reuse or modify a style, you shouldn’t use inline styles. So, when should you use inline styles? Practically never.
As always, there are exceptions to our opinion that you should never use inline styles. However, most of them have to do with working around bugs in programs that will be using the CSS. For example, if you’re writing an HTML e-mail, it’s necessary to use inline styles to ensure compatibility with certain e-mail programs. For normal day-to-day web development, do your future self a favor (as well as anyone else who might need to edit your markup) and don’t use inline styles.
The one thing that’s good about inline styles is that they’re nearly at the top of the CSS cascade. In other words, a style applied using an inline style takes precedence over any other style that may apply to that element.
User style sheet: These are styles defined by someone inside of their own web browser. For example, users with vision disabilities may universally adjust font sizes in their browsers to make web pages easier to read.
The !important
attribute: The !important
attribute is like an escape hatch from the cascade. To use !important
, put it after the value in a CSS declaration, immediately before the semicolon. For example:
p {color: purple !important;}
When you use !important
, you bypass the normal cascade, and the style with the !important
attribute is applied. Period.
Okay. We know of one small exception to the !important
exception. When a user's style sheet also specifies the same declaration as !important
, the declaration marked as !important
can lose the cascade battle. This situation is really rare, however, and applies only to that one user's browser. So, effectively, you can count on !important
to mean "do it, no matter what!"
Getting to Know Internal Style Sheets
Like inline styles, an internal style sheet lives inside your HTML page. Unlike inline styles, the rules in an internal style sheet use selectors and can apply to multiple elements within a document.
Understanding the <style> element
To create an internal style sheet, just add style rules to the <style>
element in the document header. You can include as many (or as few) style rules as you want in an internal style sheet.
The style element doesn't require any attributes in HTML5. In previous versions of HTML, a type
attribute was required, which explicitly specified that the style rules were CSS style rules. This was pretty much always redundant, however, because CSS was the only type of style rule anyone was using in HTML. The elimination of such silly and redundant requirements is just one of the beautiful things about HTML5.
Figuring out internal style sheet scope
Rules defined in an internal style sheet apply to just the HTML document in which they appear. It’s common to use internal style sheets when your entire website is just that one page, or when a single page needs to have some styles that are different from the rest of the pages in the site.
Listing 13-2 shows how you can rewrite the example from Chapter 11 (and from Figure 13-1) using an internal style sheet. Notice how much cleaner the HTML is in this example.
Listing 13-2: Internal Style Sheets Use Selectors and Apply to a Single Document
If you need to change the color of the top navigation links in this document to red, you can do so by just making one edit: Simply change the value of the color property. So, the #topnav a
rule before the change looks like this:
#topnav a {
color:#FFFFFF;
text-decoration: none;
}
and after the change, it might look like this:
#topnav a {
color:#FF0000;
text-decoration: none;
}
Working with External Style Sheets
An external style sheet holds all your style rules in a separate text document that you can reference from any HTML file on your site. You must maintain a separate style sheet file, but an external style sheet offers benefits for overall site maintenance. If your site’s pages use the same style sheet, you can change any formatting characteristic on all pages with a change to the style sheet.
CSS files
External style sheets follow the same format as internal style sheets except that they aren't enclosed within a <style>
element. Instead, external style sheets are made up of one or more CSS rules in a file saved with the extension .css
.
In earlier chapters, we present a couple of examples of external style sheets. For example, in Chapter 11, we look at normalize.css
and main.css
.
Link element attributes
Listing 13-3 shows the <head>
element from a page in the HTML5 Cafe site, which includes both the normalize.css
and main.css
style sheets. Any number of external style sheets may be included in the <head>
of a document.
Listing 13-3: The <head>
Element from a Page in the HTML5 Cafe Site
Notice the two <link>
elements in this markup. The <link>
element is most often used to link to style sheets. Two attributes are required when you use <link>
to link to an external style sheet.
The rel
attribute indicates the relationship between the linked document and the document that's linking to it. When you're linking to a style sheet, the rel
attribute should always have a value of stylesheet
.
The other required attribute is href
. As with the <a>
element, the href
attribute contains the path to the linked file. The href
attribute in the <link>
element can take either of the following:
A relative link (a style sheet on your own site)
An absolute link (a style sheet that doesn’t reside on your own site)
To quickly add style to your web page (or to experiment to see how browsers handle different styles), use an absolute URL to point to one of the W3C's Core Style sheets. Read more about them at www.w3.org/StyleSheets/Core
. Chapter 8 covers the difference between relative and absolute links.
Usually, you shouldn’t use a style sheet that doesn’t reside on your website, because you want control of your site’s look and feel.
Importing and when to use @import
Another way to include CSS in your HTML document is with the @import
statement. The @import
statement instructs the browser to load an external style sheet and use its styles. You use it within the <style>
element but before any of the individual style rules, like so:
<style>
@import "http://www.somesite.edu/stylesheet.css";
</style>
You can also use the @import
statement within external style sheets to create a sort of super-external style sheet. For example, you can have an external style sheet that references other external style sheets. However, just because you could do something doesn't mean that it's the best thing to do.
The truth is that @import
is convenient but otherwise not good for much. You could organize your CSS styles into multiple external style sheets and then link them together or import them into the <style>
element in a page. Unfortunately, this added complexity can have a negative impact on the performance of your web pages.
Most experts agree that the best way to use style sheets is to have as few external style sheets as possible and use the <link>
element to include them in the <head>
of each HTML page in your site.
3.21.104.72