Dreamweaver format page text using CSS style sheets

　　Learn about 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:

　　The following are the referenced contents:

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