Upload
stella-dotson
View
11
Download
0
Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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.