Learning Code

Color

Colors can be set to either background areas or to text through CSS. You can have as many colors on a page as you would like, though a limited selection of colors is often the most harmonious.

Background Color

The property for a background color is background-color. Any element in the HTML could have a background-color, just use the element name as the selector. The syntax is as follows:

body {background-color: #f6dbbe;}

Body is the selector, "background-color" is the property, and the color is written in Hex#. Instead of Hex#, any of the other color formats could be used:

  • header {background-color: darkgrey;} (a standard dark grey)
  • article {background-color: rgb(255,255,255);} (white)
  • h1 {background-color: rgba(255,255,255,.8);} (a slightly transparent white)

There are other background propeties that we will cover later on. However, those properties can be combined in CSS shorthand. background is the shorthand for the combined background properties. When using the background shorthand, the syntax looks like this:

body {background: #f6dbbe;}

Font Color

The property for font color is color. Just like adding a background color, any element name can be used as a selector for any of the color formats. The following would change the text color in every paragraph:

p {color: #00008B;}

Sometimes you might want to set the same font color for multiple elements:

section, p {color: #00008B;}

Can you use the Try-it Editor to try out these concepts?