This article explains how to use Cascading Style Sheets (CSS) to format text on a page in Dreamweaver. You can use CSS to format and position text in ways that HTML cannot, giving you more flexibility and control over the appearance of your page.
Understanding CSS
Cascading Style Sheets (CSS) are a set of formatting rules that control the appearance of content on a Web page. When you use CSS to format a page, content and presentation are kept separate. The page content (HTML code) is in its own HTML file, while the CSS rules that define the representation of the code are in another file (an external style sheet) or another part of the HTML document (usually a section). Using CSS gives you great flexibility and greater control over the appearance of your page, from precise layout positioning to specific fonts and styles.
CSS allows you to control many properties that you cannot control using HTML alone. For example, you can specify different font sizes and units (pixels, points, etc.) for selected text. By using CSS to set the font size in pixels, you can also ensure a more consistent approach to page layout and appearance across multiple browsers.
CSS formatting rules consist of two parts: selectors and declarations. Selectors are terms that identify formatted elements (such as P, H1, class name, or ID), while declarations are used to define style elements. In the following example, H1 is the selector and everything between curly braces ({}) is a declaration:
Here is the quoted content:
H1 {
font-size:16 pixels;
font-family:Helvetica;
font -weight:bold;
}
A declaration consists of two parts: properties (such as font-family) and values (such as Helvetica). The above example creates a style for the H1 tag: the text of all H1 tags linked to this style will be 16 pixels in size and use Helvetica font and bold.
The term "cascading" refers to the ability to apply multiple styles to the same element or Web page. For example, you can create one CSS rule to apply color, another rule to apply margins, and then apply both to the same text on a page. The defined styles "cascade" onto the elements on your Web page, ultimately creating the design you want.
The main advantage of CSS is that it is easy to update; as long as one CSS rule is updated, the formatting of all documents using the defined style will automatically be updated to the new style.
The following rule types can be defined in Dreamweaver:
Custom CSS rules (also called "class styles") allow you to apply style properties to any text range or block of text. All class styles begin with a period (.). For example, you can create a class style called .red, set the rule's color property to red, and then apply the style to a portion of the styled paragraph text.
HTML tag rules redefine the format of specific tags (such as p or h1). When you create or change a CSS rule for an h1 tag, all text formatted with the h1 tag is updated immediately.
CSS selector rules (advanced styles) redefine the formatting of specific combinations of elements, or other selector forms allowed by CSS (for example, apply the selector td h2 whenever an h2 heading appears within a table cell). Advanced styles can also redefine the format of tags that contain a specific id attribute (for example, a style defined by #myStyle can be applied to all tags that contain the attribute/value pair id="myStyle").
Create a new style sheet
First, you will create an external style sheet that contains CSS rules that define paragraph text styles. When you create styles in an external style sheet, you can control the appearance of multiple Web pages simultaneously from a central location without having to set styles for each Web page individually.
CSS rules can be located in the following locations:
An external CSS style sheet is a series 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 the Web site using links in the head section of the document.
An internal (or embedded) CSS style sheet is a series of CSS rules contained within the style tag in the head section of an HTML document. For example, the following example defines the font size for all text in a document that has paragraph tags set:
:<head>
<style>
p{
font-size:80px
}
</style>
</head>：
Inline styles are defined within specific tag instances within the HTML document. For example,
"p style="font-size: 9px""
Defines the font size only for paragraphs formatted with tags containing inline styles.
Dreamweaver renders most style properties that you apply and displays them in the Document window. You can also preview the document in a browser window to see how the styles are applied. Some CSS style properties appear differently in Microsoft Internet Explorer, Netscape Navigator, Opera, and Apple Safari.
Select "File">"New".
In the New Document dialog box, select Base Page in the Category column, select CSS in the Base Page column, and then click Create.
A blank style sheet will appear in the Document window. The Design view and Code view buttons have been disabled. CSS style sheets are plain text files and their contents will not be used for viewing in a browser.
Save ("File">"Save") this page as cafe_townsend.css.
When you save your style sheet, be sure to save it to the cafe_townsend folder (the root folder of your Web site).
Type the following code in the stylesheet:
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
As you type code, Dreamweaver uses code hints to suggest options to help you complete your entry. When you see code that you want Dreamweaver to complete for you, press Enter (Windows) or Return (Macintosh).
Don't forget to add a semicolon after the attribute value at the end of each line.
The completed code will look like the following example:
To display the guide, choose Help > References, and then choose O'Reilly CSS Reference from the pop-up menu in the References panel. Save the style sheet.
Attached 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 tags in HTML code) is formatted according to the CSS rules you define.
In the Documents window, open Cafe Townsend's index.html file. (If the file is already open, click its tab.)
Select the first text you pasted into the page in Tutorial: Add content to the page.
Look in the Properties inspector and make sure the paragraph is formatted using paragraph tags.
If the Format pop-up menu in the Property inspector says Paragraph, the paragraph has been formatted using the paragraph tag. If the Format pop-up menu in the Property inspector says None or something else, 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.
In the Attach External Style Sheet dialog box, click Browse and browse to the cafe_townsend.css file created in the previous section.
Click OK.
The text in the Document window will be formatted according to CSS rules in the external style sheet.
Explore the CSS Styles panel
The CSS Styles panel lets you track CSS rules and properties that affect the currently selected page element, or affect the entire document, and modify CSS properties without opening an external style sheet.
Please make sure that 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 then check your CSS rules.
In "All" mode, the CSS panel shows you all CSS rules that apply to the current document, whether they are in an external style sheet or in the own document. You should see two main categories in the All Rules pane: a tags category and a cafe_townsend.css category.
If the label category is not expanded, click the plus sign (+) to expand the category.
Click on the body rule.
The background-color property with a value of #000000 appears in the lower Properties pane.
Note that you may need to collapse other panels, such as the File panel, to see the full CSS Styles panel, and you may also change the length of the CSS Styles panel by dragging the border between the panes.
You set the page's background color in Tutorial: Creating a Table-Based Page Layout by using the Modify Page Properties dialog box. When you set page properties in this way, Dreamweaver writes a CSS style that is built into the document.
Click the plus sign (+) to expand the cafe_townsend.css category.
Click pRule.
All properties and values defined in the external style sheet for the p rule will appear in the Properties pane below.
In the Document window, click once anywhere in the two paragraphs you just formatted.
In the CSS Styles panel, click Current at the top of the panel, and then inspect your CSS styles. In Current mode, the CSS panel shows you a summary of the properties of the current selection. The properties shown correspond to the properties of the p rule in the external style sheet.
In the next section, you'll use the CSS Styles panel to create a new rule. Creating new rules using the CSS Styles panel is much easier than typing the rules manually, just like when you originally created an external style sheet.
Create new CSS rules
In this section, you use the CSS Styles panel to create a custom CSS rule or class style. Class styles allow you to set the style properties of any range or block of text and can be applied to any HTML tag. For more information about the different types of CSS rules, see Understanding CSS.
In the CSS Styles panel, click New CSS Rule in the lower right corner of the panel.
In the New CSS Rule dialog box, select Class from the Selector Type option. This option should be selected by default.
Enter .bold in the Name text box.
Make sure to type a period (.) before the word "bold". All class styles must begin with a period.
In the "Define in" pop-up menu, select cafe_townsend.css. This file 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:
In the "Font" text box, enter Verdana, sans-serif.
In the Size text box, enter 11 and select Pixels in the pop-up menu immediately to the right.
In the Row Height text box, enter 18 and select Pixels in the pop-up menu immediately to the right.
Choose Bold from the Weight pop-up menu.
In the Color text box, enter #990000.
Tip For more information about CSS properties, see the O'Reilly Reference Guide included with Dreamweaver. To display the guide, choose Help > References, and then choose O'Reilly CSS Reference from the pop-up menu in the References panel.
Click OK.
Click the All button at the top of the CSS Styles panel.
If the cafe_townsend.css category is not expanded, click the plus (+) button next to the category.
You can see that Dreamweaver has added the .bold class style to the list of rules defined in the external style sheet. If you click a .bold rule in the All Rules pane, the properties for the rule appear in the Properties pane. The new rules also appear in the Style pop-up menu of the Property inspector.
Apply class style to text
Now you have created a class rule and applied it to some paragraph text.
In the Document window, select the first four words of the text in the first paragraph: Cafe Townsend's visionary chef.
In the Property inspector (Window > Properties), choose bold from the Style pop-up menu.
A "bold" style style will be applied to your text.
Repeat step 2 to apply the "bold" style style to the first four words of the second paragraph.
Save the page.
Format the navigation bar text
Next, you'll use CSS to apply styles to the navigation bar's link text. Many Web pages use colored rectangular images with embedded text to create navigation bars. However, if you use CSS, all you need to set is the link text and some formatting. By using the display: block property and setting the width of the block, you can effectively create a rectangle without using an additional image.
Create a new rule for navigation
Open the cafe_townsend.css file if it is not already open, or click its tab to display the file.
Define a new rule by typing the following code after the .bold class style in the file:
.navigation {
}
This is an empty rule.
The code in the file should look like the following example:
Save the cafe_townsend.css file.
Next, you'll use the CSS Styles panel to add properties to the rule.
If the index.html file is not open, open the file.
In the CSS Styles panel, make sure All mode is selected, select the new .navigation rule, and click Edit Styles in the lower right corner of the panel.
In the "CSS Rule Definition" dialog box, do the following:
In the "Font" text box, enter Verdana, sans-serif.
Select 16 from the Size pop-up menu, then select Pixels from the pop-up menu immediately to the right of it.
Select Normal from the Style pop-up menu.
Select None from the Modification list.
Choose Bold from the Weight pop-up menu.
In the Color text box, enter #FFFFFF.
To display the guide, choose Help > References, and then choose O'Reilly CSS Reference from the pop-up menu in the References panel.
Click OK.
Now you'll use the CSS Styles panel to add more properties to the .navigation rule.
In the CSS Styles panel, make sure the .navigation rule is selected, and then click Show List View.
List view causes the Properties pane to display all available properties in alphabetical order (unlike the Set Properties view, which only displays properties that have been set).
Click in the column to the right of the background-color property.
To see the complete contents of a property, rest the mouse pointer over the property.
Enter the hexadecimal value #993300 and press Enter (Windows) or Return (Macintosh).
Tip To see the impact of your work on an external style sheet, keep the cafe_townsend.css file open in the Document window as you work. When you make selections in the CSS Styles panel, you'll also see Dreamweaver write CSS code in the style sheet.
Find the display property (you may need to scroll down), click once in the right column, and select block from the pop-up menu.
Find the padding property, click once in the right column, enter a value of 8px, and press Enter (Windows) or Return (Macintosh).
Find the width property, click once in the right column, enter 140 in the first text box, select Pixels from the pop-up menu, and press Enter (Windows) or Return (Macintosh).
Click Show Settings Properties to display only the properties you set in the Properties pane.
Click the cafe_townsend.css file to display it. You'll see that Dreamweaver has added all the properties you specified to the file.
Save and close the cafe_townsend.css file.
Now you have created a rule that formats the navigation bar text. Next, you'll apply the rule to the selected links.
Apply rules
With the index.html page open in the Document window, click the word Cuisine to place the insertion point somewhere in the word.
In the label selector, click the rightmost label.
This operation will select all text for the specified label or link.
In the Property inspector (Window > Properties), select Navigation from the Style pop-up menu.
In the Document window, the appearance of Cuisine text has completely changed. The text is now formatted as a navigation bar button based on the properties you defined for the .navigation rule in the previous section.
Repeat steps 1 through 3 for each link in the navigation bar.
You must assign a navigation class style to each label or link, so it is important to select each link individually using the label selector and then assign a class style to each link one by one.
If you have trouble formatting link text, make sure there are spaces (not carriage returns) between each (or group of) linked words. Also make sure that the space between the two links is not itself linked. If the spaces are linked, carefully select the linked spaces, clear the Link text box in the Property inspector, and press Enter (Windows) or Return (Macintosh).
When you've finished formatting all the words in the navigation bar, save the page and preview your work in a browser (File > Preview in Browser).
You can click on the link to make sure it works.
Add mouseover effect
Now you'll add a rollover effect that causes the background color of the navigation bar to change each time the mouse pointer passes over a link. To add a mouseover effect, add a new rule containing the :hover pseudo-class.
About... About:hover Pseudo-classes Pseudo-classes are a way to affect certain elements in an HTML document, not based on the HTML code of the document itself, but based on other external conditions applied by the Web browser. Pseudoclasses can be dynamic, which means that as the user interacts with the document, elements on the page may gain or lose pseudoclasses.
The :hover pseudo-class affects changes to a formatted page element when the user hovers the mouse pointer over the element. For example, when you add the :hover pseudo-class to a .navigation class style (.navigation:hover) to create a new rule, all text elements formatted with the .navigation rule will change based on the properties of the .navigation:hover rule.
Open the cafe_townsend.css file.
Select the entire .navigation rule.
Copy text ("Edit">"Copy").
Click once at the end of the rule, and then press Enter (Windows) or Return (Macintosh) a few more times to create some space.
Paste ("Edit" > "Paste") the copied text into the space you just created.
Add the :hover pseudo-class to the pasted .navigation selector as follows:
In the new .navigation:hover rule, replace the current background color (#993300) with #D03D03.
Save and close the file.
Open the index.html file in the Document window and preview the page in a browser (File > Preview in Browser).
When you rest the mouse pointer on any link, you can see the new mouseover effect.