Common Data Types

[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