This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
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
Before we get started, let's take a look at a good reference for CSS data types provided by the Mozilla Developer Network docs. Then, we'll cover the most important data types we'd use on a day-to-day basis.
Quick Reference
[MUSIC]
0:00
Every CSS property has a set of values it
can accept.
0:04
For example, we can use key words that
literally describe a value,
0:08
like the color name blue, or the words
auto and hidden.
0:12
A value can also be described as a number,
a length, an image, or a URL.
0:16
Those values are categorized into what are
called a data types and
0:22
there are lots to choose from.
0:26
Again, we don't have to remember every CSS
data type and value out there.
0:28
All we need is a good reference, and I'll
show you a good reference,
0:32
then cover the common values and units CSS
properties accept.
0:35
Before we get started, let's look at a
great reference for
0:41
CSS data types provided by the Mozilla
Developer Network docs.
0:44
So, here we are able to see a list of all
the available CSS data types.
0:49
It starts with the angle data type and
0:53
goes all the way down to this user-indent
data type.
0:56
Now, we're not gonna cover all or even
most of these data types here, but
0:59
we will cover the most important ones
you'd probably use on a day-to-day basis.
1:04
So what exactly is a CSS data type?
1:08
Well, really, data type is just a fancy
way of saying a type of CSS value.
1:12
Earlier, when we learned about selectors,
we used a few CSS properties and
1:17
values, so we could see how they affected
certain elements on the page.
1:22
So we've already used a few data types up
to this point.
1:25
One of the most common ones being the
color data type, for color values.
1:28
So, for example, the values orange, light
blue, forest green and
1:33
light coral in these color properties are
considered color data types.
1:39
They're some of the predefined color key
words.
1:44
So if we click the color value data type
link in
1:47
the MDN docs, we can see all the different
ways we're able to define a color value.
1:51
And we can use these color values for
1:57
background color properties, color
properties, border colors,
2:00
shadows, and a few others listed here at
the bottom of the page.
2:04
And we'll revisit these later in the stage
when we cover color values.
2:11
So other common data types are integers,
numbers and percentages.
2:15
And we can use any positive or negative
integer, number or
2:23
percentage values for certain CSS
properties.
2:27
Usually, we'll define integer and number
values with a length unit.
2:30
Now length units are part of the length
data type.
2:35
We can use units like pixels, ems or
2:38
rems to specify a unit of measurement for
a number value.
2:41
Now, we're gonna cover these length units
in the next video, but let me
2:45
show you an example we wrote earlier that
uses a number and a length value.
2:49
So in our stylesheet we gave the h1 a
font-size property and
2:54
we gave it the value 90 pixels.
3:00
So in this value, 90 is the number data
type, and pixel is the length.
3:03
And there should never be a space between
the number and a length unit.
3:09
Otherwise it's invalid.
3:14
Make sure to keep this length reference
handy because,
3:15
as I mentioned, we're gonna cover most of
these starting in the next video.
3:18
So other common CSS data types are images
and gradients, and
3:22
these are commonly used with the
background-image property,
3:27
to give an element a background image or
gradient.
3:30
Now for defining a background image, we
write the path or
3:34
URL to the image we want to display using
a uri data type, which we use
3:38
to point to a resource like an image, as
we can see here in the example syntax.
3:43
So now that we're a little more familiar
with CSS data types and have a reliable
3:51
reference in these MDN docs, if we come
across a CSS property later and we want
3:56
to know the types of values it accepts,
well we can look for the data types.
4:01
So for instance, if we want to know all
the value types the font-size property
4:05
accepts, when we look up the font-size
property we can
4:10
see here under values that besides these
predefined keyword values,
4:14
font-size also accepts a length and a
percentage data type.
4:19
Moving forward, with this simple knowledge
we're now able to find the answers and
4:24
solutions to many questions or problems we
may encounter.
4:28
You need to sign up for Treehouse in order to download course files.
Sign up