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 the CSS Box Model

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Practice

1:45 with Anwar Montasir

Take a look at the workspace associated with this video, and you’ll see a fairly small amount of content. There’s a photo followed by a div with an id of text, containing an h1 and a p element. And everything is wrapped inside another div, with an id of box. Preview the page in the browser, and you’ll see the layout looks a bit boring since all that’s being applied is the browser’s default user agent stylesheet. Your challenge is to manipulate the CSS box model to achieve the layout I’m previewing on my screen.

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:10
    My pronouns are he/him. 0:14
    In this practice session, we'll be working with the CSS box model. 0:16
    Take a look at the workspace associated with this video and 0:21
    you'll see a fairly small amount of content. 0:25
    There's a photo of my dog Gypsy Rose, the world's cutest dog in my humble opinion. 0:28
    That's followed by a div with an id of text containing an h1 and a p element. 0:34
    And everything is wrapped inside another div with an id of box. 0:40
    You won't need to alter the HTML at all to complete this practice session. 0:44
    Preview the page in the browser, and you'll see the layout looks a bit boring, 0:50
    since all that's being applied is the browser's default user agent stylesheet. 0:55
    Your challenge is to manipulate the CSS box model to achieve 1:00
    the layout I'm previewing on my screen. 1:04
    You can see I've added some color and had a bit of fun styling my boxes. 1:07
    Your instructions for styling your CSS 1:13
    are found in comments inside the style.css file. 1:16
    You'll be styling the image and both divs. 1:21
    Take note of the comment I left up top. 1:24
    You might need some complicated math to match the size of the image with 1:27
    the size of the div called text. 1:31
    Unless you can think of the declaration that will make that task easier. 1:34
    All right, ready to test your box model skills? 1:38
    Have fun, and I'll see you in the next video. 1:41

    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