Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice CSS Length Units

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Practice

2:11 with Anwar Montasir

Take a look at the workspace associated with this video, and you’ll see the HTML contains a brief article containing some information about CSS Length Units. When you preview this page in the browser, you’ll see that the text isn’t all that legible. We could improve styling by modifying the text sizing and spacing, as well as by preventing the columns of text from growing so wide.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Hi, my name is Anwar. 0:09
    I'm a designer, a developer and a teacher at Treehouse. 0:11
    My pronouns are he/him. 0:14
    In this practice session we'll be working with CSS length units. 0:16
    Take a look at the workspace associated with this video, and you'll see the HTML 0:21
    includes a brief article containing some information about CSS length units. 0:26
    You won't need to alter the HTML at all to complete this practice session. 0:31
    In the CSS file, I've provided a bit of introductory CSS. 0:37
    On the body element, I've set the margin and padding to zero, and 0:41
    changed the background and text color. 0:45
    I've also changed the font family property to Georgia, 0:48
    while providing a font stack to provide backup choices in case the user doesn't 0:51
    have Georgia loaded on their computer. 0:56
    I've additionally provided styles for the code, blockquote, and cite elements. 0:59
    If you're not familiar with any of these HTML elements, 1:06
    I've provided readings in the Teacher's Notes to learn more. 1:09
    When you preview this page in the browser, 1:14
    you'll see that the text isn't all that legible. 1:16
    We could improve styling by modifying the text sizing and spacing, 1:19
    as well as by preventing the columns of text from growing so wide. 1:24
    I'm previewing the finished version of this challenge, and 1:28
    you can see it's a whole lot easier to read. 1:32
    It actually remains legible on a mobile screen, 1:34
    which I've accomplished in this case without writing any CSS media queries. 1:37
    Your job is to add enough CSS to make your page work like this in the browser. 1:43
    Take a careful look at the CSS file and you'll see I've provided comments 1:50
    instructing you on the ten steps necessary to complete this exercise. 1:54
    Along the way, you'll practice using relative measurements like ems, 1:59
    rems, and percentages, as well as fixed measurements using pixels. 2:03
    Have fun. 2:09

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up