HTML

UNIT 4 COLORS

Back to the index| Previous | Next

Competences: To color the web page

Contents:
Red, Green and Blue components,
Hexadecimal numeration (optional)
Style properties: of the body tag: background-color and color.
primary_color07 (5K)
The web colors are composed by 3 components: the Red, the Green e the Blue
Every component can be expressed as a number from 0 to 255
(in hexadecimal numeration from 0 to FF)

RED component
 GREEN component
BLUE component SUM COLOR

Click on Red, Green or Blue component and insert a value from 0 to 255
(the higher is the number, the brighter is the color)

You can see 3 fondamental colors and the SUM COLOR.


As you can see, the code of the SUM COLOR is formed by the # symbol plus 2 digits for red, 2 digits for green and 2 digits for blue component.

How to color the page background and the text

The background and the text color of your web page aren't elements releated to the contents, but to the page style
It's a good practice to set this informations inside the STYLE tag in the HEAD section.

The selector is the body and the properties are background-color and color.

<head>
<style>
body { background-color: value; color: value; }
</style>
</head>

The color value is the color code.

Code Output
<head>
<style>

body { background-color:#000000; color:#FF0000; }

</style>
</head>
red on black
<head>
<style>

body { background-color:#FF0000; color:#FFFFFF; }

</style>
</head>
white on red
<head>
<style>

body { background-color:#00FF00; color:#0000FF; }

</style>
</head>
blue on green
<head>
<style>

body { background-color:#0000FF; color:#FFFFFF; }

</style>
</head>
white on blue


Note: Don't use the same color for the background and the text!!!

For mathematics people: Do you want to know more about hexadecimal numbers?

For everyone: Do you want to see more colors?

Do you hate the numbers? No problem!! Many colors have a simple name-color!

Code Output
<head>
<style>

body { background-color:cyan; color:red; }

</style>
</head>
red on cyan
<head>
<style>

body { background-color:red; color:yellow; }

</style>
</head>
yellow on red
<head>
<style>

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

</style>
</head>
black on violet
<head>
<style>

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

</style>
</head>
white on purple



Color your web page!

  • Open your file index.htm with a text editor and add in the body style the background-color and color properties.
    Try some color: black, white red, green, blue, aqua, brown, violet, azure, beige, cyan, grey .... 
    • <html>
<head>
<style>
body { background-color: .....; color: .......;}
</style>
</head>
<body>
 This is my first colored web page
 .........
</body>
</html>
  • Save the modified file
  • Put this file in your work area in the Comenius site (The old file will be deleted!)
  • Write a message in the forum "Colors" to inform that your page is ready!


    • Ludovica Battista
    Back to the index| Previous | Next