• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 11/12/18

Color and background

Log in or subscribe for free to enjoy all this course has to offer!

Let's continue our overview of the existing CSS properties. We're now going to look at the properties directly or indirectly related to the color. We going to see among other things:

  • how to change the text color;

  • how to add a color or background image;

  • how to add shadows;

  • how to vary transparency levels.

CSS still has plenty of surprises in store!

Text color

Let's now turn to the vast topic of color.

How do you mean, "vast"?

You already know about the property used to change the text color: it's color. We're going to look at the various ways of specifying color, as there are several.

Specifying the color name

The most simple and most convenient way to choose a color is to type its name.
The only drawback with this method is that there are only sixteen so-called "standard" colors. Although there are other informal colors, I won't bother showing them to you as they don't necessarily work the same way in all browsers.

The next figure shows the sixteen colors you can use by simply typing their name.

The sixteen color names that can be used in CSS
The sixteen color names that can be used in CSS

To change the color of all the titles to brown, you would thus enter:

h1
{
    color: maroon;
}

You can see the result in the next figure.

The title is written in brown
The title is written in brown

Hexadecimal notation

But sixteen colors is all the same a bit limited when you consider that most monitors can display sixteen million.
On the other hand, mind you, if you had to give a name to each of the sixteen million colors...

Fortunately, there are several ways in CSS to choose a color from all the existing ones. The first way I'll show you is the hexadecimal notation. Although it is commonly used on the Web, there's also another method that we're going to see later.

This is what a color name in hexadecimal looks like: #FF5A28. Simply put, it's a combination of letters and numbers that specify a color.
You should always start by writing a hash character (#) followed by six letters or digits from 0 to 9 and A to F.
These letters or numbers work in pairs. The first two digits specify the quantity of red, the next two the quantity of green and the last two the quantity of blue. By mixing these quantities (which are the color's Red-Green-Blue components), you can get the color you want.

Thus, #000000 corresponds to black and #FFFFFF to white. But don't now ask me what combination to use to produce the "sunset" orange color as I have absolutely no idea.

Here, for example, is how you apply white to paragraphs in hexadecimal:

p
{
    color: #FFFFFF;
}

The RGB method

What does RGB mean? Red-Green-Blue, which is abbreviated as "RGB". As with the hexadecimal notation, to choose a color, you have to define a quantity of red, green and blue.

This odd story about quantities of red-green-blue again?

Yes, but in this case you'll see that it's much more practical and with a simple drawing program such as Paint, you can find the color you want. Here are the steps to be followed:

  1. Start the Paint program from the Start menu.

  2. Go to the Edit colors section, as shown in the next figure.

  3. A window opens. In the box that appears on the right, move the sliders to select the color you want. Suppose you have a mad desire to write your titles <h1> in pink (only supposing). Select the color in the window, as shown in the next figure.

  4. Note the corresponding quantities of Red-Green-Blue indicated at the bottom right of the window (in this case 240-96-204). Enter these values in the same order in the CSS file, as shown in the code below.

p
{
    color: rgb(240,96,204);
}
Changing colors in Paint
Changing colors in Paint
Selecting a color in Paint
Selecting a color in Paint

As you could see in the example, to use the RGB method, you have to type rgb(Red, Green, Blue) replacing "Red, Green, Blue" by the corresponding numbers. For information, these quantities are always between 0 and 255.

Background color

To specify a background color, use the CSS background-color property. This is used in the same way as the color property, in other words, you can type the name of a color, enter it in hexadecimal notation or again use the RGB method.

To specify the web page background color, you have to work with the <body> tag. Indeed, <body> corresponds to the whole web page, so by changing its background color you'll change the color background of the page.

Look very carefully at this CSS file:

/* We're working with the body tag, and so with the WHOLE page */
body
{
    background-color: black; /* The page background will be black */
    color: white; /* The page text will be white */
}

The result of this code can be seen in the next figure.

White text on a black background
White text on a black background

But you asked for the text of the <body> tag to be written in white, and all the <p> paragraphs and <h1>titles took this color. Why is that?

Indeed, I wanted to take this opportunity to talk to you about this. This is known as inheritance. But I can reassure you right now, nobody died.

CSS and inheritance

In CSS, if you apply a style to a tag, all the tags that are inside will take the same style.

It's actually easy to understand and intuitive. As you know, the <body> tag contains among others the <p> paragraph and <h1> title tags.

If I apply a black background color and a white text color to the <body> tag, all my titles and paragraphs will also have a black background and white text... This phenomenon is called inheritance: the tags that are inside another tag are said to "inherit" its properties.

This means that ALL the text of my web page will necessarily be in white?

No, not necessarily. If you say later on that you want your titles to be in red, this style will take precedence and your titles will thus be in red. However, if you don't specify anything in particular (as we did earlier), then your titles will inherit the white color.
Let's be clear, this doesn't just work for the color alone. All CSS properties are inherited: for example, you can assign bold in the <body> tag and all your titles and paragraphs will be in bold.

Example of inheritance with the <mark> tag

People tend to think that they can only change the background color of the page. This is not so: you can change the background of any item: your titles, your paragraphs, certain words, etc. In this case, they will appear highlighted (as if marked with a marker pen).

For example, do you remember the <mark> tag which is used to highlight certain words? Let's use it again here:

<h1>Who turned off the lights?</h1>

<p>Brr, it's all black on this website; it's a rather <mark>disturbing</mark> atmosphere don't you think?</p>

As default, the text appears on a yellow background. You can change this behaviour in CSS:

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

mark
{
    /* The background color overrides the color of the whole page */
    background-color: red;
    color: black;
}

The red background color applies to the text of the <mark> tag. Indeed, even if the background of the page is black, it is the CSS property of the most specific item that has priority (next figure).

A red highlighted text on a black background
A red highlighted text on a black background

The same principle applies to all HTML tags and all CSS properties! If you say:

  • my paragraphs have a size of 1.2 em;

  • my important texts (<strong>) have a size of 1.4 em

... you might think that there would be a conflict. If the important text is part of a paragraph, what size should it be given? 1.2 em or 1.4 em? CSS decides that the most specific declaration takes precedence: as <strong> corresponds to a more specific item than paragraphs, the text will be written in 1.4 em.

Background images

In the following examples, I'm going to change the background image of the page. However, as for the background color, don't forget that the background image does not necessarily apply to the whole page. You can also put a background image behind titles, paragraphs, etc.

Applying a background image

The property used to specify a background image is background-image. As a value, you have to specify url("nom_de_l_image.png"). For example:

body
{
    background-image: url("snow.png");
}

Which gives result shown in the next figure.

A background image on the page
A background image on the page

Of course, your background is not necessarily in PNG, but can also be in JPEG or GIF format.
The address indicating the location of the background image can be written as absolute address (http://…) or as a relative address (fond.png).

Options for the background image

The background-image property that we've just seen can be supplemented by several other properties that allow the behavior of the background image to be changed.

background-attachment: attaching the background

The CSS background-attachment property is used to "attach" the background. The effect obtained is interesting as you can now see the text "slide" over the background. Two values are available:

  • fixed: the background image remains fixed;

  • scroll: the background image scrolls with the text (default).

body
{
    background-image: url("snow.png");
    background-attachment: fixed; /* The background will remain fixed */
}
background-repeat: background repetition

As default, the background image is repeated in a mosaic pattern. You can change this with the property background-repeat:

  • no-repeat: the background will not be repeated. The image will be unique on the page.

  • repeat-x: the bottom will be repeated only on the first line, horizontally.

  • repeat-y: the bottom will be repeated only on the first column, vertically.

  • repeat: the background will be repeated in a mosaic pattern (default).

Example of use:

body
{
    background-image: url("sun.png");
    background-repeat: no-repeat;
}
background-position: background position

You can specify the required position of the background image with background-position. This property is only useful if it is combined with background-repeat: no-repeat; (a background that does not repeat).

You have to enter two values in pixels for background-position to specify the background position relative to the top left corner of the page (or paragraph, if you apply the background to a paragraph). So if you enter:

background-position: 30px 50px;

... your background will be placed 30 pixels from the left and 50 pixels from the top. It is also possible to use these values:

  • top: at the top;

  • bottom: at the bottom;

  • left: to the left;

  • center: centered;

  • right: to the right.

These words can be combined. For example, to align an image at the top right, you would type:

background-position: top right;

So if I want to display a sun as a background image (next figure), just once (no-repeat), always visible (fixed) and positioned at the top right (top right), I would write this:

body
{
    background-image: url("sun.png");
    background-attachment: fixed; /* The background will remain fixed */
    background-repeat: no-repeat; /* The background won't be repeated */
    background-position: top right; /* The background will be displayed at the top right */
}
A sun as a background image in the top right corner
A sun as a background image in the top right corner

Combining properties

If you use a lot of properties in relation to the background (as is the case in the last example), you can use a sort of "super-property" called background whose value can combine several previously seen properties: background-image, background-repeat, background-attachment and background-position.

We can thus simply write:

body
{
    background: url("sun.png") fixed no-repeat top right;
}

This is the first "super-property" that I'm showing you, but there will be others. You should know the following:

  • The order of the values doesn't matter. You can combine values in any order.

  • You don't have to enter all the values. So if you don't want to enter fixed, you can remove it without any problem.

Several background images

Since CSS3, you can assign several background images to an item. To do this, simply separate the declarations by a comma, like this:

body
{
    background: url("sun.png") fixed no-repeat top right, url("snow.png") fixed;
}

The first image of this list will be placed on top of the others (figure below). So beware, the image declaration order is important: if you reverse the sun and the snow in the CSS code above, you'll no longer see the sun!

Multiple background images
Multiple background images

Note that multiple background images work on all browsers except older versions of Internet Explorer, which only recognize this feature as of version 9 (IE9).

Transparency

CSS allows us to very easily vary the transparency levels of items! To do this, we'll use CSS3 features: the opacity property and RGBa notation.

The opacity property

The very simple opacity property is used to specify the opacity level (which the reverse of transparency).

  • With a value of 1, the item will be completely opaque: this is the default behavior.

  • With a value of 0, the item will be completely transparent.

So you have to choose a value between 0 and 1. With a value of 0.6, your item will thus be 60% opaque ... and you'll be able to see through it!

Here's how it can be used:

p
{
    opacity: 0.6;
}

Here's an example that will give you an idea of transparency. You can see the result in the next figure.

body
{
    background: url('snow.png');
}

p
{
    background-color: black;
    color: white;
    opacity: 0.3;
}
A transparent paragraph
A transparent paragraph

Note that transparency works on all browsers, including Internet Explorer as of IE9 upwards.

The RGBa notation

CSS3 provides us with another way to vary the transparency: the RGBa notation. This is, in fact, the RGB notation we saw before, but with a fourth setting: the transparency level (called "alpha channel"). With a value of 1, the background is completely opaque in the same way as above. With a value of less than 1, it's transparent.

p
{
    background-color: rgba(255, 0, 0, 0.5); /* Red, semi-transparent background */
}

It's as simple as that. You can get exactly the same effect as with opacity just using the RGBa notation. Give it a try!

This notation is known by all newer browsers, including Internet Explorer (as of IE9 upwards). For older browsers, it is recommended to specify the conventional RGB notation as well as RGBa.
So although for these browsers, the background will not be transparent, at least there will be a background color.

p
{
    background-color: rgb(255,0,0); /* For older browsers */
    background-color: rgba(255,0,0,0.5); /* For newer browsers */
}

Summing up

  • You change the text color with the color property, and the background color with background-color.

  • You can specify a color by enter its name (black, for example), in hexadecimal form (#FFC8D3) or in RGB notation (rgb(250,25,118)).

  • You can add a background image with background-image. You can choose to attach the background image, display it as a mosaic pattern or not, and even position it anywhere on the page.

  • You can make a portion of the page transparent with the opacity property or with the RGBa notation (same as the RGB notation, with a fourth value indicating the transparency level).

Example of certificate of achievement
Example of certificate of achievement