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

Common Data Types

4:27 with Anwar Montasir

Every CSS property has a set of values it can accept. For example, we can use keywords that literally describe a value, like the color name "blue," or the words "auto" and "hidden." A value can also be described as a number, a length, an image, or a URL. Those values are categorized into what are called data-types, and there are lots to choose from. Again, we don't have to remember every CSS data-type and value out there. All we need is a good reference. I'll show you a good reference, then cover the common values and units CSS properties accept.

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

    [MUSIC] 0:00
    Every CSS property has a set of values it can accept. 0:04
    For example, we can use keywords that literally describe a value, 0:09
    like the color name blue, or the words auto and hidden. 0:15
    A value can be described as a number, a length, an image, 0:19
    or a URL. Those values are categorized into what are 0:24
    called data types, and there are lots to choose from. Again, we 0:29
    don't have to remember every CSS data type and value out there. 0:34
    All we need is a good reference. 0:39
    I'll show you a good reference, then cover the common values 0:41
    and units CSS properties accept. 0:46
    Before we get started, let's take a look at a great reference for 0:49
    CSS data types provided by the Mozilla Developer Network docs. 0:53
    Here, we're able to see a list of all the available CSS data types. 0:59
    Note that the data types in blue are currently part of the official 1:05
    CSS language, so you can click to learn more about them. 1:09
    The red data types are proposed additions that we'll hopefully 1:15
    learn about in the future. 1:19
    So what exactly is a CSS data type? 1:22
    When you look at the parts of a CSS rule, you'll 1:25
    remember that each selector is followed by one or more 1:28
    declarations inside curly braces, separated by semicolons. 1:33
    And each declaration consists of a property and a value. 1:39
    CSS data types are the acceptable values to accompany a property. 1:43
    Earlier, when we learned about selectors, we used a few CSS 1:49
    properties and values so we could see how they affected certain 1:55
    elements on the page. So we've already used a few data types 2:00
    up to this point, one of the most common ones being the 2:05
    color data type, for color values. 2:09
    If we click the color data type link in the MDN docs, 2:13
    we can see all the different ways we're able to 2:17
    define a color value. At the very bottom of the page, 2:21
    we see some common properties that use this data type, 2:27
    including backgrounds, border colors, and shadows. 2:32
    We'll revisit these later in this stage when we cover color values. 2:36
    Other common data types are integers, numbers, and percentages. 2:43
    We can use any positive or negative integer, number, or 2:49
    percentage values for CSS properties that accept these values. 2:53
    Usually, we'll define integers and number values with a length unit. 3:00
    The term length unit might sound a little confusing. 3:06
    But the concept here is that when you provide a number as 3:10
    part of a CSS value, you also need to specify a unit. 3:13
    To understand this, let's look at an example we wrote 3:19
    earlier that uses a number and a length in a value. 3:23
    In our CSS, let's give the h1 element a font-size property 3:29
    with a value of 90 pixels. 3:37
    If we remove the length unit, our browser can't make use of this value. 3:46
    90 what? 90 pixels, 90%, 90 ems? 3:54
    Let me undo that. 3:59
    Now 90 is the number data type, and px is the length. And there 4:02
    should never be a space in between the number and the length unit. 4:08
    Keep this length reference handy because we're going to cover 4:19
    these in depth, starting in the next video. 4:23

    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