CSS Exercise -- Creating Styles in Dreamweaver

[Printable instructions (will be missing some style colors even if printed on a color printer]

Style 1 -- The Type Selector

[With a Type Selector, choose "Redefine HTML Tag" in the New CSS Style dialog box, then choose the tag you are redefining from the Tag drop-down box]

1) Create a Type Selector by redefining H1 to the following style:

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #990000;

2) Type the following text into your page, "This is an H1 tag" and then set the tag for the paragraph to H1

3) Here's an example of the set style:

This is an H1 tag

Style 2 -- The Class Selector

[With a Class Selector, choose "Make a Custom Style (class)" in the New CSS Style dialog box, then type the name in the Name box. You should begin the name with a . (dot). If you don't include the dot, Dreamweaver will put it in]

1) Create a Class Selector called greentext and set its style to the following:

font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #009900;

2) Type the following text into your page, "This is the greentext class for this page", set the HTML tag to paragraph, then apply the greentext style to the paragraph

3) Here's an example of the set style:

This is the greentext class for this page

Style 3 -- The ID Selector

[With an ID Selector, choose "Use CSS Selector" in the New CSS Style dialog box, then type the name in the Name box. You MUST begin the name with a # (pound) sign. If you don't include the pound sign, Dreamweaver will NOT put it in and your style will NOT work correctly. Remember you can use an ID selector only once on a Web page]

1) Create an ID selector called greyBG with the following style:

font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
color: #0033FF;
background-color: #CCCCCC;

2) Type the following text into your page, "This is the greyBG ID selector", set the HTML tag to paragraph, then set the paragraph style to greyBG. (We'll explain in class how to do this.)

3) Here's an example of the set style:

This is the greyBG ID selector

Style 4 -- Another Class Selector

[With a Class Selector, choose "Make a Custom Style (class)" in the New CSS Style dialog box, then type the name in the Name box. You should begin the name with a . (dot). If you don't include the dot, Dreamweaver will put it in]

1) Create a Class selector called box with the following style:

border: 1px solid #000000;
padding: 4px;

2) Type the following text into your page, "This is the box class selector", set the HTML tag to paragraph, then apply the box style to the paragraph.

3) Here's an example of the set style:

This is the box class selector

Style 5 -- Combining Styles

1) Type the following text into your page, "This is the H1 tag with the class set to box", set the HTML tag to H1, then apply the box style to the tag.

2) Here's an example of the set style:

This is the H1 tag with the class set to box