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

CSS Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Percentages

5:31 with Anwar Montasir

We can also define number values more fluidly with percentage units because percentages, by nature, are always relative to something else. When we use a percentage unit in CSS, the percentage value is measured relative to a parent element's length. The size of the child element adjusts based on the parent element. Many properties like width, margin, and padding use percentages. And they're commonly used for layout, since they allow fluid sizing of elements relative to their container.

Further reading

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

    We can also define number values more fluidly with percentage units, 0:00
    because percentages by nature are always relative to something else. 0:05
    When we use a percentage unit in CSS, 0:11
    the percentage value is measured relative to a parent element's length. 0:13
    The size of the child element adjusts based on the parent element. 0:19
    Many properties like width, margin, and padding use percentages. 0:25
    And they're commonly used for layout, 0:31
    since they allow fluid sizing of elements relative to their container. 0:33
    For example, if we change our header's element width value to 80%, 0:39
    notice how the header takes up 80% of the browser window's width. 0:49
    And if we resize the browser, notice how the header width adjusts 0:55
    according to the browser window's width. 1:01
    If we add a left margin of 10%, 1:05
    Notice the left margin gap that's taking up 10% of the full browser width. 1:14
    I mentioned the child elements that use relative measurements will adjust 1:25
    based on the size of the parent element. 1:30
    Let's see how that works. 1:33
    In the html, I'm going to insert a div inside my header. 1:36
    A div is short for content division. 1:55
    And as it has no semantic meaning it's not a good replacement for 1:58
    a meaningful element like a header or a section element. 2:02
    However, when used in addition to semantic markup, divs allow 2:07
    me to add additional styles to my content. 2:12
    Now, let's style our new div. 2:17
    As we adjust the width of our browser, 2:39
    notice that the header is always 80% of the screen width, 2:42
    while the tomato-colored header box is always 50% of the header. 2:47
    When using percentages, CSS makes these adjustments for you. 2:52
    Percentages are a useful tool in responsive web design, where content 2:58
    responds to changes in the viewport or the visible area of a webpage. 3:02
    In our previous video where our header was a fixed width of 960 pixels, 3:09
    the header no longer fit on the screen if we shrunk the viewport to 3:15
    be narrower than 960 pixels and the header caused horizontal scrolling. 3:20
    With percentages, our header remains 80% of the viewport width, 3:26
    even on a small phone screen. 3:31
    We could make this better by using percentages to adjust our image size. 3:35
    Now as we adjust our browser, the image is no longer a fixed size, 3:50
    but remains 100% of the width of the header box div. 3:55
    Pretty cool, huh? 4:01
    We can also use percentages for font sizes where the size of the text 4:04
    is directly related to the font size of its parent. 4:09
    Right now our h1 is measured in pixels. 4:13
    But let's see what happens if we switch over to percentages. 4:16
    Keep in mind that the default font size in most browsers is 16 pixels. 4:25
    So our h1 is now 16 times four, or 64 pixels. 4:30
    Watch what happens when we increase our body copy size. 4:35
    My h1 is now quite a bit larger since 20 times four is 80 pixels. 4:53
    You'll notice that anywhere I used a fixed measurement, 5:00
    such as my p elements with a size of 26 pixels, 5:04
    there was no change when I hit refresh. 5:08
    Those are absolute measurements. 5:11
    So percentages are great for creating flexible content, but 5:15
    developers actually don't often use them for font sizes. 5:19
    In our next video, we'll introduce some CSS units that are more 5:24
    appropriate for working with type. 5:28

    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