{"id":3734,"date":"2023-07-18T01:01:03","date_gmt":"2023-07-18T01:01:03","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3734"},"modified":"2025-08-28T23:00:11","modified_gmt":"2025-08-28T23:00:11","slug":"exercise-css-text-styling","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-two\/exercise-css-text-styling\/","title":{"rendered":"Exercise: CSS Text Styling"},"content":{"rendered":"\n

Exercise<\/h3>\n\n\n\n

Time to put some of this learning to work. Create a new web page and  a new css file. Save both and connect them.<\/p>\n\n\n\n

Text Sizing: rem and px<\/h4>\n\n\n\n
    \n
  1. Set the default font size for the entire document to 10px, and also set a generic font (your choice) for the whole document.<\/li>\n\n\n\n
  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.<\/li>\n<\/ol>\n\n\n\n

    Text-torture: transform, shadow, align, etc.<\/a><\/h4>\n\n\n\n
      \n
    1. Title your document with an <h1> element.<\/li>\n\n\n\n
    2. Find or create about five lines  of dummy text.<\/li>\n\n\n\n
    3. Paste the dummy text within two <p> elements.<\/li>\n\n\n\n
    4. Break up the paragraphs with headings and sub-headings using the <h2> and <h3> tags.<\/li>\n\n\n\n
    5. Use text-transform to set your <h1> content to all caps.<\/li>\n\n\n\n
    6. Add a text-shadow to your <h1> contents.<\/li>\n\n\n\n
    7. Use text-align to center all three headers- <h1>,<h2>, <h3>- at once, using just one rule in your CSS document.<\/li>\n\n\n\n
    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.<\/li>\n\n\n\n
    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.<\/li>\n\n\n\n
    10. Now experiment with p{white-space:pre-line; } and p{white-space:pre-wrap;} to see what happens!<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      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 Text-torture: transform, shadow, align, etc.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3686,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3734","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3734"}],"version-history":[{"count":6,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3734\/revisions"}],"predecessor-version":[{"id":4367,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3734\/revisions\/4367"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3686"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}