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

Pixel Units

3:04 with Anwar Montasir

Usually, when defining a number value, we need to specify a length or unit of measurement for that value. If we don’t, the browser will likely not know what to do with that number value. So CSS offers different units for expressing length. Some length units are more flexible than others. For example, relative units and percentage units are always relative to other length values, which makes it easier for developers to layout content independently of screen size and resolution. Meanwhile, absolute units, like pixels, are always fixed in relation to each other. They don't scale like relative units do.

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

    Usually when defining a number value, we need to specify a length 0:00
    or unit of measurement for that value. If we don't, the browser 0:05
    will likely not know what to do with that number value. 0:07
    So CSS offers different units for expressing length. 0:13
    Some length units are more flexible than others. 0:20
    For example, relative units and percentage units are always relative 0:24
    to other length values, which makes it easier for developers to 0:29
    lay out content independently of screen size and resolution. 0:33
    Meanwhile, absolute units like pixels are always fixed in relation 0:39
    to each other. They don't scale like relative units do. 0:45
    As we learned in previous lessons, many CSS properties take length or 0:50
    percentage values for font size, padding, margin, width and more. 0:55
    When it comes to length values, there are several different unit 1:03
    types we can use. There are relative length units and absolute length units. 1:06
    We're going to cover absolute units first. 1:13
    There are seven absolute units in CSS. 1:17
    But measurements like inches and centimeters are only 1:20
    useful for the printed page. 1:24
    The most commonly used screen measurement is the pixel unit, 1:27
    which you might be familiar with by now. 1:30
    When we use pixels, the size we define will always remain the 1:34
    same and will not scale regardless of the browser window and size 1:39
    of the screen. If we give our header a width of 960px, 1:43
    The header will always take up 960px of the screen. 1:52
    We can see what that looks like in the browser. 1:58
    It no longer takes up the full browser width, only 960px. 2:01
    We can say the same about the pixel font sizes applied to our headings, 2:10
    the pixel based border values, or any value defined with a pixel unit. 2:16
    They will always remain a fixed size in relation to each other. 2:23
    Pixels are a common unit in web design, since they allow us 2:29
    to size and position elements precisely on a page. And CSS 2:32
    pixels are cool because they are considered device-independent. 2:37
    Even though not all screens have the same number of pixels per square inch 2:42
    an element measuring 10 pixels in CSS will appear to be the same size 2:47
    whether on a high-resolution screen or a low-resolution screen, 2:53
    helping you maintain consistency in your designs with one simple measurement. 2:58

    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