Typography Activity

Objective

To explore the CSS text formatting options while reinforcing Dreamweaver site managment and HTML skills.

The Set Up

  1. Create a folder on the desktop called TypeTests
  2. Define a local site in Dreamweaver to point to the the TypeTests folder
  3. Create a new HTML document and save it as test.html
  4. Copy and paste the text below twice.
  5. Wrap each text block (what you pasted) in a div tag and name them sampletext1 and sampletext2

CSS Exploration

Now that your document has 2 divisions, style the text different in each using CSS. External CSS preferred (for practice).

Minimally modify the...

You can do this for the entire area or individual elements in the area. For example #sampletext1 h2 would only style the h2 in the sampletext1 division.

Play a Bit

The Sample Text - Copy everything below this heading and paste it twice

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Even More Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<<Back