Introduction to CSS. Part 1: Simple Text Formatting. Source Files for this Exercise are available on the Course Website DW_CSS intro

Transcription

1 Introduction to CSS Source Files for this Exercise are available on the Course Website DW_CSS intro Part 1: Simple Text Formatting 1. Launch Dreamweaver 2. Open File: aa_demo_chef_start.html Please work in Split view mode OBJECTIVE: Create an embedded style sheet 3. Add a style element with the required type attribute to the head of the document

2 OBJECTIVE: Create Type/Tag/Element Selectors (redefines an xhtml element) 4. Add a rule for the body element so all text appears in Arial or some other sans serif font and the background color is tan in color and the size of the font is set slightly smaller than the 16px browser default. 5. Add a series of rules to change the color of the heading elements body { background color: #F7EFE4; font family: Arial, Helvetica, sans serif; font size: small; }

3 OBJECTIVE: Create Class Selectors (used to classify elements) Add a custom class selector to the element that contains the name of the chef. This is a two step process that involves creating a class identifier and a class selector. Multiple elements may share a class name. 6. Step 1: In the embedded style sheet add the class selector and create the rule body {background color: #F7EFE4; font family: Arial, Helvetica, sansserif; font size: small;} h1 h2 {color: #610A01;} {color: #C09B43;} h3 {color: #832519;} 7. Step 2: Assign this class selector to the html element. In the body of the document, locate the element that contains the name of the chef (right before the last <hr/> element in the document). Change this regular <p> tag to take on the properties of the.sig class.

4 8. Step 1: Assign additional class selectors to format the alignment of the images in the document. body {background color: #F7EFE4; font family: Arial, Helvetica, sansserif; font size: small;} h1 h2 {color: #610A01;} {color: #C09B43;} h3 {color: #832519;}.sig { } font style: oblique; font weight: bold; color: #AB2820; font family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font size: 1.4em; 9. Step 2: Assign this class selector to the html element. In the body of the document, locate the <img> elements. Assign the.fltlft class to the chef image (hosea2.jpg) and the.fltrt class to the food image (special_friday.jpg).

5 OBJECTIVE: Add Pseudoclass Selectors (used to style an element that is in a certain state) 10. Change the color for the following link states: link, visited, hover, and active body {background color: #F7EFE4; font family: Arial, Helvetica, sansserif; font size: small;} h1 h2 {color: #610A01;} {color: #C09B43;} h3 {color: #832519;}.sig.fltlft.fltrt {font style: oblique; font weight: bold; color: #AB2820; fontfamily: "Palatino Linotype", "Book Antiqua", Palatino, serif; font size: 1.4em;} {float: left; margin right: 15px;} {float: right; margin left: 15px;} 11.

6 Part 2: Creating an External Style Sheet 1. Create a new External Style Sheet by going to FILE > NEW and choosing CSS 2. Copy and paste the styles from the embedded style sheet into the new external css file you just created. Save the file as new.css (save to your root folder for this exercise)

7 OBJECTIVE: Assign the newly created external style sheet(new.css) to another xhtml document. 3. Open aa_demo_cuisine_start.html Add a link to the external style sheet to the head of the document The html document should take on the properties of the rules defined in the new.css file.