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.

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.

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

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.

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.