Chapter 1.3.3 - Common CSS Property Values

Properties

Once an element is selected, a property determines the styles that will be applied to that element. Property names fall after a selector, within the curly brackets, {}, and immediately preceding a colon, :. There are numerous properties we can use, such as background, color, font-size, height, and width, and new properties are often added. In the following code, we are defining the color and font-size properties to be applied to all <p> elements.

p {
	color: ...;
	font-size: ...;
}

Values

We can determine the behavior of a property with a value. Values can be identified as the text between he color, :, and semicolon, ;. In the example below, we are selecting all <p> elements and setting the value of the color property to be orange and the value of the font-size property to be 16 pixels.

p {
	color: orange;
	font-size: 16px;
}

Note: it is common practice to indent the property and value pairs within the curly brackets (usually with 2 spaces, though 4 spaces are used in these examples).

Common CSS Property Values

There are a few ways to specify color and length property values. Those are outlined below respectively.

Colors

CSS defines color values on an sRGB (standard red, green, and blue) color space. We can form colors by combing red, green and blue color channels together at different levels. There are four ways to represent colors within CSS: keywords, hexadecimal notation, RGB and HSL values.

Keyword Colors

Keyword color values are names (such as red, green, or blue) that map to a given color. Most common colors have keyword names. You can find all of these keywords here.

.btn {
	background: yellow;
}
.task {
	background: red;
}

Here we apply the property value yellow to the class btn and the property value red to the class task.

Hexadecimal Colors

A hexadecimal color value begins with a # (pound or hash) followed by a six-character figure. The figures use the numbers 0 through 9 and the letters a through f. Since one hexadecimal digit can take 16 different values (0-9 and a-f), two of them combined can take 16*16=256 values. Each such pair defines red, green, and blue (RGB) color channels. For reasons we don't have to get into, RGB can show most of the visible colors, and it is used in web development and many other applications to define colors.

The color white, for example, is made by mixing each of the three primary colors at their full intensity, resulting in the Hex color code of #FFFFFF.

Black, the absence of any color on a screen display, is the complete opposite, with each color displayed at their lowest possible intensity and a Hex color code of #000000.

The color red can be made by using only the red channel and leaving blue and green channels at 0.

Understanding the basics of Hex color code notation we can create grayscale colors very easily, since they consist of equal intensities of each color:

You can find a full list of common hexademical color mappings here.

There are millions of hexadecimal colors, over 16.7 million to be exact. There are 16 options for every character in a hexadecimal color, 0 through 9 and A through F. With the characters grouped in pairs, there are 256 color options per pair (16 multiplied by 16, or 16 squared). And with three groups of 256 color options we have a total of over 16.7 million colors (256 multiplied by 256 multiplied by 256, or 256 cubed).

.btn {
	background: #FFFF00;
}
.task {
	background: #FF0000;
}

We can recreate the yellow and red colors from before by using their hexadecimal values.

RGB & RGBa Colors

RGB color values are stated using the rgb() function, which stands for red, green, and blue. The function accepts three comma-separated values, each of which is an integer from 0 to 255. A value of 0 would be pure black; a value of 255 would be pure white.

The first value within the rgb() function represents the red channel, the second value represents the green channel, and the third value represents the blue channel.

.btn {
	background: rgb(255, 255, 0);
}
.task {
	background: rgb(255, 0, 0);
}

We can, once again, recreate the yellow and red colors from before by using their rgb() combination.

RGB color values may also include an alpha, or transparency, channel by using the rgba() function. The rgba() function requires a fourth value, which must be a number between 0 and 1, including decimals. A value of 0 creates a fully transparent color, meaning it would be invisible, and a value of 1 creates a fully opaque color. Any decimal value in between 0 and 1 would create a semi-transparent color.

.btn {
	background: rgba(255, 255, 0, .25);
}
.task {
	background: rgba(255, 0, 0, .1);
}

We can make our yellow color 25% opaque by setting the final parameter to .25 and, similarly, we can make our red color 100% opaque by setting its last parameter to 1.

HSL & HSLa Colors

HSL color values are stated using the hsl() function, which stands for hue, saturation, and lightness. Within the parentheses, the function accepts three comma-separated values, much like rgb().

The first value, the hue, is a unitless number from 0 to 360. The numbers 0 through 360 represent the color wheel, and the value identifies the degree of a color on the color wheel.

The second and third values, the saturation and lightness, are percentage values from 0 to 100%. The saturation value identifies how saturated with color the hue is, with 0 being grayscale and 100% being fully saturated. The lightness identifies how dark or light the hue value is, with 0 being completely black and 100% being completely white.

.btn {
	background: hsl(60, 100%, 50%);
}
.task {
	background: hsl(0, 100%, 50%);
}

Using hsl(), we can recreate our previous colors by setting the hue to 60 for yellow and 0 for red.

HSL color values, like RGBa, may also include an alpha, or transparency, channel with the use of the hsla() function. The behavior of the alpha channel is just like that of the rgba() function. A fourth value between 0 and 1, including decimals, must be added to the function to identify the degree of opacity.

.btn {
	background: hsl(60, 100%, 50%, .25);
}
.task {
	background: hsl(0, 100%, 50%, 1);
}

We can set the opacity of our yellow color to 25% by setting the last parameter to .25 and the opacity of our red color to 100% by setting the last parameter to 1.

Hexadecimal color values are the most widely used and supported amongst different browsers.

Lengths

We use two different types of lengths, absolute and relative, to set the size and shape of our elements in CSS.

Absolute Lengths

Absolute lengths represent physical measurements such as inches, centimeters, pixels and millimeters. The most popular absolute unit is the pixel, represented by the px unit notation.

The pixel is equal to 1/96th of an inch; thus there are 96 pixels in an inch. The exact measurement of a pixel, however, may vary slightly between high-density and low-density viewing devices.

p {
	font-size: 14px;
}

We can use the pixel to set the font size of a p tag to 14px.

Pixels don't adapt too well from device to device but they are still a ubiquitous unit used in styling.

Relative Lengths

Relative lengths, by definition, are not fixed and thus they rely on the length of some other measurement.

Percentages

Percentage lengths are defined in relation to the length of another object.

.col {
	width: 50%;
}

We can set the width of an element in the col class to be 50% of the parent element's width.

Em

The em unit is represented by the em unit notation, and its length is calculated based on an element's font size.

A single em unit is equivalent to an element’s font size. So, for example, if an element has a font size of 14 pixels and a width set to 5em, the width would equal 70 pixels (14 pixels multiplied by 5).

.banner {
	font-size: 14px;
	width: 5em;
}

When a font size is not explicitly stated, the em unit will be relative to the font size of the closest parent element with a stated font size. The em unit is often used for styling text, including font sizes, as well as spacing around text, including margins and paddings.

Rem

The rem unit is represented by the rem unit notation, and it is similar to em but it's length is calculated based on the website's font size. For example, while 1 em can be different from element to element (depending on its size and its parent elements' sizes), 1 rem will remain the same across the page. We will be mostly using rem since it is universal and allows for consistent design across different screens. It is also the unit used in Tailwind CSS, but more on that in Chapter 4.2.