Essential front-end development

CSS Properties

Text color

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

Code example

h1 {
  color: red;
}

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

color

Test yourself

Description

Change the color of the main text in the .quote <div> element to

#093371

and the color of the <strong> element inside .quote to

#b71c1c

None of the rules or declarations have been defined for you. Use the knowledge you have gathered so far to define the appropriate rules and declarations. Remember to open and close rules using braces and end all declarations with semicolons.

Tests

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