Creating your first website – Part 4: Formatting your page with CSS

This work is licensed under a Creative Commons License.

Creating your first website – Part 4: Formatting your page with CSS

Jon Varese

Adobe

Welcome to the fourth part of this article series on creating your first website. This tutorial shows you how to format text on your page using cascading style sheets (CSS) in Adobe Dreamweaver CS3. CSS provides you with greater control over the appearance of your pages by letting you format and position text in ways that HTML cannot.

Prerequisite knowledge:

Part 1: Setting up your site and project files

Part 2: Creating the page layout

Part 3: Adding content to pages

Locate your files and review your task

In this tutorial, you'll begin with the Cafe Townsend index page to which you added content in Part 3: Adding content to pages. If you did not complete that tutorial, you can either complete it before proceeding, or you can work with the finished version of the tutorial. The finished version of the tutorial, add_content.html, is located in the completed_files folder, within the cafe_townsend folder that you copied to your hard drive in Part 1: Setting up your site and project files.

Note: If you begin this tutorial with the completed add_content.html file, instead of the index.html file from Adding Content to Pages certain steps and illustrations in the tutorial will not match what you see on your screen.

For this task, you'll use cascading style sheets (CSS) to format the text on the home page for Cafe Townsend, a fictional restaurant. You'll create different kinds of CSS rules to format the body text. You'll also format the link text on the left side of the page to create a navigation bar. When you're finished, your page will look like the one in Figure 1.

Figure 1. Your finished page

For more information about CSS, go to the following section. To start creating CSS right away, proceed to the Create a new style sheet section.

Learn about CSS

Cascading style sheets (CSS) is a collection of formatting rules that control the appearance of content on a web page. Using CSS to format a page separates content from presentation. The content of your page—the HTML code—resides in the HTML file, and the CSS rules defining 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). Separating content from presentation makes it much easier to maintain the appearance of your site from a central location because you don't need to update every property on every page whenever you want to make a change. Separating content from presentation also results in simpler and cleaner HTML code, which provides shorter browser loading times, and simplifies navigation for people with accessibility issues (for example, those using screen readers).

CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many text properties, including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; and much more. By using CSS to control your fonts, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers.

About CSS rules

A CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a block of declarations). The selector is a term (such as p, h1,a class name, or an id) that identifies the formatted element, and the declaration block defines what the style properties are. In the following example, h1 is the selector, and everything that falls between the braces ({}) is the declaration block:
h1 {  font-size: 16 pixels;  font-family: Helvetica;  font-weight: bold;  }
An individual declaration consists of two parts, the property (such as font-family) and value (such as Helvetica). In the previous CSS rule, a particular style has been created for h1 tags: the text for all h1 tags linked to this style will be 16 pixels in size, Helvetica font, and bold.

The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it's formatting—usually in an external style sheet, or in the head portion of an HTML document. Thus, one rule for h1 tags can apply to many tags at once (and in the case of external style sheets, the rule can apply to many tags at once on many different pages), as shown in the following graphic:

In this way, CSS provides extremely easy update capability. When you update a CSS rule in one place, the formatting of all the elements that use the defined style are automatically updated to the new style.

You can define the following types of styles in Dreamweaver:

Class styles let you apply style properties to any element or elements on the page.

HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.

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").

CSS rules can reside in the following locations:

External 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) style sheets are collections of CSS rules that are included in a style tag in the head portion of an HTML document. The following example defines the font size for all text in the document formatted with the paragraph tag:
<head>  <style>           p{      font-size: 9px;      }    </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. (Using Inline styles is not recommended.)

Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines. Dreamweaver also renders most applied styles directly in Design view. (Previewing the document in a browser window, however, gives you the most accurate "live" rendering of the page.) Some CSS styles are rendered differently in Microsoft Internet Explorer, Netscape, Opera, Apple Safari, or other browsers, and some are not currently supported by any browser.

TIP: To display the O'Reilly CSS reference guide included with Dreamweaver, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel.

For more information about CSS and how to use them in Dreamweaver, see Creating pages with CSS in Dreamweaver Help.

Create a new style sheet

First, you'll 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.
Select File > New.

In the New Document dialog box, make sure the Blank Page category is selected, select CSS from the Page Type column (see Figure 2), and click Create.

Figure 2. The New Document dialog box

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

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).
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.

Don't forget to include a semicolon at the end of each line, after the property values.

When you're finished, the code should look like Figure 3.

Figure 3. The finished code

Tip: For more information about any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel.
Save the style sheet.
Next you'll 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.

In the Document window, open the Cafe Townsend index.html file. (You can click its tab if it's already open.)

Select the text of the first paragraph that you pasted into the page in Part 3: Adding content to pages (see Figure 4).

Figure 4. Select the text of the first paragraph that you pasted into the page in Adding Content to Pages.

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 (<p>) tag. If the Format pop-up menu in the Property inspector says None, or something else, select Paragraph to format the paragraph (see Figure 5).

Figure 5. Select Paragraph to format the paragraph.

Repeat step 3 for the second paragraph.

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

Figure 6. Click the Attach Style Sheet button in the CSS Styles panel.

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.

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.

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 Styles 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.

Click plus (+) to expand the <style> tag category if it isn't already expanded.

Click the body rule (see Figure 7).
The background-color property with a value of #000000 appears in the Properties pane below.

Figure 7. The background-color property in the Properties pane

Note: 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.

You set the background color for the page in Part 2: Creating the 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.

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 (see Figure 8).

Figure 8. All of the properties and values in the Properties pane

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. 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, you'll 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, as you did when you initially created the external style sheet.

Create a new CSS rule

In this section you'll 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 the Learn about CSS section earlier in this tutorial.

In the CSS Styles panel, click New CSS Rule in the lower-right corner of the panel (see Figure 9).

Figure 9. Clicking New CSS Rule in the lower-right corner of the panel

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 (see Figure 10).
Make sure that you type the period (.) before the word bold. All class styles must start with a period.

Figure 10. Selecting cafe_townsend.css from the Define In pop-up menu

Verify that cafe_townsend.css is selected from the Define In pop-up menu. (It should be selected by default.)

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.

In the CSS Rule Definition dialog box, do the following (see Figure 11):

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

Figure 11. Enter values in the CSS Rule Definition dialog box.

Tip: For more information on any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel.

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 isn't already expanded.

You'll 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 rule's properties appear in the Properties pane. The new rule also appears in the Style pop-up menu in the Property inspector.

Apply a class style to text

Now that you've created a class rule, you'll apply it to some paragraph text.

In the Document window, select the first four words of text in the first paragraph: Cafe Townsend's visionary chef.

In the Property inspector (Window > Properties), select bold from the Styles pop-up menu (see Figure 12).

Figure 12. Select bold from the Styles pop-up menu.

The bold class style is applied to your text.

Repeat step 2 to apply the bold class style to the first four words of the second paragraph (see Figure 13).

Figure 13. Apply the bold class style to the first four words of the second paragraph.

Save your page.

Format the navigation bar text

Next you'll 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.

Create a New Rule for the Navigation
Open the cafe_townsend.css file if it isn't 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 Figure 14.

Figure 14. This is what the code in the file should look like.
Save the cafe_townsend.css file.
Next, you'll use the CSS Styles panel to add properties to the rule.

Open the index.html file if it isn't already open.

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

Figure 15. Select the new .navigation rule and click Edit Style in the lower-right corner of the panel.

In the CSS Rule Definition dialog box, do the following (see Figure 16):

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

Figure 16. Enter the values for the .navigation rule.

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

Click OK.

Now you'll use the CSS Styles panel to add a few more properties to the .navigation rule.

In the CSS Styles panel, make sure the .navigation rule is selected and click Show List View (see Figure 17).

Figure 17. 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 you've already set).

Scroll down and 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. You can also resize columns by dragging them from side to side.

Enter #993300 as the hexadecimal value (see Figure 18), and press Enter (Windows) or Return (Macintosh).

Figure 18. Enter #993300 as the hexadecimal value for the background-color.

Tip: 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, you'll see that Dreamweaver writes the CSS code in the style sheet at the same time.

Locate the display property (you'll need to scroll down more), click once in the column to the right, and select block from the pop-up menu (see Figure 19).

Figure 19. Set the display to block.

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

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).

Click Show Only Set Properties so that only your set properties appear in the Properties pane (see Figure 20).

Figure 20. Click Show Set Properties so that only your set properties appear in the Properties pane.

Click the cafe_townsend.css file to display it. You'll see that Dreamweaver has added all of the properties you specified to the file.

Save the cafe_townsend.css file and close it.

You've now created a rule to format the navigation bar text. Next you'll apply the rule to the selected links.

Apply the Rule

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

Figure 21. Click the word Cuisine so that the insertion point is somewhere in the word.

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

Figure 22. Select all of the text for the specified <a> tag.

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 (see Figure 23).

Figure 23. The Cuisine text formatted as a navigation bar button

Repeat steps 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 it's important that you use the tag selector to select each link individually, and then assign the class styles one at a time.

Figure 24. Repeating the steps for each of the individual links in the navigation bar

If you're 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).

When you've 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 the links to make sure they work.

Add a Rollover Effect

Next you'll 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.

Note: 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 rule's properties.

Open the cafe_townsend.css file.

Select the entire .navigation rule (see Figure 25).

Figure 25. Select the entire .navigation rule in the cafe_townsend.css file.

Copy the text (Edit > Copy).

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

Figure 26. Create some space after the .navigation class.

Paste (Edit > Paste) the copied text in the space you just created.

Add the :hover pseudo-class to the pasted .navigation selector as shown in Figure 27.

Figure 27. Add the :hover pseudo-class.

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

Figure 28. Replace the background-color for the new .navigation:hover rule.

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, you'll use the tag selector to select all of the HTML in the document, and center the document's contents.

Note: Some browsers (such as Internet Explorer 6), center the page's text within the context of the table cells when you use the method described in this section. If you don't 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 left-aligned.

With the index.html page open in the Document window, click the <body> tag in the tag selector (see Figure 29).

Figure 29. 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.

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

Figure 30. Center the body of the document.

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.

Save the page.

That's it. Your page is finished. The last task of building your website is to publish the page. For this task, you must define a folder on a remote site and upload your files to that folder. For instructions, continue with the next installment in this tutorial series, Part 5: Publishing your site. This lesson is at Adobe, since we will not be pulblishing our sites at school.

About the author

Jon Michael Varese is a Senior Technical Writer at Adobe, and Lead Writer for Dreamweaver. He has written web and print documentation for Dreamweaver, Fireworks, FreeHand, Flash, and ColdFusion. In the past he has held such illustrious positions as baker, clown, and funeral attendant. In addition to writing web tutorials, he is currently at work on his Ph.D. in 19th-century British Literature.

Top