Lessons menu
CSS - intermediate - Lesson nr. 2
Backgrounds and color codes
What this lesson is about?

In this lesson we will learn to use color codes, this way we can use the shades of the colors we used in the previous lesson. We will try these color codes, by setting the background colors of the HTML elements we used previously. Although we use the separate CSS file to apply formatting, we will learn how to target a particular, selected HTML tag.


New HTML attribute in this lesson:

id – this attribute can be used to every HTML tag – we can add an unique identifier to a tag. With this identifier we can select unambiguously an HTML tag from the CSS file.


New CSS property in this lesson:

background-color – we need this property to add background color to any HTML tags.


Choosing a color:

To define colors we can use numbers/color codes besides the color names from the previous lesson.

We can even choose a color from a picture we used on the webpage. The Paint program has a color picker tool, after using it we can read the color code by pressing Edit Colors. The most common color code is given by the red, green and blue component of the color with a number from 0 to 255 for each of the three.

On the picture below, for the blue section of the pie chart the numbers are 79, 129 and 188. This numbers can be given as RGB(79,129,188) in the style of the webpage. (R – red, G-green, B-blue)

To use the color from the example above we can use the #4f81bc form too, we meet these types of codes in color tables for example https://www.w3schools.com/colors/colors_picker.asp. RGB(79,129,188) and #4f81bc (or #4F81BC) are the same colors: the number 79 is 4f in the hexadecimal form (in base 16), the number 129 referring to the green part of the color is 81.

It is valid to use the #1f0 abbreviated form, this means #11ff00.

Hexadecimal numbers are commonly used in IT, because they are easy to convert to the binary form and back and the numbers are considerably shorter in hexadecimal forms as in binary form. We only need to know about this, that in a hexadecimal number there are used the digits A, B, C, D, E and F (can use small caps too) with the usual 0, 1, …, 9 digits.

Example for setting the background color:

In the example above the color #f0f0f5 is added to the background of the body tag, as a result gray will be the base background color for the browser`s content. The CSS file contains background setting for the h1 tag too, this is the rgb(242, 217, 242). As a result the header has a separate purple background.


Referring to a particular HTML tag from the style:

If we use the <style> tag, or a style file for more HTML files we may need to refer to a concrete instance of an HTML tag and format it in a different way as the other parts marked by the same tag.

We can solve this by adding a unique identifier to the tag we need to format, and refer to it from the CSS file to add formatting.

In the example above the Some text is marked as paragraph in the html file, so is the Paragraph text. In this case if we want to format only the Some text paragraph we cannot use the p keyword in the style. We can add an identifier to this paragraph, pg is the value in this example. In the style we add a separate background to this identifier.

1. Select a lighter color, you can use the https://www.w3schools.com/colors/colors_names.asp page, write the code of the color to the CSS file and set it as the background color of your HTML files in the style.css file.
View the result
2. Edit the index.html page, set to the ordered an unique identifier and give it a background color. Write the color code in the style.css file.
View the result
3. Add a background color to table caption in the tips.html file. Use color code and write the formatting in the style.css file. This is the only table with a caption, we do not need to use an identifier.
View the result
4. Color the link with the text More about this in the aspects.html file with the green bar’s color code, from the chart.jpg image, in the images folder. Use an image editor to find its color code.
View the result
1. Which one is a correct color code definition?
2. Which of the following produces a blue background?
3. Which of the listed CSS formatting adds a background color to the HTML tag below?
<p id="name">Browsers</p>
4. Considering the HTML and CSS codes below, select which color will the text have in the browser?
<p id="par">This is a paragraph.</a></p>
a{ color: #0000ff; }
body { color: #00ff00; }
p{ color:#ff0000; }
#par { color: #ffff00; }
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept