Introduction to Colors and Backgrounds
In this lesson you will learn how to adjust colors and background colors on your web page. We will also consider more advanced methods, such as positioned and controlled backgrounds. The following CSS properties are explained:
- Color
- Background-color
- Background-image
- Background-repeat
- Background-attachment
- Background-position
- Background
Foreground color: the property 'color'
The color property describes the foreground color of an element. Suppose we want that all headings in a document are in red. All titles are compatible with the HTML element <h1>. The following code sets the color of <h1> elements to red.
h1 (
color: # ff0000;
)
Colors can be used as hexadecimal values, as in the example above (# ff0000), with the English color names ( "red") or as RGB values (rgb (255,0,0)).
Background Color: the property 'background-color'
The background-color property describes the background color of an element. The element <body> contains any content of an HTML document. Therefore, in order to set the background color of the whole page you need to change the property 'background-color' <body> for the element to be allocated.
You can also use other elements, such as Headers or plain text to assign a background color. In the following example, the <body> - and the elements <h1> will be assigned different background colors.
body (
background-color: # FFCC66;
)
h1 (
color: # 990000;
background-color: # FC9804;
)
Note that the element <h1> has two properties and have assigned them with a semicolon as a separator.