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

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.

[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