Dreamweaver 8 CSS Pages (New Enhanced Feauture)
Cascading Style Sheets (CSS) in Dreamweaver provides you with greater control over the appearance of your page, from precise positioning of layout to specific fonts and styles by letting you format and position text in ways that HTML cannot. 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. When you use CSS to format a page, you separate content from presentation. The content of your page--the HTML code--resides 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. 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.
Creating 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, select Basic page in the Category column, select CSS in the Basic Page column, and click Create.
- 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 thename.css.
When you save the style sheet, make sure you save it in 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; }
Creating a new CSS rule
A CSS formatting rule consists of two parts--the selector and the declaration. The selector is a term (such as 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.
The CSS Styles panel (window--> CSS styles) lets you track the CSS rules and properties affecting a currently selected page element, or the rules and properties affecting an entire document. A toggle button at the top of the CSS Styles panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and Current mode.
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 already-styled 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").
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.
You can create a CSS rule to automate the formatting of HTML tags or a range of text identified by a class attribute.
- Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box:
- In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side of the panel.
- Select Text > CSS Styles > New CSS Rule.
- Define the type of CSS style you want to create:
- To create a custom style that can be applied as a class attribute to a range or block of text, select the Class option and then enter a name for the style in the Name text box.
- To redefine the default formatting of a specific HTML tag, select the Tag option and then enter an HTML tag in the Tag text box or select one from the pop-up menu.
- To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute, select the Advanced option and then enter one or more HTML tags in the Selector text box or select one from the pop-up menu. The selectors (known as pseudo-class selectors) available from the pop-up menu are a:active, a:hover, a:link, and a:visited.
- Select the location in which the style will be defined:
- To create an external style sheet, select New Style Sheet File.
- To embed the style in the current document, select This Document Only.
- Click OK.
- Click All at the top of the CSS style panel
- Select the style options you want to set for the new CSS rule.
- When you are done setting style attributes, click OK.
Source found:
http://livedocs.macromedia.com/dreamweaver/8/using/wwhelp/wwhimpl/js/html/wwhelp.htm
|
