1 / 11

Dreamweaver MX

Dreamweaver MX. Lesson 13: Using Style Sheets. 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.

stella-dotson
Download Presentation

Dreamweaver MX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 > 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 TagSelector. • 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 AttachStyle 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 DefineIn 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.

More Related