Beginning HTML5 & CSS3 For Dummies® (2013)

Part IV

Adopting CSS Style

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.

Once again, there are exceptions to our statements about inline styles taking precedence over every other style. The exceptions are as follows:

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;

}

In this example, we specify the color using what's called hexadecimal notation. We talk more about the different ways of naming colors in HTML in Chapter 16. For now, just know that the first two characters (after the #) specify the amount of red, the third and fourth characters specify the amount of green, and the fifth and sixth specify the amount of blue. By combining different amounts of each color, you can create exactly 16,777,216 different colors.

The benefit of using an internal style sheet is convenience: Your style rules are on the same page as your markup, so you can tweak both quickly. If you want the same style rules to control the appearance of more than one HTML page, move those styles from individual web pages to an external style sheet.

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.

We recommend using an external style sheet for every website. Even if your website currently contains only one page, it will likely grow in the future, and you’ll be glad that you had the foresight to set things up the right way in the first place. Then you’ll remember that we advised you to do just that, and you’ll turn to your co-worker and say, “I need to buy Ed and Chris a beer. That advice they gave me was exactly right!” Of course, we’re not going to share a single beer, so we’ll do our best to provide you with at least one more beer-worthy tip in this book — and hopefully many more than that.

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.