ptg 214 Chapter 9 Cascading Style Sheets function and perform just like their counter- parts 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 par- ticular 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. Applying Internal CSS Styles Apply a Paragraph Style Open the Web page you want to apply a paragraph style. Click within a specific paragraph, to create an insertion point. NOTE Do not select any text. 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 Targeted Rule list arrow, and then select the CSS style you want. The CSS style is applied to the entire paragraph. NOTE A paragraph is defined as the information contained between two carriage returns. 3 2 1 2 3 Click the Targeted Rule list arrow, and then select a style. From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 215 Apply a Character (Inline) Style 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. Convert Inline CSS to a CSS Rule 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 Styles, and then click Convert Inline CSS To Rule. Click the Convert to list arrow, 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. 7 6 5 4 3 2 1 3 2 1 2 3 5 6 7 See Also See “Moving CSS Rules” on page 226 for information on moving CSS rules to a style sheet. From the Library of Wow! eBook ptg 216 Chapter 9 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. Applying and Modifying External CSS Styles Attach an External Style Sheet 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. 4 3 2 1 4 3 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 217 Open and Modify an External Style Sheet 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. Click the external style sheet file on the Related Files toolbar. Modify the document to reflect the changes required. Click the File menu, and then click Save. To view the mai n doc ument, cl ic k Source Code on the Related Files toolbar. When you display the main document, the formatting reflects the changes made to the attached style sheet. 5 4 3 2 1 5 3 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. 2 Related Files toolbar Filtering Files on the Related Files toolbar The Related Files toolbar displays static and dynamically-related files for a Web page. Status files appear first starting from the left, followed by external files (such as .css and .js), and concluding with dynamic path server included files (such as .php, .inc, and .module). When the Related Files toolbar contains too many files to fit on the toolbar, scroll arrows appear to access files. To help you reduce the number of files on the toolbar, you can filter files by type to hide the ones you don’t want to display. Click the Filter Related Files button (New!) on the Related Files toolbar, and then select the file types you want to filter (checked to show or unchecked to hide) or click Show All File Types to show all files. The list of file types on the menu is built based on the file types connected to the current open document, which varies. You cannot filter out all the file types. When you get to the last file type, it will be grayed out in the menu. When you close a document, the filter settings are not saved. For Your Information Filter Related Files button From the Library of Wow! eBook ptg 218 Chapter 9 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 stan- dard 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. Removing Internal Styles Remove an Internal Style 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. TIMESAVER In the Properties panel, click CSS, click the Targeted Rule list arrow, and then click None. The CSS style is removed from the selected text. 3 2 1 2 3 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. From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 219 Dreamweaver gives you complete control over internal and external styles with the CSS Styles panel. The CSS Styles panel lists all the inter- nal 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), disable or enable CSS properties (New!), and even remove styles. Using the CSS Styles Panel Use the CSS Styles Panel 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 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. ◆ Disable/Enable CSS Property. Disables or enables the selected CSS property (New!). ◆ Delete CSS Style Sheet. Deletes the selected rule or property. 3 2 1 2 Rules window Properties window Use to change property view Use to manage style sheets, rules, or properties External CSS rules Internal CSS rules From the Library of Wow! eBook . that contains the inline CSS you want to convert. Right-click (Win) or Control-click (Mac) the selection, point to CSS Styles, and then click Convert Inline CSS To Rule. Click the Convert. 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. reduce the number of files on the toolbar, you can filter files by type to hide the ones you don’t want to display. Click the Filter Related Files button (New!) on the Related Files toolbar,