Dreamweaver Getting Started: Formatting pages with CSS

css|dreamweaver| page

This article describes how to use cascading style sheets (CSS) in Dreamweaver to format text in a page. You can use CSS to format text and position text in ways that HTML cannot provide, allowing you to control the appearance of the page more flexibly.

　　Understanding CSS

Cascading Style Sheets (CSS) are a series of formatting rules that control the appearance of Web page content. When you use CSS to format page formats, content and presentation are separated from each other. The page content (HTML code) is located in its own HTML file, and the CSS rules that define the code representation are located in another file (an external style sheet) or another part of the HTML document (usually part). Using CSS can be very flexible and better control the appearance of the page, from the precise layout to specific fonts and styles and so on.

CSS allows you to control many properties that are only uncontrolled by using HTML. For example, you can specify different font sizes and units (pixels, points, and so on) for the selected text. You can also ensure that the page layout and appearance are handled more consistently in multiple browsers by using CSS to set the font size in pixels.

The CSS formatting rules consist of two parts: selectors and declarations. A selector is a term that identifies a formatted element, such as a P, H1, class name, or ID, and a declaration is used to define a STYLE element. In the following example, H1 is a selector, and all content between braces ({}) is declared:

H1 {

Font-size:16 pixels;

Font-family:helvetica;

Font-weight:bold;

}

Declarations are made up of two parts: attributes (such as font-family) and values (such as Helvetica). The above example creates a style for the H1 tag: The text of all H1 labels linked to this style will be 16 pixel size and use Helvetica font and bold.

The term "cascade" refers to the ability to apply multiple styles to the same element or Web page. For example, you can create a CSS rule to apply a color, create another rule to apply the margins, and then apply both to the same text on a page. The styles you define "cascade" to the elements on your Web page and ultimately create the design you want.

The main advantage of CSS is that it is easy to update, and whenever you update a CSS rule, the formatting of all documents that use that definition style is automatically updated to the new style.

The following rule types can be defined in Dreamweaver:

Custom CSS rules, also known as Class styles, enable you to apply style attributes 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 paragraph text in part of the defined style.

HTML tagging rules redefine the format of a particular label, such as P or H1. When you create or change a CSS rule for a H1 label, all text formatted with the H1 label is updated immediately.

CSS selector rules (advanced styles) redefine the format of a particular element combination, or other CSS-enabled selector formats (for example, the selector TD H2 is applied whenever the H2 caption appears in a table cell). Advanced styles can also redefine the format of a label that contains 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 a style in an external style sheet, you can control the appearance of multiple web pages in one central location without having to set the style 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). Using the links in the Head section of the document, the. css file is linked to one or more pages in the Web site.

An internal (or embedded) CSS style sheet is a series of CSS rules that are contained within the style label in the head section of the HTML document. For example, the following example defines the font size for all text in a document that has a paragraph label set:

<style> p{ font-size:80px } </style>

Inline styles are defined in a specific label instance in an HTML document. For example, the <p style="font-size: 9px"> font size is defined only for paragraphs formatted with labels that contain inline styles.

Dreamweaver renders most of the 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 style is applied. Some CSS style attributes do not look the same in Microsoft Internet Explorer, Netscape Navigator, Opera, and Apple Safari.

Select "File" > "new".

In the New Document dialog box, in the Categories column, select Basic page, select CSS in the Basic Page column, and then click Create.

　　

A blank style sheet appears in the document window. The Design view and code view buttons have been disabled. A CSS style sheet is a plain text file and its contents will not be used for viewing in a browser.

Save the page ("File" > "save") as Cafe_townsend.css.

When you save the style sheet, be sure to save it to the Cafe_townsend Folders folder (the root folder of your Web site).

Type the following code in the style sheet:

p{ Font-family:verdana, Sans-serif; font-size:11px; Color: #000000; line-height:18px; padding:3px; }

When you type the code, Dreamweaver will use code hints to suggest some options for you to help you finish typing. Press the Enter key (Windows) or Return key (Macintosh) when you see the code you want Dreamweaver to complete for you.

Don't forget to add a semicolon after the property value at the end of each line.

The completed code is similar to the following example:

　　

To display the guide, select Help > References and choose O ' Reilly CSS Reference from the pop-up menu in the reference panel. Save the style sheet.

　　Attach 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 a cafe_townsend.css style sheet to a index.html page, the formatting of all paragraph text (text formatted with the label in the HTML code) is set according to the CSS rules that you define.

In the document window, open the index.html file for Cafe Townsend. (If the file is open, click its tab.) )

Select the first paragraph of text to be pasted into the page in the tutorial: adding content to the page.

　　

View in the property inspector and make sure that the paragraph is formatted with paragraph labels.

If paragraph is displayed in the Format pop-up menu in the property inspector, the paragraph is formatted with paragraph labels. If the format pop-up menu in the property inspector displays none or anything else, select paragraph to format the paragraph.

　　

Repeat step 3rd 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 that you created in the previous section.

Click OK.

The text in the document window is formatted according to the CSS rules in the external style sheet.

　　Research the CSS Styles panel

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

Make sure the Index.html page opens in the document window.

In the CSS Styles Panel (Window > CSS styles), click All in the top section of the panel, and then check your CSS rules.

In all mode, the CSS panel shows you all of the CSS rules that are applied to the current document, whether they are in an external style sheet or in their own document. You should see two main categories in the All Rules pane: one <STYLE> label category and one cafe_townsend.css category.

If you do not expand the <STYLE> label category, click the plus sign (+) to expand the category.

Click the Body rule.

The Background-color property with a value of #000000 appears in the Properties pane below.

　　

Note You may want to collapse other panels, such as the files panel, to see the full CSS styles panel, and you can change the length of the CSS styles panel by dragging the boundaries between the panes.

You set the background color of a page by using the Modify Page Properties dialog box in the Tutorial: creating a Table-based page layout. When you set page properties in this way, Dreamweaver writes a CSS style that is placed inside the document.

Click the plus sign (+) to expand the Cafe_townsend.css category.

Click the P rule.

All the properties and values that are defined for the P rule in an external style sheet are displayed in the Properties pane below.

　　

In the document window, click once in any of the two paragraphs that you just formatted.

In the CSS styles panel, click Current at the top of the panel, and then check your CSS style. In current mode, the CSS panel shows you a summary of the properties of the current selection. The properties displayed correspond to the properties of the P rule in an external style sheet.

In the next section, you will create a new rule using the CSS styles panel. Creating a new rule using the CSS styles panel is much easier than typing a rule manually, which is the same as when you originally created an external style sheet.

　　Create a new CSS rule

In this section, you will use the CSS styles panel to create a custom CSS rule or class style. Class styles allow you to set style properties for any range or block of text, and can be applied to any HTML tag. For more information about 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.

In the Name text box, enter. Bold.

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. The 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 thickness pop-up menu.

In the Color text box, enter the #990000.

　　

Tip For more information about CSS properties, see the O ' Reilly Reference Guide contained in Dreamweaver. To display the guide, select Help > References and choose O ' Reilly CSS Reference from the pop-up menu in the reference 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.

As you can see, Dreamweaver has 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 of the property Inspector.

　　Apply a class style to text

Now you have created a class rule and applied the rule to some paragraph text.

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

In the Property Inspector (Window > Properties), choose Bold from the Style pop-up menu. "

　　

The Bold class style will be applied to your text.

Repeat step 2nd to apply the Bold class style to the first four words in the second paragraph.

　　

Save the page.

　　Format navigation Bar Text

Next, you will use CSS to apply styles to the link text of the navigation bar. Many Web pages use colored rectangular images that contain text to create navigation bars. However, if you use CSS, you need to set only 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 having to use an additional image.

　　Create a new rule for navigation

If the Cafe_townsend.css file is not open, open the file, or click its tab to display the file.

Define a new rule by typing the following code after the. Bold class style of the file:

. Navigation {

}

This is an empty rule.

The code in the file should resemble the following example:

　　

Save the Cafe_townsend.css file.

Next, you will use the CSS styles panel to add properties to the rule.

If the index.html file is not open, the file is opened.

In the CSS styles panel, make sure all mode is selected, select the new. Navigation rule, and then click Edit Style 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.

Choose 16 from the Size pop-up menu, and then select pixels from the pop-up menu immediately to the right.

Choose Normal from the Style pop-up menu.

Select None from the grooming list.

Choose Bold from the thickness pop-up menu.

In the Color text box, enter the #FFFFFF.

　　

To display the guide, select Help > References and choose O ' Reilly CSS Reference from the pop-up menu in the reference panel.

Click OK.

You will now use the CSS styles panel to add more properties to the. Navigation rule.

In the CSS styles panel, make sure that the. Navigation rule is selected, and then click Show List View.

　　

List view enables the Properties pane to display all available properties in alphabetical order (unlike the set properties view, the Settings Properties view displays only the properties that have been set).

Click the column to the right of the Background-color property.

To see the full contents of a property, rest the mouse pointer on the property.

Enter the hexadecimal value #993300, and then press ENTER (Windows) or the return key (Macintosh).

　　

Tip To see how your work affects an external style sheet, keep the Cafe_townsend.css file open in the document window as you work. When you make a selection in the CSS styles panel, you will also see Dreamweaver writing CSS code in the style sheet.

Locate the Display property (you may need to scroll down), click once in the column to the right, and then select Block from the pop-up menu.

　　

Locate the Padding property, click once in the column to the right, enter a value of 8px, and then 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 the pixel from the pop-up menu, and then press Enter (Windows) or return (Macintosh).

Click Show Settings properties to display only the properties that you set in the Properties pane.

　　

Click the cafe_townsend.css file to display the file. You will see that Dreamweaver has added all the properties you specified to the file.

Save and close the Cafe_townsend.css file.

You have now created a rule that sets the text format of the navigation bar. Next, you apply the rule to the selected link.

　　Apply Rule

Open the Index.html page in the document window, and click the Word cuisine to place the insertion point somewhere in the word.

　　

In the label selector, click the rightmost label.

This action will be the specified label or link to select all text.

　　

In the Property Inspector (Window > properties), choose Navigation from the Style pop-up menu. "

In the document window, the appearance of the cuisine text changes completely. The format of the text is now set to the navigation bar button, depending on the property that you defined for the. Navigation rule in the previous section.

　　

Repeat steps 1th through 3rd for each link in the navigation bar.

you must for each a label or link assigns a navigation class style, so it is important to use the tag Selector to select each link individually, and then assign a class style to each link individually.

　　

If you have difficulty setting the formatting of the linked text, make sure that there are spaces (not carriage returns) between the words that are linked to each (or each group). Also make sure that the spaces between the two links are not linked by themselves. If the space is linked, be careful to select a space for the link, clear the Link text box in the property inspector, and press Enter (Windows) or Return key (Macintosh).

When you have finished formatting all the words for the navigation bar, save the page, and then preview your work in the browser (File > preview in browser).

You can click the link to make sure it works.

　　Add Mouse effect

Now you will add a mouse effect so that the background color of the navigation bar changes color each time the mouse pointer passes over a link. To add a mouse effect, add a new rule that contains: hover pseudo classes.

About... About: The hover pseudo class pseudo class is a way of affecting some elements in an HTML document, not based on the HTML code of the document itself, but on other external conditions based on the Web browser application. Pseudo classes can be dynamic, which means that elements on the page may acquire or lose pseudo classes when the user interacts with the document.

When the user rests the mouse pointer over a formatted page element,: The hover pseudo class affects the element's changes. For example, when you add a: hover pseudo class to a. Navigation class style (. navigation:hover) to create a new rule, all of the. Navigation:hover rules are based on the. Navigation The text element that the rule formatting will change.

Open the Cafe_townsend.css file.

Select the entire. Navigation rule.

　　

Copy text (Edit > Copy).

Click at the end of the rule, and then press the Enter key several times (Windows) or the return key (Macintosh) to create some spaces.

　　

Paste the copied text ("Edit" > "paste") 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 a #D03D03.

　　

Save and close the file.

Open the index.html file in the document window and preview the page in the browser (File > preview in browser).

When you rest the mouse pointer over any link, you can see the new mouse effect.