What You’ll Do
Cascading Style Sheets are one of the greatest things to come along since the creation of the World Wide Web. A hard definition of CSS might go something like this: Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of the content in a Web page.
Using CSS styles to format a page separates content from presentation. This gives you greater flexibility and control over the exact appearance of your Web pages. With CSS you can control text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color, link color and underlining. With CSS controlling fonts, it ensures a more consistent treatment of your page layout and appearance in multiple browsers.
In this chapter you’ll get an introduction to Cascading Style Sheets: what they are, and how to use them efficiently to create great Web content. You’ll also learn how CSS functions, and how it’s used to control multiple Web pages.
With Dreamweaver and Cascading Style Sheets we’re getting closer and closer to the goal of What You See Is What You Get, and I can’t wait.
Cascading Style Sheets (CSS) are a revolution in the world of web design. Some of the benefits include:
• The layout of many documents from one single style sheet
• Precise control of layouts
• Application of different layout to different media-types (screen, print, etc.)
• Many advanced and sophisticated techniques
Many of the CSS properties are similar to those of HTML. Therefore, if you are comfortable designing Web pages using HTML code, you will most likely recognize many of the codes.
If you wanted to change the color of the background of a Web page, the HTML code would look like this:
<body bgcolor="#0000FF">
To write the same thing using CSS, would look like this:
body {background-color: #0000FF;}
Incidentally, the code, in both cases, is instructing the browser to paint the background in pure blue.
Cascading Style Sheets are broken down into three sections: a selector, a property, and a value. In our example, body is the selector, background-color is the property, and #0000FF is the value.
There are three ways you can apply CSS to an HTML document: Attributes, Tags, and External Style Sheets.
One way to apply CSS to HTML is by using the HTML attribute style. CSS used in this way is coded directly into the HTML document. For example, you can create your own named tags, and use them throughout the active document. Building on the above example, it can be applied like this:
<html>
<head>
<title>Attribute Style Example<title>
</head>
<body style="background-color: #0000FF;">
<p>This page has a blue background</p>
</body>
</html>
Note
Attribute styles are a one-shot deal. That is, they are applied to single areas of an HTML document such as a background color, or a specific portion of text.
A second way to include CSS into an HTML document is to use the Tag Style method. In this method you control the formatting of standard HTML tags. For example, you could redefine the <H1> heading tag to always use a specific font, size and justification or, in this example, use the <body> tag to paint the background blue.
<html>
<head>
<title>Tag Style Example<title>
<style type="text/css">
body {background-color: #0000FF;}
</style>
</head>
<body>
<p>This page has a blue background</p>
</body>
</html>
Note
A Tag style changes all instances of an HTML tag throughout the active document, but will not impact other Web documents.
This is the recommended way to create styles. Using this method you create a text document (called a style sheet). This document contains all of the formatting information necessary to drive your Web page. This document is then attached to one or more Web pages, and when the page loads, it gets its formatting information from the external style sheet. The line of code must be inserted in the header section of the HTML code between the <head> and </head> tags. Like this:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>This page has a blue background</p>
</body>
</html>
In the example, and external style sheet (basically, a text document) called style.css is used to format the active Web document.
With all this talk of selectors, attributes, and values, you might assume that we’re about to leave the Design mode of Dreamweaver and go back to the basics of straight HTML coding. Well, you can do that, if you choose; however, as you’re about to find out, creating Cascading Styles Sheets is not difficult at all. As a matter of fact, Dreamweaver does most of the work for you. Now, isn’t that nice of Adobe to provide us with so much help.
There are four types of styles, and as you might guess, each one performs a specific function when using Cascading Style Sheets. The four types of Styles are as follows:
• Class. Creates a custom style that can be applied as a class attribute to a range or block of text.
Note
Class names must begin with a period and can contain any combination of letters and numbers. If you don’t enter a beginning period, Dreamweaver will enter it for you.
• ID. Creates a style and attaches it to a current HTML tag that contains a specific ID attribute.
Note
ID names must begin with a pound (#) sign and can contain any combination of letters and numbers. If you don’t enter a beginning period, Dreamweaver will enter it for you.
• Tag. Redefines a current style and attaches it to a current HTML tag. For example, changing the <body> tag so that each time it’s applied the text is red.
• Compound. Defines specific formatting for a particular combination of tags or for all tags that contain a specific ID attribute. The selectors available from the pop-up menu are a:active, a:hover, a:link, and a:visited.
If you’re not sure where to start, you can create a Web page that already contains a CSS Layout. Dreamweaver includes over 30 different CSS layouts. The CSS layouts are divided into 4 categories based on the page’s column width: Fixed, Elastic, Liquid, or Hybrid. Each of the built-in CSS layouts includes extensive comments that explain the layout, so beginning and intermediate designers can learn quickly. After you select a CSS layout, you need to select the location (add to HTML head, create new file, or link to existing file) for the layout’s CSS style sheet. A CSS layout can also be a starting point to create your own custom template, which you can add to the list of layouts in the New Document dialog box.
Click the File menu, and then click New.
The New Document dialog box opens.
Click the Blank Page category.
Select the Page Type you want.
Select from the following CSS Layouts:
• Fixed. Column width is fixed (in pixels) and remains the same in a browser.
• Elastic. Column width is set relative to the size of the text in a browser (in ems).
• Liquid. Column width is set based on the percentage of the browser’s width.
• Hybrid. Columns are set to a combination of Fixed, Elastic, and Liquid.
Click the DocType popup, and select the option you want.
Click the Layout CSS popup, and select the option you want:
• Add To Head. Adds CSS for the layout to the head of the new page.
• Create New File. Add CSS for the layout to a new external CSS style sheet that attaches to the new page.
• Link To Existing File. Attaches an existing CSS file to the new page.
If you selected the Link To Existing File option in the Layout CSS popup menu, click the Attach Style Sheet icon, select the CSS file you want in the Attach External Style Sheet dialog box, and then click OK.
Click Create.
If you selected the Create New File option in the Layout CSS popup menu, enter a name for the new external file in the Save Style Sheet File As dialog box.
Click the File menu, and then click New.
The New Document dialog box opens.
Select from the following methods:
• Blank. Click the Blank Page category, and then click CSS.
• Sample. Click the Page from Sample category, click CSS Style Sheet, and then select the sample you want.
Click Create.
DW 8.4
As mentioned in the last section, CSS can be applied to an HTML document in one of three ways: Attributes, Tags, or Externally. Although we will cover all three methods in this section, it’s important to understand that the external method gives you the most control over the styles, once they’ve been created. In the other two methods, the CSS styles created only apply to that one specific page, and changes to the styles must be performed by reopening the page. The external method is like creating a text document of how you want a page or pages to display. Any changes to the formatting are performed to the text document. When the Web page opens, and any changes made to the external document are immediately reflected in the active page... now that’s what I call control.
Open the Web page you want to create a CSS style.
Click the Format menu, point to CSS Styles, and then click New.
Click the Selector Type popup and then select a CSS style type:
• Attribute Style. Select Class, click the Name arrow, and then select a style name, or type one in. Attribute style tags must begin with a period.
• Tag Style. Select Tag, click the Name arrow, and then select an HTML tag (in this example, body).
Click the Define In popup, and, and then click (This Document Only).
Click OK.
Select a category, and then set the properties you want for the CSS style.
Click OK.
Open the Web page you want to create an external CSS style.
Click the Format menu, point to CSS Styles, and then click New.
Click the Class or Tag option (in this example, tag).
Click the Name arrow, and then select an HTML tag (in this example, body.)
Click the Define In popup, and then click New Style Sheet File.
Click OK.
Enter the file name for the CSS style in the Save As input box.
Leave the other options at their default values, and then click Save.
Note
Dreamweaver creates a folder in the active site called, CSS, and this is where all style sheets should be saved.
Select a category, and then set the properties you want for the CSS style.
Click OK.
See Also
See “Setting CSS Properties” on page 224 for information on setting CSS properties for a rule.
DW 8.4
Cascading Style Sheets function and perform just like their counterparts in word-processing applications. For example, you could create a character style in Microsoft Word that specifies text be Garamond, 12 point, bold, and the color black. When the style is applied to the text it will immediately take on those characteristics. If you access the style and change it (for example, change the color to red), all text associated with that style would change. CSS works the same way: You create a style for the text and apply the style to the Web document. Changing the style would subsequently change all text associated with that particular style. However, the difference between word-processing styles and CSS styles is that paragraph and character styles are one in the same. For example, if you select a word or group of words and apply a CSS style, the style is applied only to the selected text (also called an inline style). However, if you click within a paragraph (add an insertion point), the CSS style is applied to the entire paragraph. Generally, inline styles are frowned upon because of the amount of effort it takes to apply and modify the items on an item-by-item basis. Instead, you can convert an inline style to a CSS rule located in the head of the page or in an external style sheet, which is cleaner and easier to use.
Open the Web page you want to apply a paragraph style.
Click within a specific paragraph, to create an insertion point.
Click the Format menu, point to CSS Styles, and then select a user-defined CSS style.
Timesaver
In the Properties panel, click CSS, click the Target Rule popup, and then select the CSS style you want.
The CSS style is applied to the entire paragraph.
Open the Web page you want to apply a character style.
Select a word or words within the text document.
Click the Format menu, point to CSS Styles, and then select a user-defined CSS style.
The CSS style is applied to the selected text.
Open the Web page with the style you want to change.
Click the View menu, and then click Code.
Select the entire <style> tag that contains the inline CSS you want to convert.
Right-click (Win) or Control-click (Mac) the selection, point to CSS Style, and then click Convert Inline CSS To Rule.
Click the Convert to popup, select a convert type, and then enter a class name for the new rule.
Specify a style sheet or select the head of the document as to where you want the new CSS rule.
Click OK.
DW 8.4
When you start to modify an external style sheet, you really begin to see the awesome power of using CSS. An external style sheet normally contains all of the formatting options for one or more Web pages. When you attach the style sheet to the document, the style sheet controls the formatting of the document. For example, if you had a style sheet that modified the <body> tag to use the Helvetica font, centered, and 12 point, when the style sheet was attached to the HTML document, all text defined by the <body> tag would change, according to the rules set up by the style sheet. Since the style sheet is only a text document it’s easy to make changes (they can even be made in a text editor). For example, you could access the style sheet and change the formatting of the text from centered to left, and then save the style sheet. The next time the Web page opens, all the <body> tag text will be left justified. In addition to this power, you can use more than one style sheet within a Web page. For example, you can have a style sheet that defines all your headings, one that defines the look of the page, and another that defines body text. Cascading Style Sheets separate the page content from the formatting, and give you total control over your designs.
Open the Web page you want to attach an external style sheet.
Click the Format menu, point to CSS Styles, and then click Attach Style Sheet.
Select from the following options:
• File/URL. Enter the path and file name of the external style sheet, or click Browse to select a file.
• Add As. Click the Link option to create a link from the page to the external style sheet (recommended), or click the Import option to write the style sheet directly into the page.
• Media. Click the Media arrow to select the media type associated with this particular page (Default: All).
• Preview. Click Preview to view the effects of the external style sheet on your page.
Click OK.
Open the Web page you want to modify an external style sheet.
Any associated files, such as an external style sheet and scripts, with the main document are automatically available on the Related Files toolbar (New!).
Click the external style sheet file on the Related Files toolbar (New!).
Modify the document to reflect the changes required.
Click the File menu, and then click Save.
To view the main document, click Source Code on the Related Files toolbar.
When you display the main document, the formatting reflects the changes made to the attached style sheet.
Did You Know?
You can use a Dreamweaver sample style sheet. Dreamweaver provides sample style sheets you can apply to your Web pages or use it as a starting point to create your own style sheet. Click the Window menu, click CSS Styles, click the Attach Style Sheet button, click the Sample Style Sheets link, select the sample style sheet you want, click Preview to apply it to the current Web page, and then click OK.
You can remove a style from any tag, you can delete the redefined tag, or you can even edit the existing style to reflect different formatting. Once again this reflects the versatility of using style sheets over standard HTML coding. When you remove a style from a Web document the item or text will revert back to its original formatting. For example, if you remove a style from a section of body text, the text will revert back to the default for that particular tag. If, however, you have an external style sheet attached to a document, and you have applied a local class or attribute (internal) style to the text, when you remove the localized style, the text will revert back to the rules supplied by the external style sheet.
Open the Web page you want to remove an internal style.
Select the stylized text, or place the insertion point in a paragraph containing stylized text.
Click the Format menu, point to CSS Styles, and then click None.
The CSS style is removed from the selected text.
Did You Know?
You can rename a CSS class style. Click the Window menu, click CSS Styles, right-click (Win) or control-click (Mac) the CSS class style you want to rename in the CSS Styles panel, click Rename Class, enter a new name, and then click OK.
Dreamweaver gives you complete control over internal and external styles with the CSS Styles panel. The CSS Styles panel lists all the internal and external styles attached to the active Web page. In addition to displaying the styles, known as rules, the CSS Styles panel gives you the ability to attach style sheets, modify existing styles (internal or external), and even remove styles.
Open the Web page that contains the stylized text you want to view.
Click the Window menu, and then click CSS Styles or click the CSS button in the Properties panel.
The following options are available on the CSS Styles panel:
• All or Current. Shows all of the active document’s style rules, or just the currently selected rule.
• Rules Window. Displays a list of the active document’s rules.
• Properties Window. Displays a list of the properties for the rule selected in the Rules window.
• Show Category View. Displays the properties for the selected rule by categories.
• Show List View. Displays the properties for the selected rule in List view (color, font, etc).
• Show Only Set Properties. Displays only set properties.
• Attach Style Sheet. Attaches an external style sheet.
• New CSS Rule. Creates a new CSS rule.
• Edit Style Sheet. Opens a dialog box to edit styles.
• Unlink CSS Style Sheet. Deletes the selected rule or property.
DW 4.4, 5.3
Dreamweaver gives you complete control over internal and external styles with the CSS Styles panel and the Properties panel (New!). The CSS Styles panel lists all the internal and external styles attached to the active Web page. If you only want to work with the CSS style for the currently selected text, you can use the Properties panel. From the Properties panel, you can display or change the selected target rule, edit the rule definition, access the CSS Styles panel, and change text style formatting. When you change CSS rules, the rule properties are updated in the head of the document or to an external style sheet. You can quickly toggle back and forth between CSS rule properties and HTML formatting properties on the Properties panel.
Open the Web page that contains the stylized text you want to view.
Click the insertion point inside the block of text with the CSS rule that you want to edit.
Click the CSS button in the Properties panel.
The following options are available on the Properties panel:
• Targeted Rule. Displays the selected rule. You can use the popup to create new CSS rules, in-line styles, or apply existing classes to selected text.
• Edit Rule. Opens the CSS Rule Definition dialog box for the selected rule.
See “Setting CSS Properties,” on page 224 for information on available options in the CSS Rule Definition dialog box.
• CSS Panel. Opens the CSS Styles panel and displays properties for the selected rule.
• Font. Sets the font family to the selected rule.
• Size. Sets the font size to the selected rule.
• Text Color. Sets the font color to the selected rule.
• Bold. Adds bold to the selected rule.
• Italic. Adds italic to the selected rule.
• Left, Center, and Right Align. Adds alignment to the selected rule.
Open the Web page that contains the stylized text you want to view.
Select the text you want to format.
Click the HTML button in the Properties panel.
The following options are available on the Properties panel:
• Format. Sets the paragraph style.
• ID. Assigns an ID to the selection.
• Class. Displays the class style.
• Bold. Applies <b> or <strong>.
• Italic. Applies <i> or <em>.
• Unordered or Ordered List. Creates a bulleted or numbered list.
• Indent and Outdent. Adds or removes an indention.
• Link. Creates a hyperlink.
• Target. Specifies the frame or window in which the linked document loads.
After you create a new CSS rule, you can alter properties for it. The CSS Rule Definition dialog box lets you select the CSS properties you want to define a CSS rule. You can set CSS properties for any of the following categories: Type, Background (image and color), Block (spacing and alignment), Box (placement), Border (width, color, and style), Lists (bullets or numbers), Positioning (on page), and Extensions (filters, page breaks, and pointers).
Open the Web page that contains CSS styles (internal or external) you want apply properties.
Open the CSS Styles panel.
Double-click the rule or property you want to define.
Timesaver
Select the rule or property, and then make changes to the available attributes in the lower panel in the CSS Styles panel. Use the Show buttons at the bottom of the CSS Styles panel to display different attributes.
Specify the options you want in the CSS Rule Definition dialog box:
• Type and Font. Click the Type category, and then specify the following options: Font, Size, Style, Line Height, Decoration (underline, overline, line-through, or blink), Weight (boldface), Variant (small caps), Case (first letter, uppercase or lowercase), or Color.
• Background Image and Color. Click the Background category, and then specify the following options: Background Color, Background Image, Repeat, Attachment, or Horizontal Position and Vertical Position.
• Spacing and Alignment. Click the Block category, and then specify the following options: Word Spacing, Letter Spacing, Vertical Alignment, Text Align, Text Indent, Whitespace (Normal collapses white space, Pre works like the pre tag, or Nowrap only with br tag), or Display.
• Placement. Click the Box category, and then specify the following options: Width and Height, Float, Clear, Padding, Same For All (padding), Margin, or Same For All (margins).
• Border Width, Color, and Style. Click the Border category, and then specify the following options: Style, Same For All (style), Width, Same For All (width), Color, or Same For All (color).
• Bulleted and Numbered Lists. Click the List category, and then specify the following options: Type, Bullet Image, or Position.
• Page Positioning. Click the Positioning category, and then specify the following options: Type (Absolute, Relative, Fixed, or Static), Visibility (Inherit, Visible, or Hidden), Z-Index, Overflow, Placement, or Clip.
• Filters, Page Breaks, and Pointers. Click the Extensions category, and then specify the following options: Pagebreak, Cursor, or Filter.
Click OK.
A CSS rule consists of two parts: selector and declaration. The selector identifies the formatted elements (such as p, body, or h1), while the declaration defines the style properties. The declaration is a collection, known as a block, of properties and values. For example, font-family: Arial; defines the text style as the Arial font. The declaration is everything between the braces ( {} ). After you create a CSS rule, you can use the CSS Styles panel to modify and customize it to better suit your needs. If you no longer need a CSS rule, you can remove it.
Open the Web page that contains CSS styles with the rule you want to apply a property.
Open the CSS Styles panel.
Select a rule from the available options in the All Rules pane (All mode) or select a property in the Summary for Selection pane (Current mode).
Use any of the following methods:
• Double-click a rule or property to open the CSS Rule Definition dialog box. Make changes to the rule, and then click OK to save the changes.
• Click the Show Only Set Properties button, click the Add Properties link, and then fill in a value for the property in the Properties panel.
• Click the Show Category View or Show List View button, and then fill in a value for the property in the Properties panel.
Open the Web page that contains CSS styles with the rule you want to delete.
Open the CSS Styles panel.
Select a rule from the available options.
Click the Delete button in the CSS Styles panel.
Note
The rule will be deleted and all text the rule was attached to will revert back to their default format.
Did You Know?
You can edit a CSS style sheet. Instead of editing individual rules, you can edit the entire style sheet. Click the Window menu, click CSS Styles to open the CSS Styles panel, click the All button, double-click the name of the style sheet you want to edit, modify the style sheet in the Document window, and then save your changes.
You can change the name of a CSS selector. Open the CSS Styles panel, click the All button, click the selector you want to change, click it again to make the name editable, change the name, and then click Enter (Win) or Return (Mac).
After you create a set of CSS rules that you like, you can move them from one document to another, from the head of a document to an external style sheet, and between different external CSS files. If a conflict arises when you move a CSS rule from one place to another, you can specify how you want Dreamweaver to handle it.
Open the document with the CSS rules you want to move.
Open the CSS Styles panel or display Code view.
Select the rule or rules you want to move.
To select multiple rules, Ctrl-click (Win) or
-click (Mac) the rules you want to select.
Right-click (Win) or Control-click (Mac) the selection, point to CSS Styles, and then click Move CSS Rules.
Select the A New Style Sheet option.
Click OK.
Enter a name for the new style sheet.
Click Save.
Open the document with the CSS rules you want to move.
Open the CSS Styles panel or display Code view.
Select the rule or rules you want to move.
To select multiple rules, Ctrl-click (Win) or
-click (Mac) the rules you want to select.
Right-click (Win) or Control-click (Mac) the selection, point to CSS Styles, and then click Move CSS Rules.
Timesaver
Drag a rule in the CSS panel to a new position. For example, you can drag a rule from the internal document to the external document.
Click the Style Sheet option, and then select an existing style sheet already linked to the document from the popup or click Browse to select an existing style sheet.
Click OK.
Did You Know?
You can rearrange or move CSS rules by dragging. Open the Styles panel, click the All button, select the rules you want to move, and then drag them to the new location. You can move a rule to another style sheet or the document head or rearrange rules within a style sheet.
DW 8.5
With CSS, certain properties can be inherited from parent elements, making it easy to style one element and have all the descendent elements display the same style. This reduces the size of your CSS code and makes it easier to read, debug, and maintain. When you apply a style to an element, any property that can be inherited is passed to any child, or nested, elements. For example, if you apply the font properties of Times New Roman and 14px to the <p> tag, any nested <em> element would also be Times New Roman at 14 px. If styles conflict, the style closes to the element is applied. You can use the Relevant CSS tab to help you determine which style is in control and make any adjustments that you want.
The Relevant CSS tab lets you track the CSS rules affecting the currently selected text element as well as modifying the rule’s properties. The Relevant tab is located in the Tag Inspector. Click the Window menu, and then click Tag Inspector. The Relevant CSS tab consists of two sections:
• The upper portion of the Relevant CSS tab shows the rules affecting the current selection and the tags that they affect.
• The lower portion of the Relevant CSS tab displays the properties of the currently selected element in an editable grid.
The properties are arranged alphabetically, with the set properties sorted to the top of the tab. Set properties are displayed in blue; properties irrelevant to the selection are displayed with a red strike through line. Hovering over a rule that is irrelevant displays a message explaining why the property is irrelevant. Typically, a property is irrelevant because it is overridden or not an inherited property.
You can also use the lower panel of the Relevant CSS tab to modify the properties of a selection. The editable grid lets you change the values for any of the displayed properties. Any changes you make to a selection are applied immediately, letting you preview your work as you go.
CSS 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).
This is accomplished through the association of styles to HTML tags through ID attributes and ID selectors. ID attributes in HTML tags uniquely identify that tag with a name. Styles can be linked to that ID just like they can with classes. The big difference is that ids cannot be used on more than one tag. This also means that style definitions for ids only relate to one tag per page. You should never run into the need to apply an ID selector more than once. Should you need to use an ID selector on more then one occasion in any given page, you will need to re-plan your CSS.
For example, an ID can be applied to the h1 tag of a document containing heading text. The tag will be given the ID “master-heading” indicating that it is the sole and primary heading of the page. As such it will also receive a unique style.
Advanced styles can also redefine the formatting for tags that contain a specific id attribute (for example, the styles defined by #myStyle (user defined) apply to all tags that contain the attribute-value pair id=“myStyle”).
The following example is an ID selector:
#MyID {
color: #0033ff;
}
The primary difference between a Class and ID selector is that the first character is a hash or pound sign (#).
Creating advanced styles also helps when Web pages are converted into text documents. For example, if ID’s are selected for various heading, body, and sub text, these unique names can be used to help convert the Web text to print text.
In addition to ID selectors, CSS specifications refer to link styles as Pseudo-classes. These are special classes that describe styles for elements that only apply under certain circumstances. For example, the four default pseudo-classes you will find in the Advanced menu are:
• a:link. Describes any hyperlink that has not been visited by the user’s browser. In other words, the page linked to is not present in the browser’s local memory.
• a:visited. Describes any hyperlink that has been visited and is present in the browser’s local memory.
• a:hover. Describes a hyperlink while the user’s mouse happens to be hovering over it. This class is recognized by all version 4 and higher browsers, except Netscape 4.
• a:active. Describes a hyperlink that has been clicked but not yet released.
If you want to define the formatting for a combination of tags, you can use the Advanced option to create an ID selector. You can specify one or more HTML tags to create an ID selector or select one from the popup menu, which includes a:active, a:hover, a:link, and a:visited. After you specify the tags you want to use, you can define the formatting associated with it. When you’re done, you can apply the ID selector to other elements.
Open the Web page you want to create an ID selector.
Click the Format menu, point to CSS Styles, and then click New.
Click the Select Style popup, and then click ID.
Enter a style name in the Selector Name box (in this example #mainBody), or select one from the list. IDs must begin with a pound (#) sign.
Click the Define In popup, and then select a new or existing external style sheet or (This Document Only).
Click OK.
Click the Type category, and make the modifications you want. Some include the following:
• Font. Click the arrow button, and then select a font (in this example, click Verdana, Arial, Helvetica, sans-serif).
• Size. Click the arrow button, and then select a size (in this example, enter 24 pixels).
• Variant. Click the arrow button, and then select an option (in this example, click small-caps).
• Color. Click the arrow button and then select a color (in this example, click Blue (#0000FF)).
Click OK.
Click to place the insertion point into a portion of the text that you want to apply the ID selector.
Right-click one of the tags in the quick tag selector (in this example the <p> tag).
Point to Set ID, and then select from the available ID selector options (in this example, paragraphText).
The selected paragraph now changes to the modifications made to the #paragraphText ID selector.
The Browser Compatibility Check (BCC) analyzes the HTML and CSS on the open page and determines whether it has problems in certain browsers. Browser targeting checks your pages for all popular platforms and browsers, including Firefox, Internet Explorer (Mac and Win), and Safari. When you run the BCC, it scans the open page and reports any potential CSS problems in the Results panel. Each potential problem is given a confidence rating, a circle. The amount of the circle filled in—quarter, half, three-quarters, or full—determines the occurrence probability level of the problem. Browser problems fall into three categories: serious (visible problem), warning (not supported), and informational (no visible effect). A direct link to documentation and solutions related to the problem is also provided on the Adobe CSS Advisor Web site.
Click the File menu, point to Check Page, and then click Browser Compatibility.
The Results panel appears with the Browser Compatibility Check tab, indicating any problems.
Double-click an issue to select it.
Information about the potential problem appears to the right in the Results panel.
To display the issue in the code, click the Check Page button on the Document window, and then click Next Issue or Previous Issue.
To open the Adobe CSS Advisor Web site, click the link at the bottom right of the Results panel.
To exclude an issue from future checking, right-click the issue in the Results panel, and then click Ignore Issue.
To edit the Ignore Issues list, click the green arrow in the Results panel, click Edit Ignored Issues List, delete the issue from the Exceptions.xml file, and then save and close the file.
Click the Check Page button on the Document window, and then click Settings.
The Target Browsers dialog box opens.
Select the check boxes next to the browsers you want to check and clear the ones you don’t want to check.
Click the Version popup for each browser to select the version you want.
Click OK.
Click the File menu, point to Check Page, and then click Browser Compatibility.
• You can also click Window, click Results, and then click the Browser Compatibility Check tab.
The Results panel appears with the Browser Compatibility Check tab, indicating any potential problems.
To view the report, click the Browse Report button in the Results panel.
To save the report, click the Save Report button in the Results panel.
You can use the Code Format section of the Preferences dialog box to access CSS source formatting options. You can set options to indent properties, and insert separator lines to make it easier to work with CSS code. As you make formatting option changes, a preview of the CSS code appears in the dialog box. If you like the preview results, you can accept the options. Otherwise, you can continue to make option changes. After you set CSS code formatting preferences, you can apply them to an entire document (in a CSS style sheet) or the head of the document only (embedded CSS code).
Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences.
Click the Code Format category.
Click the CSS button.
Select from the following CSS source code format options:
• Indent Properties With. Sets the indent number and type (Tabs or Spaces) for properties within a rule.
• Each Property On Separate Line. Places each property within a rule on a separate line.
• Opening Brace On Separate Line. Places the opening brace for a rule on a separate line from the selector.
• Only If More Than One Property. Places the single-property rules on the same line as the selector.
• All Selectors For A Rule On Same Line. Places all selectors for the rule on the same line.
• Blank Line Between Rules. Inserts a blank line between each rule.
Click OK.
Click OK.
Display the CSS style sheet you want to format. Click the CSS style sheet name on the Related Files toolbar.
Click the Commands menu, and then click Apply Source Formatting.
The formatting options set in CSS code formatting preferences are applied to the entire document.
Display the HTML page that contains CSS embedded in the head of the document. Click Source Code on the Related Files toolbar.
Select any part of the CSS code.
Click the Commands menu, and then click Apply Source Formatting To Selection.
The formatting options set in CSS code formatting preferences are applied to all CSS rules in the head of the document only.
You can use the CSS Styles section of the Preferences dialog box to control the way Dreamweaver writes the code that defines CSS styles. You can specify the properties—including font, background, margin and padding, border and border width, or list-style—you want Dreamweaver to write in shorthand, determine whether Dreamweaver edits existing styles in shorthand, and select the editing tool you want to use to modify CSS rules. Shorthand CSS is an abbreviated syntax that allows you to create styles.
Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences.
Click the CSS Styles category.
Select from the following CSS style options:
• When Creating CSS Rules Use Shorthand For. Select the check boxes for the properties you want Dreamweaver to write in shorthand.
• When Editing CSS Rules Use Shorthand. Select the font and size you want to use to display text within pre, code, and tt tags.
• When Double-clicking In CSS Panel. Select the option with the editing preference you want to use: CSS dialog, Properties panel, or Code view.
Click OK.
In Dreamweaver, you can use design-time style sheets to show or hide designs applied by a CSS style sheet as you work on a Web page. This is useful when you want to include or exclude the effect of a style sheet as you design a page. Design-Time style sheets only apply while you are working on a page. When the page displays in a browser, only the styles that are actually attached to or embedded in the page appear.
Open the Web page you want to create a CSS style.
Click the Format menu, point to CSS Styles, and then click Design-Time.
Select from the following CSS style options:
• Show. Click the Plus (+) button above Show Only At Design-Time, select the CSS style sheet you want to show, and then click OK.
• Hide. Click the Plus (+) button above Hide At Design-Time, select the CSS style sheet you want to hide, and then click OK.
• Remove. Click the style sheet you want to remove, and then click the appropriate Minus (-) button.
Click OK.
The CSS Styles panel displays an indicator, either “hidden” or “design” that reflects the current status of the style sheet.
DW 1.3
Page weight is a measurement of the file size of a Web page that includes the combined size of all the elements of the page. The elements images, audio or video files, associated style sheets, multiple HTML files loaded within frames, and so on.
Page weight can be used to determine the download time for a given page on a variety of Internet connection speeds. At high speeds (DSL and cable connections), most reasonably sized pages will download relatively quickly. However, at slower speeds (including faster dial-up speeds), even medium-sized pages can take ten seconds or more to download.
You can reduce page weight by doing some things and not doing others. Here is a brief list of different ways to reduce page weight:
• Use CSS (Cascading Style Sheets). CSS can be a very effective way to reduce the load time of your overall site.
CSS reduces file size because it decreases the amount of markup in the HTML. CSS eliminates the need for page elements such as one-pixel spacer images, multiple font tags, nested tables, and similar items.
Using an external style sheet also allows for the caching of the styles so that the browser doesn’t have to reload it with each new page, thus reducing the time for subsequent pages (after the first) to load. Change a single property in the external file and it changes the appearance of that element for the entire website.
• Remove inessential elements of your pages. This is especially true of sound and video files, but also extends to unnecessary graphics and even extraneous text.
• Avoid frames. Not only do framed pages load more slowly, some search engines still do not index framed pages correctly.
• Avoid nested tables. Inexperienced Web designers will often utilize tables inside of tables in order to get the page layout just right. This can be avoided by using a single, well-thought-out table for page layout.
• Compress your images. Uncompressed JPEGs and GIFs often contain extra data not necessary for their correct display.
• Remove extra “whitespace” in your code. Every space, tab, and “newline” character in your HTML code requires extra data in the page. Thus, limit their use and pay attention to what extra space is inserted by your design software.
• Break up long copy. While long copy can often be an effective means of marketing your products or services, long-copy pages taken to the extreme may take so long to load that they will lose visitors during the wait. Consider breaking up very long copy to multiple pages.
• Clean up your code with tools. A number of free and commercial tools are available online that will clean up your website code, reducing page weight without affecting how your page is displayed.