Dreamweaver MX

2 Creating External Style Sheets-1 (p. 400) n A style is a group of formatting attributes identified by a single name. n An ________ style sheet is stored outside any HTML document. n To create a style sheet, open an HTML document and select a specific tag. n Select Window > CSS Styles, click the New CSS Style icon at the bottom of the panel. n In the Type area, select Redefine HTML Tag. n In the Define In area, select (New Style Sheet File), click OK. n Name the file and save it in the site folder.

3 Creating External Style Sheets-2 (p. 403) n In the CSS Style Definition box, select the Type category. n Make desired selections (font, size, weight, color, etc.), OK. The document is now _______. Adding to an External Style Sheet (p. 404) n While in the same HTML document, select another tag (such as ) with Tag Selector. n Click the New CSS Style icon in the CSS Styles panel and select Redefine HTML Tag. n Select the desired file in the Define In list, OK.

4 Editing an Existing Style (p. 407) n In the CSS Styles panel, click the Edit Styles button. n Select the desired style (such as p) in the style sheet. n Click the Edit Style Sheet icon at the bottom of the panel. n Make desired changes, click OK.

5 Creating Custom Styles (p. 408) n Click the Apply Styles button at the top of the CSS Styles panel. n Click the New CSS Style icon at the bottom. n Select Make Custom Style in the Type area. n In the Name field, type “. ” (don’t forget the leading period). n Select the external style sheet in the Define In area, click OK. n Make desired style selections, click OK. n Select text in the HTML document, then click the custom style icon in the CSS Styles panel.

6 Pseudoclasses for Links (p. 412) n The appearance of links on a page can be changed based on the _______ of the link (link, hover, active, visited). n Click New CSS Style in the CSS Styles panel. n Select Use CSS Selector in the Type area. n Select a:link in the Selector list, click OK. n Any tags in the document will reflect this style.

7 Tag Combinations (p. 414) n Sometimes you want tags like formatted differently in different _________, such as paragraphs within tables. n Click New CSS Style in the CSS Styles panel. n Select Use CSS Selector in the Type area. n In the Selector field, type “center p” so that tags in the sequence ___________only are affected. n Select the desired.css file in the Define In area, click OK. n Select the formatting desired, click OK.

8 Linking to External CSS Sheets (p. 416) n Open an HTML file that is not linked to a.css file. n Click the Attach Style Sheet icon at the bottom of the CSS Styles panel. n Browse to the desired.css file, click OK. n Make sure the Link button is selected in the Add As area, click OK. n The styles are now applied to the document.

9 Creating Internal Styles (p. 418) n Internal styles are only used in the _________ document. n Click New CSS Style in the CSS Styles panel. n Supply a name for the style in the text box. n Select Make Custom Style in the Type area and This Document Only in the Define In area, click OK. n Select the desired area in the HTML file and click the internal style sheet icon to apply.

10 Converting Internal Styles (p. 421) n Internal styles can be exported to external style sheets. n With an open document that contains internal styles, select File > Export > CSS Styles… n Enter the name for the new.css file and click Save.

11 Converting CSS to HTML (p. 422) n Older browsers may not have CSS capability. n Open an HTML page that uses styles, select File > Convert > 3.0 Browser Compatible. n Select CSS Styles to HTML Markup, OK. n The new HTML document appears as Untitled- x. n The styles are converted to HTML markup IF POSSIBLE. n Save the file under a different name. n Users could be redirected to this page if they are using an older browser.