Dreamweaver MX

1
Dreamweaver MX
Lesson 13 Using Style Sheets
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 gt 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 ltpgt) 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 .ltyour style namegt
  (dont 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 alink in the Selector list, click OK.
• Any ltagt tags in the document will reflect this
  style.

7
Tag Combinations (p. 414)

• Sometimes you want tags like ltpgt 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 gt Export gt 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 gt
  Convert gt 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.