Scribd
Upload
61 views

CSS Dream Weaver

This tutorial teaches how to format text on a web page using CSS. It provides instructions on creating an external style sheet called cafe_townsend.css, and defining CSS rules to format paragraph text with properties like font, size, color and line-height. It then describes how to attach this external style sheet to the index.html page so that the CSS rules are applied to corresponding elements on the page.

Uploaded by

Anonymous nCSwvW7V
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

CSS Dream Weaver

This tutorial teaches how to format text on a web page using CSS. It provides instructions on creating an external style sheet called cafe_townsend.css, and defining CSS rules to format paragraph text with properties like font, size, color and line-height. It then describes how to attach this external style sheet to the index.html page so that the CSS rules are applied to corresponding elements on the page.

Uploaded by

Anonymous nCSwvW7V
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

CHAPTER 6

Tutorial: Formatting Your Page with CSS


This tutorial shows you how to format text on your page using Cascading Style Sheets (CSS) in Dreamweaver. CSS provides you with greater control over the appearance of your page by letting you format and position text in ways that HTML cannot. In this tutorial, you will complete the following tasks:
Locate your files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101 Learn about CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Create a new style sheet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Explore the CSS Styles panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Attach a style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Create a new CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Apply a class style to text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 Format the navigation bar text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 (Optional) Center the contents of the page . . . . . . . . . . . . . . . . . . 125

99

Locate your files


In this tutorial, youll begin with the Cafe Townsend index page to which you added content in Chapter 5, Tutorial: Adding Content to Pages. If you did not complete that tutorial, you can either complete it before proceeding, or you can open the finished version of the tutorial and begin with that. The finished version of the tutorial, add_content.html, is located in the completed_files/dreamweaver folder, within the cafe_townsend folder that you copied to your hard drive in Chapter 3, Tutorial: Setting Up Your Site and Project Files.
If you begin this tutorial with the completed add_content.html file, instead of the index.html file from Chapter 5, Tutorial: Adding Content to Pages, certain steps and illustrations in the tutorial will not match what you see on your screen.
NO TE

100 Tutorial: Formatting Your Page with CSS

Review your task


In this tutorial, youll use Cascading Style Sheets (CSS) to format the text on the home page for Cafe Townsend, a fictional restaurant. Youll create different kinds of CSS rules to format the body text. Youll also format the link text on the left side of the page to create a navigation bar. When youre finished, your page will look like the following example:

Review your task

101

For more information about CSS, proceed to the next section. To start creating CSS right away, proceed to Create a new style sheet on page 104.

Learn about CSS


Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content on a web page. When you use CSS to format a page, you separate content from presentation. The content of your pagethe HTML coderesides in the HTML file itself, while the CSS rules that define the presentation of the code reside in another file (an external style sheet) or in another part of the HTML document (usually the <head> section). With CSS you have flexibility and control over the exact appearance of your page, from precise positioning of layout to specific fonts and styles. CSS lets you control many properties that cannot be controlled with HTML alone. For example, you can specify different font sizes and units (pixels, points, and so on) for selected text. By using CSS to set font sizes in pixels, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers. A CSS formatting rule consists of two partsthe selector and the declaration. The selector is a term (such as P, H1, a class name, or an id) that identifies the formatted element, and the declaration defines what the style elements are. In the following example, H1 is the selector, and everything that falls between the braces ({}) is the declaration:
H1 { font-size: 16 pixels; font-family: Helvetica; font-weight: bold; }

The declaration consists of two parts, the property (such as font-family), and the value (such as Helvetica). The preceding example creates a style for H1 tags: The text for all H1 tags linked to this style is 16 pixels in size, and uses Helvetica font and bold.

102 Tutorial: Formatting Your Page with CSS

The term cascading refers to your ability to apply multiple styles to the same element or web page. For example, you can create one CSS rule to apply color and another rule to apply margins, and apply them both to the same text on a page. The defined styles cascade to the elements on your web page, ultimately creating the design you want. A major advantage of CSS is that it can be updated easily; when you update a CSS rule in one place, the formatting of all of the documents that use the defined style are automatically updated to the new style. You can define the following types of rules in Dreamweaver:

Custom CSS rules, also called class styles, let you apply style attributes to any range or block of text. All class styles begin with a period (.). For example, you could create a class style called .red, set the color property of the rule to red, and apply the style to a portion of alreadystyled paragraph text. HTML tag rules redefine the formatting for a particular tag, such as p or h1. When you create or change a CSS rule for the h1 tag, all text formatted with the h1 tag is immediately updated. CSS selector rules (advanced styles) redefine the formatting for a particular combination of elements, or for other selector forms as allowed by CSS (for example, the selector td h2 applies whenever an h2 header appears inside a table cell.) Advanced styles can also redefine the formatting for tags that contain a specific id attribute (for example, the styles defined by #myStyle apply to all tags that contain the attribute-value pair id="myStyle").

For more information, see About text formatting in Dreamweaver in Using Dreamweaver.

Learn about CSS 103

Create a new style sheet


First, youll create an external style sheet that contains a CSS rule that defines a style for paragraph text. When you create styles in an external style sheet, you can control the appearance of multiple web pages from a central location, instead of setting styles on each individual web page.
1. 2.

Select File > New. In the New Document dialog box, select Basic page in the Category column, select CSS in the Basic Page column, and click Create.

A blank style sheet appears in the Document window. The Design view and Code view buttons are disabled. CSS style sheets are text-only filestheir contents are not meant to be viewed in a browser.

104 Tutorial: Formatting Your Page with CSS

A BO UT . ..

More about CSS rules CSS rules can reside in the following locations: External CSS style sheets are collections of CSS rules stored in a separate, external .css file (not an HTML file). The .css file is linked to one or more pages in a website by using a link in the head section of a document. Internal (or embedded) CSS style sheets are collections of CSS rules that are included in a style tag in the head portion of an HTML document. For example, the following example defines the font size for all text in the document formatted with the paragraph tag: <head> <style> p{ font-size:80px } </style> </head> Inline styles are defined within specific instances of tags throughout an HTML document. For example, <p style=font-size: 9px> defines the font size for only the paragraph formatted with the tag that contains the inline style. Dreamweaver renders most style attributes that you apply and displays them in the Document window. You can also preview the document in a browser window to see styles applied. Some CSS style attributes render differently in Microsoft Internet Explorer, Netscape Navigator, Opera, and Apple Safari.

3.

Save the page (File > Save) as cafe_townsend.css. When you save the style sheet, make sure you save it in the cafe_townsend folder (the root folder of your website).

4.

Type the following code in the style sheet:


p{ font-family: Verdana, sans-serif; font-size: 11px; color: #000000; line-height: 18px; padding: 3px; }

As you type, Dreamweaver uses code hints to suggest options for completing your entry. Press Enter (Windows) or Return (Macintosh) when you see the code you want to let Dreamweaver finish the typing for you.

Create a new style sheet 105

Dont forget to include a semicolon at the end of each line, after the property values. When youre finished, the code should look like following example:

For more information about any CSS property, check the OReilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select OReilly CSS Reference from the pop-up menu in the Reference panel.

5.

Save the style sheet.

106 Tutorial: Formatting Your Page with CSS

TI P

Next youll attach the style sheet to the index.html page.

Attach a style sheet


When you attach a style sheet to a web page, the rules defined in the style sheet are applied to the corresponding elements on the page. For example, when you attach the cafe_townsend.css style sheet to the index.html page, all paragraph text (text formatted with the <p> tag in the HTML code) is formatted according to the CSS rule you defined.

1. 2.

In the Document window, open the Cafe Townsend index.html file. (You can click its tab if its already open.) Select the text of the first paragraph that you pasted into the page in Chapter 5, Tutorial: Adding Content to Pages.

3.

Look in the Property inspector and make sure that the paragraph is formatted with the paragraph tag. If the Format pop-up menu in the Property inspector says Paragraph, the paragraph is formatted with the paragraph tag. If the Format popup menu in the Property inspector says None, or something else, select Paragraph to format the paragraph.

4.

Repeat step 3 for the second paragraph.

Attach a style sheet 107

5.

In the CSS Styles panel (Window > CSS Styles), click the Attach Style Sheet button in the lower-right corner of the panel.

6. 7.

In the Attach External Style Sheet dialog box, click Browse and browse to the cafe_townsend.css file that you created in the previous section. Click OK. The text in the Document window is formatted according to the CSS rule in the external style sheet.

108 Tutorial: Formatting Your Page with CSS

Explore the CSS Styles panel


The CSS Styles panel lets you track the CSS rules and properties that affect a currently selected page element, or the rules and properties that affect an entire document. It also lets you modify CSS properties without opening an external style sheet.
1. 2.

Make sure the index.html page is open in the Document window. In the CSS Styles panel (Window > CSS Styles), click All at the top of the panel and examine your CSS rules. In All mode, the CSS panel shows you all of the CSS rules that apply to the current document, whether those rules are in an external style sheet, or in the document itself. You should see two main categories in the All Rules pane: a <style> tag category and a cafe_townsend.css category.

3. 4.

Click plus (+) to expand the <style> tag category if it isnt already expanded. Click the body rule. The background-color property with a value of #000000 appears in the Properties pane below.

You may need to collapse another panel, such as the Files panel, to see the full length of the CSS Styles panel. You can also alter the length of the CSS Styles panel by dragging the borders between the panes.

NO TE

Explore the CSS Styles panel 109

You set the background color for the page in Chapter 4, Tutorial: Creating a Table-based Page Layout by using the Modify Page Properties dialog box. When you set page properties in this manner, Dreamweaver writes a CSS style that is internal to the document.
5. 6.

Click plus (+) to expand the cafe_townsend.css category. Click the p rule. All of the properties and values that you defined in the external style sheet for the p rule appear in the Properties pane below.

7. 8.

In the Document window, click once anywhere in either of the two paragraphs that you just formatted. In the CSS Styles panel, click Current at the top of the panel and examine your CSS styles. In Current mode, the CSS panel shows you a summary of properties for the current selection. The properties shown correspond to the properties for the p rule in the external style sheet.

In the next section, youll use the CSS Styles panel to create a new rule. Using the CSS Styles panel to create a new rule is much easier than typing the rule out by hand, as you did when you initially created the external style sheet.

110

Tutorial: Formatting Your Page with CSS

Create a new CSS rule


In this section youll use the CSS Styles panel to create a custom CSS rule, or class style. Class styles let you set style attributes for any range or block of text, and can be applied to any HTML tag. For more information on different types of CSS rules, see Learn about CSS on page 102.
1.

In the CSS Styles panel, click New CSS Rule in the lower-right corner of the panel.

2. 3.

In the New CSS Rule dialog box, select Class from the Selector Type options. It should be selected by default. Enter .bold in the Name text box. Make sure that you type the period (.) before the word bold. All class styles must start with a period

Create a new CSS rule

111

4.

Select cafe_townsend.css from the Define In pop-up menu. It should be selected by default.

5.

Click OK. The CSS Rule Definition dialog box appears, indicating that you are creating a class style called .bold in the cafe_townsend.css file.

6.

In the CSS Rule Definition dialog box, do the following:


In the Font text box, enter Verdana, sans-serif. In the Size text box, enter 11 and select pixels from the pop-up menu immediately to the right. In the Line Height text box, enter 18 and select pixels from the pop-up menu immediately to the right. Select bold from the Weight pop-up menu. Enter #990000 in the Color text box

112

Tutorial: Formatting Your Page with CSS

7. 8. 9.

Click OK. Click All at the top of the CSS Styles panel. Click the plus (+) button next to the cafe_townsend.css category if the category isnt already expanded. Youll see that Dreamweaver added the .bold class style to the list of rules defined in the external style sheet. If you click the .bold rule in the All Rules pane, the rules properties appear in the Properties pane. The new rule also appears in the Style pop-up menu in the Property inspector.

T IP

Apply a class style to text


Now that youve created a class rule, youll apply it to some paragraph text.
1. 2.

For more information about any CSS property, check the OReilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select OReilly CSS Reference from the pop-up menu in the Reference panel.

In the Document window, select the first four words of text in the first paragraph: Cafe Townsends visionary chef. In the Property inspector (Window > Properties), select bold from the Styles pop-up menu.

The bold class style is applied to your text.

Apply a class style to text

113

3.

Repeat step 2 to apply the bold class style to the first four words of the second paragraph.

4.

Save your page.

Format the navigation bar text


Next youll use CSS to apply styles to the link text for the navigation bar. Many web pages use images of colored rectangles with text inside them to create a navigation bar, but with CSS, all you need is linked text and some formatting. By using the display: block property and setting a width to the block, you can effectively create the rectangles without the use of separate images.

114

Tutorial: Formatting Your Page with CSS

Create a new rule for the navigation


1. 2.

Open the cafe_townsend.css file if it isnt already open, or click on its tab to see it. Define a new rule by typing the following code in the file, after the .bold class style:
.navigation { }

This is an empty rule. The code in the file should look something like the following example:

3.

Save the cafe_townsend.css file. Next youll use the CSS Styles panel to add properties to the rule. Open the index.html file if it isnt already open.

4.

Format the navigation bar text

115

5.

In the CSS Styles panel, make sure All mode is selected, select the new .navigation rule and click Edit Style in the lower-right corner of the panel.

6.

In the CSS Rule Definition dialog box, do the following:


Enter Verdana, sans-serif in the Font text box. Select 16 from the Size pop-up menu, and select pixels from the pop-up menu immediately to the right of the Size pop-up menu. Select Normal from the Style pop-up menu. Select None from the Decoration list. Select Bold from the Weight pop-up menu. Enter #FFFFFF in the Color text box

116

Tutorial: Formatting Your Page with CSS

7.

Click OK. Now youll use the CSS Styles panel to add a few more properties to the .navigation rule.

Format the navigation bar text

TIP

For more information about any CSS property, check the OReilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select OReilly CSS Reference from the pop-up menu in the Reference panel.

117

8.

In the CSS Styles panel, make sure the .navigation rule is selected and click Show List View.

List view reorganizes the Properties pane to display an alphabetical list of all available properties (in contrast to Set Properties view, the previous view, which shows only those properties youve already set).
9.

Click in the column to the right of the background-color property. To see the full wording of a property, hold the mouse over the property.

118

Tutorial: Formatting Your Page with CSS

10. Enter #993300 as the hexadecimal value and press Enter (Windows) or

Return (Macintosh).

11.

Locate the display property (you might need to scroll down), click once in the column to the right, and select block from the pop-up menu.

TI P

12. Locate

the padding property, click once in the column to the right, enter 8px as the value, and press Enter (Windows) or Return (Macintosh).

To see how your work affects the external style sheet, keep the cafe_townsend.css file open in the Document window while you work. When you make a selection in the CSS Styles panel, youll see that Dreamweaver writes the CSS code in the style sheet at the same time.

13.

Locate the width property, click once in the column to the right, enter 140 in the first text box, select pixels from the pop-up menu, and press Enter (Windows) or Return (Macintosh).

Format the navigation bar text

119

14. Click Show Set Properties so that only your set properties appear in the

Properties pane.

15. 16.

Click on the cafe_townsend.css file to display it. Youll see that Dreamweaver has added all of the properties you specified to the file. Save the cafe_townsend.css file and close it.

Youve now created a rule to format the navigation bar text. Next youll apply the rule to the selected links.

120 Tutorial: Formatting Your Page with CSS

Apply the rule


1.

With the index.html page open in the Document window, click the word Cuisine so that the insertion point is somewhere in the word.

2.

In the tag selector, click the rightmost <a> tag. This action selects all of the text for the specified <a> tag, or link.

3.

In the Property inspector (Window > Properties), select navigation from the Style pop-up menu. In the Document window, the appearance of the Cuisine text changes entirely. The text is now formatted as a navigation bar button, according to the properties of the .navigation rule that you defined in the previous section.

Format the navigation bar text

121

4.

Repeat step 1 through 3 for each of the individual links in the navigation bar. You must assign a navigation class style to each <a> tag or link, so its important that you use the tag selector to select each link individually, and then assign the class styles one at a time.

If youre having trouble formatting the link text, make sure that a space (not a return) is between each linked word or words. Also make sure that the space between two links is not itself linked. If it is, carefully select the linked space, clear the Link text box in the Property inspector, and press Enter (Windows) or Return (Macintosh).
5.

When youve finished formatting all of the words for the navigation bar, save the page, and then preview your work in a browser (File > Preview in Browser). You can click on the links to make sure they work.

122 Tutorial: Formatting Your Page with CSS

Add a rollover effect


Now youll add a rollover effect so that the background color of the navigation bar blocks change whenever the mouse pointer passes over one of the links. To add a rollover effect, add a new rule that contains the :hover pseudo-class.
1. 2.

Open the cafe_townsend.css file. Select the entire .navigation rule.

3.

Copy the text (Edit > Copy).

A B OU T .. .

About the :hover pseudo-class A pseudo-class is a means of affecting certain elements in an HTML document, based not on the HTML code of the document itself, but on other external conditions applied by the web browser. Pseudo-classes can be dynamic, in the sense that an element on the page may acquire or lose the pseudo-class while a user interacts with the document. The :hover pseudo-class affects a change in a formatted page element when the user holds the mouse over the element. For example, when the :hover pseudo-class is added to the .navigation class style (.navigation:hover) to create a new rule, all text elements that the .navigation rule formats change according to the .navigation:hover rules properties.

Format the navigation bar text 123

4.

Click once at the end of the rule and press Enter (Windows) or Return (Macintosh) a few times to create some space.

5. 6.

Paste (Edit > Paste) the copied text in the space you just created. Add the :hover pseudo-class to the pasted .navigation selector, as follows:

124 Tutorial: Formatting Your Page with CSS

7.

In the new .navigation:hover rule, replace the current background-color (#993300) with #D03D03.

8. 9.

Save the file and close it. Open the index.html file in the Document window and preview the page in a browser (File > Preview in Browser). When you hold the mouse over any of the links, you can see the new rollover effect.

(Optional) Center the contents of the page


Lastly, youll use the tag selector to select all of the HTML in the document, and center the documents contents.
Some browsers (such as Internet Explorer 6), center the pages text within the context of the table cells when you use the method described in this section. If you dont like how this looks when you preview the page in the browser, you might want to skip this section, and leave the contents of your page aligned left.
NO TE

(Optional) Center the contents of the page 125

1.

With the index.html page open in the Document window, click the <body> tag in the tag selector.

Clicking the <body> tag selects everything between the open and close <body> tags in the Document window. To see the selection, click Code view at the top of the Document window.

126 Tutorial: Formatting Your Page with CSS

2.

In the Property inspector (Window > Properties), click the Align Center button.

Dreamweaver inserts CSS <div> tags that center the body content of the page. In Design view, a dotted line borders the area that the <div> tags center.
3.

Save the page.

Your page is now finished. The last task of building your website is to publish the page. To publish the page, you must define a folder on a remote site and upload your files to that folder. For instructions, continue to the next tutorial.

(Optional) Center the contents of the page 127

128 Tutorial: Formatting Your Page with CSS

You might also like