Backgrounds and Colors

Learning Objectives:

In this section, students will:

  • Review the different types of background and color rules.
  • Learn different ways of represent colors in CSS.

Backgrounds and Colors

One of the most common actions when using CSS is to change the color of some element(s). As shown in the previous part on Nesting Selectors, one way to change the color of one or more elements is to use the rule color and then a named color. While there are over a hundred named colors Links to an external site., CSS also understands other ways of representing and showing colors.

CSS Representation of Colors

Borrowing heavily from the history of design, colors in CSS can be represented in a wide array of different ways.

Named Colors

Named Colors

Named colors are simply that: colors which have pre-set names. They can be used in most browsers, and are a quick way to use a color based on knowing its name.

RGB

RGB

RGB stands for Red, Green, and Blue. Through a mixture of these three colors, all others can be created. Values for each color must be expressed in the range of 0 (least) to 255 (maximum) of that color. Taken in combination, they represent a full spectrum of colors.

Hexadecimal

Hexadecimal

Hexadecimal is a type of numerical representation where multiples of 16 are used to calculate larger numbers. In this system, number go up to 9 and values form 10-15 are replaced with letters a – f. Starting with the decimal representation of rgb(255, 192, 203), it can be represented as FFC0CB in hexadecimal.

HSL

HSL

HSL stands for Hue, Saturation, and Lightness. The first value, hue, is from 0 to 360 on the color wheel. The second and third values, Saturation and Lightness, are percentages of full color and shades of grey.

RGBA

RGBA

RGBA stands for Red, Green, Blue, and Alpha. It works like RGB, but with an additional value for how transparent the color should be. Values can range from 0.0 (fully transparent) to 1.0 (fully opaque).

HSLA

HSLA

Similar to HSL and RGBA, HSLA is HSL with a alpha (transparent) value from 0.0 (fully transparent) to 1.0 (fully opaque).

Background Rule

Background

The background rule in CSS is one of the most complicated rules in CSS simply because it serves a short-hand to many other background-related rules such as clip, color, image, origin, position, repeat, size, and attachment.

However, and in general, it does as it name implies: it sets the background. When used with one of the various ways to represent colors in CSS, for example, it sets the color of the background for that element (and all of its children).

Background Rule Usage

Color Rule

Color Rule

The color rule sets the color of the default content of a document. Since nearly all HTML document use text, this sets the color of text.

When used with the background rule, it can create a color contrast between the background and the color of the text itself.

Color Rule Usage

The color rule, like all other CSS rules, cascade down from a parent element to its children. Unless overridden by another, it becomes the new rule.

Play with the Code:

Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.

Try it Yourself:

Based on the ongoing CV example from the HTML modules, change the background color of the Skills section.

  • Using the background and color rules, change the Skills section(s) to visually look different than the rest of the document.

Test your response on Mozilla Thimble Links to an external site.!