Essential front-end development

CSS Properties

Background color

The CSS property background-color can be used to set the background color of an element. The value of this property can be specified using any of the color specification alternatives we discussed in a previous lesson.

Code example

body {
  color: white;
  background-color: black;
}

Accessibility

The contrast ratio between the background color and the foreground text color must be high enough such that it can be read without causing strain to our eyes.

Firefox and Chrome has integrated contrast checkers that can help us check the contrast ratio and choose better colors. We can also use third party web sites like WebAIM contrast checker to manually check our contrast ratios.

Read more on MDN

background-color

Test yourself

Description

Change the background color of the .quote <div> element to

#a5d6a7

All relevant rules have been defined for you. Add declarations where appropriate.

Tests

  1. 1 Your .quote element should have the background color #a5d6a7.
  2. 2 You should open and close the .quote CSS rule with braces.
  3. 3 You should terminate the .quote background color CSS declaration with a semicolon.
Editor
Preview
Run tests (ALT+Q)
PrevNext