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. Title your document with an <h1> element.
  2. Find or create about five lines  of dummy text.
  3. Paste the dummy text within two <p> elements.
  4. Break up the paragraphs with headings and sub-headings using 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 paragraph 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!