Exercise: CSS Text Styling

Exercise

Time to put some of this learning to work. Create a new web page and  a new css file. Save both and connect them.

Text Sizing: rem and px

  1. Set the default font size for the entire document to 10px, and also set a generic font (your choice) for the whole document.
  2. Use rem sizing to appropriately set the font size of the following elements: <p><h1><h2><h3>.  Ie. <h1> should be largest, <h2> second largest, etc.

Text-torture: transform, shadow, align, etc.

  1. Find or create about five lines  of dummy text.
  2. Title your document with an <h1> tag.
  3. Paste the dummy text within two sets of <p> tags.
  4. Create headings and sub-headings for each block of text with the <h2> and <h3> tags.
  5. Use text-transform to set your <h1> content to all caps.
  6. Add a text-shadow to your <h1> contents.
  7. Use text-align to center all three headers- <h1>,<h2>, <h3>- at once, using just one rule in your CSS document.
  8. Set the line height of all of the content within <p> tags to 1.5. If you like the way that looks, stay with it. Otherwise, feel free to ‘space out’ however you want to.
  9. Add some white space to your content. For example, click at the beginning of a few sentences (within the html code) and press return. Then add a few spaces to separate those sentences from the margin.
  10. Now experiment with p{white-space:pre-line; } and p{white-space:pre-wrap;} to see what happens!