CSS: Values and Units of Measurement
Overview
In CSS, property length values are needed to provide layout and presentation control. There are two main types - absolute and relative. The absolute type of length is not relative to anything else and is typically the same size on most devices. Relative types of lengths are dependent on other items including the parent, sibling, or the size of the viewport.
"Every property used in CSS has a value type defining the set of
values that are allowed for that
property."
"The numeric type you will come across most frequently is the length (or unit of measurement). For example, 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become." - MDN
"The numeric type you will come across most frequently is the length (or unit of measurement). For example, 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become." - MDN
Prepare
- Watch: 🎦 CSS: Units of Measurement (4:47 mins, Transcript )
- Color values in CSS can be coded by:
- keyword:
antiquewhite,burlywood,yellow,lightyellow, etc. - hexadecimal RGB (red, green, blue):
#faebd7
where the first two characters are the red value, the next two are the green value, and the last two are the blue value in hexadecimal (base16) format (0 to F). - RGB or RGBA:
rgb(250, 235, 215)orrgba(250, 235, 215, 1)
whereris a red value ranging from 0 to 255,gis a green value ranging from 0 to 255,bis a blue value ranging from 0 to 255, and theais the alpha value ranging from 0 to 1. - HSLA which is hue, saturation, lightness, and alpha:
hsla(34, 78%, 91%, 1)
- keyword:
"There are many ways to specify color in CSS, some of which are more
recently implemented than others. The same color values can be used everywhere in CSS,
whether you are specifying text color, background color, or whatever else." - MDN
Activity Instructions
In this activity, answer the following questions about CSS value units/lengths.
- What is the most common absolute length unit for screens?
📑Help - Scroll down to Absolute length units to find the answer.
Answer
px (pixels)
- Which CSS relative length unit is based upon the font size of the
root element?
Answer
rem
- Given a hexadecimal (base16) color value of #00aa9a,
what value is the Green level?
Answer
aa
There are two hexadecimal values per color. First red and then green, and then blue. That is why there are six total characters.
Optional Resources
- CSS Values and Units - MDN
- Color Section - MDN
- Named Colors / Keywords - MDN