Dreamweaver MX

2

Creating External Style Sheets-1(p. 400) A style is a group of formatting attributes

identified by a single name. An ________ style sheet is stored outside any

HTML document. To create a style sheet, open an HTML

document and select a specific tag. Select Window > CSS Styles, click the New

CSS Style icon at the bottom of the panel. In the Type area, select Redefine HTML Tag. In the Define In area, select (New Style Sheet

File), click OK. Name the file and save it in the site folder.

3

Creating External Style Sheets-2(p. 403) In the CSS Style Definition box, select the Type

category. Make desired selections (font, size, weight,

color, etc.), OK. The document is now _______.Adding to an External Style Sheet (p. 404) While in the same HTML document, select

another tag (such as <p>) with Tag Selector. Click the New CSS Style icon in the CSS Styles

panel and select Redefine HTML Tag. Select the desired file in the Define In list, OK.

4

Editing an Existing Style (p. 407) In the CSS Styles panel, click the Edit Styles

button. Select the desired style (such as p) in the style

sheet. Click the Edit Style Sheet icon at the bottom of

the panel. Make desired changes, click OK.

5

Creating Custom Styles (p. 408) Click the Apply Styles button at the top of the

CSS Styles panel. Click the New CSS Style icon at the bottom. Select Make Custom Style in the Type area. In the Name field, type “.<your style name>”

(don’t forget the leading period). Select the external style sheet in the Define In

area, click OK. Make desired style selections, click OK. Select text in the HTML document, then click

the custom style icon in the CSS Styles panel.

6

Pseudoclasses for Links (p. 412) The appearance of links on a page can be

changed based on the _______ of the link (link, hover, active, visited).

Click New CSS Style in the CSS Styles panel. Select Use CSS Selector in the Type area. Select a:link in the Selector list, click OK. Any <a> tags in the document will reflect this

style.

7

Tag Combinations (p. 414) Sometimes you want tags like <p> formatted

differently in different _________, such as paragraphs within tables.

Click New CSS Style in the CSS Styles panel. Select Use CSS Selector in the Type area. In the Selector field, type “center p” so that tags

in the sequence ___________only are affected. Select the desired .css file in the Define In area,

click OK. Select the formatting desired, click OK.

8

Linking to External CSS Sheets (p. 416) Open an HTML file that is not linked to a .css

file. Click the Attach Style Sheet icon at the bottom

of the CSS Styles panel. Browse to the desired .css file, click OK. Make sure the Link button is selected in the Add

As area, click OK. The styles are now applied to the document.

9

Creating Internal Styles (p. 418) Internal styles are only used in the _________

document. Click New CSS Style in the CSS Styles panel. Supply a name for the style in the text box. Select Make Custom Style in the Type area and

This Document Only in the Define In area, click OK.

Select the desired area in the HTML file and click the internal style sheet icon to apply.

10

Converting Internal Styles (p. 421) Internal styles can be exported to external style

sheets. With an open document that contains internal

styles, select File > Export > CSS Styles… Enter the name for the new .css file and click

Save.

11

Converting CSS to HTML (p. 422) Older browsers may not have CSS capability. Open an HTML page that uses styles, select

File > Convert > 3.0 Browser Compatible. Select CSS Styles to HTML Markup, OK. The new HTML document appears as Untitled-

x. The styles are converted to HTML markup IF

POSSIBLE. Save the file under a different name. Users could be redirected to this page if they

are using an older browser.