"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.

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

Treehouse Club: JavaScript

Well done!

You have completed Treehouse Club: JavaScript!

Sign up for Treehouse Back to Library

Background Color, Margin, and Padding

1:19 with Joy Kesten

Explore some styling techniques in CSS, including the background color, margin, and padding.

HTML Color Chart

Color Picker

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

    In this video we're gonna talk about how to set the background and body styling. 0:00
    Let's get started. 0:04
    The first thing you find here on our style sheet is the background color, and when 0:06
    you hover over this hexidecimal number, it matches the background color to our page. 0:11
    You should change this color to something you like. 0:16
    So I've linked a few pages about hexadecimal colors in the teacher's notes. 0:19
    Next you have the body styling, even though there's no text on our webpage, 0:23
    the button images are all located inside the body. 0:29
    So we have to make sure they follow the styling we want. 0:32
    Here I've used two numbers to describe the margin. 0:35
    Margin and padding works in directions, starting at the top and going clockwise. 0:39
    Top, right, bottom, and left. 0:44
    However, in our body styling. 0:46
    We only use two values to describe the margin, zero and auto. 0:48
    This means the top and 0:53
    bottom will have the same value, and the left and right will have the same value. 0:54
    The zero says there's zero top and bottom margin, and 0:59
    auto tells the browser to automatically determine the left and right margin. 1:03
    And set them equal. 1:08
    That was a lot of information. 1:11
    Stay tuned for a code challenge on how to add a background color, margin, and 1:12
    padding in your CSS. 1:17

    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