Embedded style sheets work well for single-page Web sites, but to really take advantage of what cascading style sheets can do, you need to create an external style sheet . A single external style sheet can be linked to multiple documents, ensuring complete consistency even in a large site . An external style sheet also makes it easy to change the formatting of your site after the pages have been constructed . Rather than having to edit each page individually, you can simply change the style sheet .
An external style sheet is a plain text file, just like an HTML file . The only difference is that you assign it a .css rather than an .htm extension . It contains anything you would place within the <style> tag if you were creating the style sheet internally . You do not need the
<style> and </style> tags themselves .
After creating the style sheet, you create a link to it in the <head> area of each docu-ment that will use it . For example, if the style sheet is named default .css, you would link to it by inserting this code in the document’s <head> area, as shown in the following:
<link rel="stylesheet" type="text/css" href="default.css" />
Note The name “default.css” is common, but not required. You can name your style sheet anything you like, as long as the name ends with a .css extension.
An embedded style sheet takes precedence over an external one . For example, if your external style sheet specifies Roman numerals for ordered lists but your embedded style sheet specifies uppercase letters, ordered lists will be labeled with uppercase letters . Furthermore, any tag-specific styles you apply take precedence over both embedded and external style sheets . So, if you add a style rule to an individual <ol> tag, that setting will override any style sheet settings .
In this exercise, you will create an external style sheet and link a Web page to it .
SET UP Use the index.htm file in the practice folder for this topic. This file is located in the Documents\Microsoft Press\HTML5 SBS\06Styles\CreatingExternal folder.
OPEN the index file in Notepad and in Internet Explorer.
1.
Select all the text between <style> and </style> but do not include those tags in the selection .2.
Press Ctrl+X to cut the text from the document and store it in the Clipboard .3.
Save the file, and then start a new document in Notepad .4.
Press Ctrl+V to paste the text from the Clipboard into the new document .100 Chapter 6
5.
Save the new document as default.css in the practice file folder for this exercise (Documents\Microsoft Press\HTML5 SBS\06Styles\CreatingExternal) .6.
Return to the index file in Notepad, and then delete the <style> and </style> tags .7.
Add this line to the <head> section:<link rel="stylesheet" type="text/css" href="default.css">
8.
Save the file, and then refresh the Internet Explorer display .The file does not appear to change, but the styles are now defined in the external style sheet rather than in the embedded style sheet .
Note One way to quickly check whether the style sheet is applied is to position the mouse pointer over a hyperlink. If the style sheet is working, the hyperlink text will turn lime green.
CLEAN UP Close the Notepad and Internet Explorer windows.
Key Points
●
● Styles can define the formatting for specific instances of a tag, for all uses of a tag within a document, or for all uses of a tag within a group of documents .
●
● A cascading style sheet is a list of style rules applied to tags within an HTML docu-ment . This list can either be internal (embedded) or external to the docudocu-ment (a linked file) .
●
● When rule conflicts occur, they are resolved as follows (from highest priority to lowest):
●
❍ Styles applied to individual tags
●
❍ Styles applied using an internal style sheet (with highest priority going to the entries nearest the bottom of that style sheet)
●
❍ Styles applied using an external style sheet (again, with highest priority to the entries nearest the bottom)
●
● There are three ways to apply a style . You can use the style= attribute within an individual tag, you can create an embedded style sheet, or you can create an exter-nal style sheet .
●
● You place an embedded style sheet in the <head> section of the file and enclose it in a <style> tag . An external style sheet is a separate plain text file with a .css extension .
●
● A style sheet consists of one or more style rules . A style rule is the tag, class, or ID name followed by curly braces in which the specifications are placed .
●
● Each specification takes the format of name: value . For example, list-style-type:
square .
●
● Separate multiple specifications within a rule by using semicolons . To define two or more tags the same way, include both tags (with a comma between them) before the opening curly brace, like this: h1, h2 {color: black} . If you omit the comma, two tag names in a row refer to nested styles in a rule . For example, ol ul {color: green}
refers to unordered lists nested within ordered lists .
●
● You can assign a class to multiple elements . You can define a style based on a class . Precede a class’s name in a style sheet with a period, like this: .new {color: red} .
●
● An ID must be uniquely assigned within a document . You can define a style based on an ID . Precede the ID in a style sheet with a hash symbol (#), like this: #special {color: red} .
●
● Apply a class or ID to a tag by including the class= or ID= attribute within its open-ing tag, like this: <ol class=”new”>.
●
● To apply styles to hyperlinks, use a pseudo-class of the hyperlink type . You can apply the link, visited, hover, active, or focus pseudo-class like this: a:visited {color: red} .
●
● To create an external style sheet, start a new Notepad document and place all the style rules within it . Then refer to it from the <head> section of each document to which that style sheet should apply, by using the tag <link rel=”stylesheet”
type=”text/css” href=”default.css”>, where default.css is the name of your style sheet .
Download from Wow! eBook <www.wowebook.com>
Chapter at a Glance
Specify a
font family, page 104
Create inline spans, page 117 Apply bold and italics, page 107
103
7 Formatting Text by Using Style Sheets
In this chapter, you will learn how to 4 Specify a font family .
4 Specify a font size and color . 4 Apply bold and italics .
4 Apply strikethrough and underlining . 4 Create inline spans .
4 Adjust spacing between letters .
Learning how to create style rules opens up a whole new world in HTML formatting . Virtually anything that you can do in a word-processing program, you can do in HTML by using styles .
You might be wondering whether the simple text-formatting tags you learned about in Part 1 of the book, such as the <b> and <i> tags, are still relevant . They are—to a degree . The W3C is increasingly focused on applying text formatting by using styles, which means you should try to use the style-based formatting that you’ll learn in this chapter (and the next) . However, those old tags still work perfectly well when you create HTML5 documents, and Web browsers will continue to support tag-based formatting for a long time . If you’ve already created an extensive Web site that uses formatting tags, there’s no big rush to recreate the existing pages by using styles . For new pages, however, it’s a good idea to do it “right” from the start by using styles for all your formatting . In this chapter, you’ll learn about character-based formatting—that is, formatting that makes individual characters look a certain way . You’ll learn how to specify fonts, sizes, and colors; how to use styles to apply bold, italic, strikethrough, or underline styling to your text; and how to add a background to text and adjust the spacing between letters . In Chapter 8, “Formatting Paragraphs by Using Style Sheets,” you’ll learn about paragraph formatting features such as line spacing, indentation, and alignment .
104 Chapter 7
See Also Do you need only a quick refresher on the topics in this chapter? See the Key Points at the end of this chapter.
Practice Files Before you can use the practice files provided for this chapter, you need to install them from the book’s companion content page to their default locations. See
“Using the Practice Files” in the beginning of this book for more information.