Looking for an easy way to apply complex styles to your Web page content? This chapter shows you how to use Cascading Style Sheets, or CSS, to assign formatting to your HTML documents and across your Web site.
Understanding Style Sheets 186
Create an External Style Sheet 188
Link to a Style Sheet 190
Add Comments to a Style Sheet 191
Create an Internal Style Sheet 192
Create a Class 194
Apply a Style with the DIV Tag 196
Apply a Style Locally 198
Apply a Style Using the ID Attribute 199
You can use Cascading Style Sheets, or CSS, to exercise precise control over the appearance of your HTML documents. Style sheets can help you maintain a consistent look and feel throughout your Web site. By relegating formatting controls to a separate CSS document, you can free your HTML documents of repetitive coding and concentrate on the content that makes up your pages. Like HTML documents, CSS documents are simple text files.
|
A declaration consists of one or more property and value pairs such as  |
If you want to apply formatting only to a particular instance of a tag, you can use a class attribute inside that tag. You can assign a distinct name to a class and add a style rule that applies only to that class. For example, perhaps you want to add special formatting to one paragraph but not others. You define the style rule on your style sheet, and then refer to the class name in that paragraph tag.  |
|
Tags you add inside other tags inherit the outer tag's formatting, unless you specify otherwise. For example, if you define a  | External and Internal Style Sheets You can connect an HTML document to an external or internal style sheet. Internal style sheets exist within an HTML page, between the  |
You can use an external style sheet to define formatting and layout instructions and then apply those instructions to your HTML documents. You can save the style sheet as a text file and assign the .css file extension to identify the file as a Cascading Style Sheet.
For more on style sheets and how they work, see the section "Understanding Style Sheets."
Create an External Style Sheet
1 Create a new document in your text editor.
Note
To create and save HTML documents, see Chapter 2.
2 To create a style rule, type the element tag for which you want to define formatting properties.
This example shows how to create a style rule for level 2 headings.
3 Type a space.
4 Type {.
5 Type one or more declarations.
Each declaration includes a property and a value separated by a :.
Separate multiple declarations with semicolons.
In this example, the rule includes setting a font and a font style.
Note
To learn more about writing specific style rules, see Chapter 11.
6 Type } to end the rule.
7 Repeat steps 2 to 6 to continue adding rules to your style sheet.
8 Click File.
9 Click Save.
The Save As dialog box appears.
10 Navigate to the folder that contains your HTML pages.
11 Type a unique filename for your style sheet and a .css extension.
12 Click Save.
Your text editor saves the new style sheet.
Note
To learn how to apply a style sheet to an HTML document, see the section "Link to a Style Sheet."
Tip
Do style declarations need to be on a single line?
No. Similar to HTML, you can add line breaks and spaces within your CSS without changing the effects of your rules. It can be a good idea to put each CSS declaration on a separate line to make it easier to view and edit your rules. You can also use tabs to make CSS properties and values line up with one another.
Can I override the normal styles of an HTML tag with CSS?
Yes. You may use CSS to change how HTML tags normally appear, even making some tags behave like others. For example, you can change the style of a heading tag so that it looks just like regular paragraph text, or vice versa. See Chapter 11 for some of the many types of styles you can apply to tags with CSS.
You can link to a style sheet to assign a set of formatting rules to your HTML document. You can link multiple documents to the same style sheet to give all the pages in your site a consistent look and feel.
Link to a Style Sheet
1 Open the HTML document you want to link to a style sheet.
Note
To learn how to create a style sheet, see the section "Create an External Style Sheet."
2 Click within the <HEAD> and </HEAD> tags and add a new line.
3 Type <LINK REL="stylesheet" TYPE="text/css".
4 Type a blank space and HREF="?">, replacing ? with the name of the style sheet. If the style sheet is located in a subfolder, also specify the path.
The style sheet is now linked with the page.
You can test your page in a browser to see the style sheet results.
You can add comments to your style sheet to describe and identify your style rules. For example, you might add a comment describing the effect of the rule when it is applied to text. Web browsers do not interpret comment information in style sheets.
Add Comments to a Style Sheet
1 In your style sheet document, type /* to begin your comment.
Note
To learn how to create a style sheet, see the section "Create an External Style Sheet."
2 Type your comment text.
3 Type */ to end the comment.
When the page is displayed in a Web browser, the comments are ignored.
You can create an internal style sheet that resides within the <HEAD> tag of your HTML document. Internal style sheets are handy if your Web site consists of a single page because you can change both style rules and HTML in the same file.
Create an Internal Style Sheet
1 Within the <HEAD> and </HEAD> tags, add a new line and type <STYLE>.
2 Add a new line and type the element tag for which you want to create a style rule.
In this example, a new style rule is created for the H2 element.
3 Type {.
4 Type the properties and values for the rule.
If you intend to add more than one declaration to the rule, be sure to separate declarations with a semicolon.
5 Type } to end the rule.
Note
To learn more about writing style rules, see Chapter 11.
6 Repeat steps 2 to 5 to continue adding style rules to your internal style sheet.
7 Add a new line and type </STYLE>.
You can save your page and test it in a browser to see the results.
Note
To learn more about viewing HTML documents in a browser, see Chapter 2.
Tip
Do all browsers recognize style sheets?
Some older browsers do not support style sheets, so they ignore the <STYLE> tags. However, the content inside the <STYLE> tags is not ignored in these browsers, so any coding you type between the <STYLE> tags appears on the page. You can prevent an older browser from displaying style tag coding by typing <!-- and --> before and after the style rules.
Can I link another Web page to my internal style sheet?
No. A page cannot access another page's internal style sheet. If you want multiple Web pages to take advantage of a set of style rules, you must define those rules in an external style sheet and link the pages to the sheet. An internal style sheet is useful only if you want to apply those styles to a single HTML document. See the section "Create an External Style Sheet" to learn more.
You can create a CSS class to apply a style rule to specific HTML tags. For example, if you want the introductory paragraphs formatted differently from all the other paragraphs, you can create a class specifically for the introductory paragraphs. After you create the class, the browser applies it to all the paragraphs to which the class is assigned.
You can set up a class in your external or internal style sheet, and then use the CLASS attribute to assign rules to an HTML tag. To learn more about creating style sheets, see the sections "Create an External Style Sheet" and "Create an Internal Style Sheet."
Create a Class
DEFINE A CLASS
1 In your external or internal style sheet, type the tag for which you want to create a class.
2 Type a period.
3 Type a name for the class.
4 Type {.
5 Type one or more declarations for the class.
Separate multiple declarations with semicolons.
Note
To learn more about writing style rules, see Chapter 11.
6 Type } to end the style rule.
Your class is now defined.
If you are editing an external style sheet, save the sheet.
1 Open the HTML document and click in the tag to which you want to assign a class.
2 Type CLASS="?", replacing ? with the class name.
You can assign multiple classes by separating class names with a space.
3 Open the HTML document in a Web browser.
Note
To learn about viewing an HTML document in a Web browser, see Chapter 2.
• The Web browser applies the styles associated with the class to the tag content.
Tip
What is a generic class?
You can use a generic class to format more than one type of tag. For example, you might use a generic class to format both paragraphs and level 3 headings in a document. When defining a generic class, simply type a period followed by the class name, such as .myclass. When applying the class, use the class name, such as <P CLASS="myclass"> or <H3 CLASS="myclass">.
How do class styles affect styles that have already been applied to a tag?
When you apply a class to a tag, the class-based rules override any conflicting rules already assigned to the tag. For example, if you turn the paragraph text for a page red with the style P {color:red;} and then apply the class P.bluetext {color:blue;} to a paragraph, the text in that paragraph appears blue instead of red.
You can apply styles to different sections of your Web page using the <DIV> tag. You can define style classes for the <DIV> tag in your external or internal style sheet, and then apply those classes in your HTML document.
You can associate a class with <DIV> content using the CLASS attribute. For more information about creating classes, see the section "Create a Class."
Apply a Style with the DIV Tag
SET UP A DIV CLASS
1 In your external or internal style sheet, type DIV.?, replacing ? with the class name you want to assign for the DIV style.
2 Type {.
3 Type the declarations for the DIV style.
Separate multiple declarations with semicolons.
Note
To learn more about writing style rules, see Chapter 6.
4 Type }.
The style rule is complete.
If you are editing an external style sheet, save the sheet.
1 In the HTML document, click in front of the section to which you want to assign a DIV tag and add a line.
2 Type <DIV CLASS="? ">, replacing ? with the DIV class name.
3 Type </DIV> at the end of the section.
4 Open the HTML document in a Web browser.
Note
To learn about viewing an HTML document in a Web browser, see Chapter 2.
• The Web browser applies the style to the HTML section.
Tip
How do I format specific text within a paragraph or other section?
You can use the <SPAN> tag to apply formatting to a portion of text in an HTML document. Unlike the <DIV> tag, the <SPAN> tag is an inline tag; it does not add blank lines before and after the text.
1 Define a class for the <SPAN> tag.
2 Before the text you want to format, type <SPAN CLASS="?">, replacing ? with the SPAN class name.
3 After the text you want to format, type </SPAN>.
You can apply a style to a single instance of a tag in your document using an HTML attribute. The STYLE attribute allows you to apply a style rule to a tag without having to define the rule separately in an internal or external style sheet.
When you apply a style locally, it overrides any styles found in external or internal style sheets for the same tag. Applying styles locally works best for one-time changes. You should use internal or external style sheets for styles you plan to apply more than once.
Apply a Style Locally
1 Click in the tag for the element you want to change and type STYLE="?", replacing ? with the style declarations you want to assign.
Separate multiple declarations with semicolons.
Note
To learn more about writing style rules, see Chapter 11.
2 Open the HTML document in a Web browser.
Note
To learn about viewing an HTML document in a Web browser, see Chapter 2.
• The Web browser applies the style to the tag content.
You can use the ID attribute to assign a style rule to an individual Web page element. IDs are like classes except that classes can be associated with multiple elements on the page.
If you want to assign a style rule to more than one element of the same tag, create a class instead. See the section "Create a Class" to learn more.
Apply a Style Using the ID Attribute
1 Open your external style sheet or scroll to your internal style sheet.
2 Type the tag to which you want to assign an ID.
3 Type #?, replacing ? with the ID name.
4 Type a space and define the style rule.
5 In the tag element for which you want to create a style rule, type ID="?", replacing ? with the ID name.
The style is applied.
