In-class Practice

Working with Typography and Backgrounds

Part 1

Returning to our DCI Web Conference website, let's change the fonts to give the site a more customized look.

  1. Open the practice site in VSCode: Open VSCode
  2. Open a tab so you can preview your site as you work: View Your Practice Site
  3. You will need to have completed Practices 1, 2, & 3 to continue. If you have not, go to Practice #3, and copy/paste the HTML into your index.html file and the CSS into your style.css file from Part 2 of the exercise.
  4. In your CSS, apply the following properties and values to the body selector:
    1. color of #444444
    2. font-weight of normal
    3. font-size of 1.1rem
    4. line-height of 1.75rem
    5. font-family of "Verdana", "Helvetica", "Arial", sans-serif
  5. In the last practice, you added a variety of colors throughout the text as you were beginning to experiment with CSS. Let's remove some of these:
    1. Remove the entire selector and properties for span.pizazz, .attention, and #speakers, #venue.
    2. Remove only the color property for the selector .conference-info
  6. Headings in HTML (h1, h2, etc.) are semantic — your browser by default just happens to make them bigger and bolder than normal text. In CSS, we can change their appearance without changing semantics. Make the following changes to the top three heading levels:
    1. Select h1, and set font-size to 2.5em (note it's "em" not "rem" this time), and line-height to 1.25em.
    2. Select h2, and set font-size to 1.75em and font-style to italic.
    3. In the existing selector for h3, add font-size as 1.25em and font-weight as normal.
  7. To further make your headings stand out, select all three h1, h2, and h3 simultaneously, and apply the following properties:
    1. font-family of "Palatino Linotype", "Palatino", "Times New Roman", serif
    2. letter-spacing of 1px
    3. word-spacing of .1em
  8. Make two further changes that start to clean up the site:
    1. Set the font-size for your .sitefooter to .75em.
    2. Increase the margin-top value for #introduction to 250px.
  9. Change all of your hyperlinks to give some space between the text and the underline by adding the following properties to the existing a selector:
    1. text-decoration of none
    2. border-bottom of 1px solid #444444
  10. Finally, those fonts we picked just aren't looking right. Let's use some Google Fonts that fit our style better.
    1. In the head section of the HTML page, add the following line above the link to the CSS we have been working on:

      <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    2. Back in the CSS, add "Roboto" as the first value in the font-family list for body.
    3. Add "Raleway" as the first value in the font-family list for h1, h2, h3

If you entered everything correctly, your HTML and CSS files should look like this:

And your output should look like this:

Part 2

Let's add some background colors. While doing so, we must keep in mind that setting a background often requires us to change (or at least evaluate) the foreground/text color to ensure that our content remains legible.

You have an image you want to use as the background of the header, so you used Adobe's Color website to extract a color scheme. The background and text colors chosen below reflect that scheme.

In your CSS, do all of the following to update your site's appearance.

  1. In the body selector, make the font color a value of #222222 to make it a little darker than it is currently but not quite black.
  2. Add a background-color to the body. Set the value to rgba(242, 168, 94, 0.2).
  3. Let's implement the photograph you took as the background image for the header. Make the following changes to the selector .siteheader:
    1. Increase the height to 250px
    2. Add background-image with the value url(https://jasontmickel.com/dci108/inclass/lexington.jpg).
    3. Add background-position with the value center.
    4. Add background-size with the value cover.
  4. With the background image in place, the text is now hard to read, so we need to make some changes. First, update the .logo selector by:
    1. Setting the background color to white
    2. Adding .5em of padding to all sides.
  5. Next, give the selector .titlemenu some properties to help the text become visible again:
    1. Reduce the width from 84% to 70%.
    2. Add a background color that is white but has 90% opacity.
    3. Add a border-radius of 3px
  6. Add a selector of both h1 and h2 together that sets their margin property to .25em auto.
  7. Update the color property for all a elements with the value rgb(115, 53, 39).
  8. Set the background color of the selector .button to the same rgb(115, 53, 39) color we used above.
  9. While you're at it, let's continue the color scheme by updating the border color of the .quote selector to rgb(115, 53, 39) also.
  10. To make the content of each .conference-info box stand out, add the following properties to that existing selector:
    1. padding-top of 1.25em
    2. background-color of rgb(115, 53, 39)
    3. color of #eeeeee
    4. height of 300px
    5. border-radius of 3px
  11. Before the other selectors for your classes of "highlight-link", add a selector for a.highlight-link setting the color of those links to #eeeeee.
  12. Change the color of visited "highlight-link" elements to #eeeeee, as well.
  13. Delete the color property from the h3 selector.
  14. Update the width for all .container elements from 95% to 100%.
  15. With the darker backgrounds on the conference information boxes, the footer now seems a bit crowded. Give the selector .sitefooter a top margin of 3em.

Your CSS should now look like this:

Final Output

Below is approximately how your final output should look: