Inline Styles
To change more options about the text, you must use the style attribute within a heading or paragraph tag. This tag allows you to specify the size, color, and other attributes of the text in your document.
Syntax:
<p style="color:color code;font-family:font name”font-size:12px">...</p>size is in pixels without a space. color code is a code specifying the text color.
| Example 1 |
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p style="color:#00ff00">This text appears in green.</p></p>
<p style="color:#0000ff;font-family:arial">This text appears in blue and arial font.</p></p>
<p style="color:#ff0000;font-family:georgia;font-size:20px">This text appears in red, georgia font, and size 20 pixels.</p></p>
</body>
</html>
|
In Example 1, the text inside the first <p> tag is set to the color #00ff00, which is a code for green. Note: When closing a tag, do not ever include anything more than just the tag. Continue to learn more about how to use color codes.
Understanding Color Codes
Color codes are always composed of six Hexadecimal (uses digits from 0-F, like 0, 1, 2… 9, A, B, C, D, E, F) digits. The first two digits specify how much red should be included in the color mix. 00 would be no red, and FF means the brightest possible red in the mixture. The next two digits specify how much green is in the mixture, and the last two digits specify how much blue enters in the mix.
Simple colors are easy to make. For example, the brightest green would be #00FF00 (no red, all green, no blue). A bright blue would be #0000FF (no red or green, strong blue).
Colors can also be made darker by reducing the amount of color. To make a dark red, use the code #990000. It includes only about half of the regular brightness of red. Similarly, a dark blue would be produced by the code #000099.
As you probably already guessed, the primary colors can be mixed to produce secondary colors. Mixing colors takes place using the rules of light color, not paint color. The primary colors of light are red, green and blue (not red, yellow and blue).
| Light Color Mixing | |
| Mix these… | Get this… |
| Red and Green | Yellow |
| Red and Blue | Purple |
| Green and Blue | Turquoise |
| Red, Green and Blue | White |
HTML Color Chart
Mixing other combinations and varying the brightness of each of the three primary colors produces a wide range of colors. The following chart shows how colors may be mixed and lists the code for each mixture for your reference.
| Red, Green and Blue | ||||
| 330000 | 660000 | 990000 | CC0000 | FF0000 |
| 003300 | 006600 | 009900 | 00CC00 | 00FF00 |
| 000033 | 000066 | 000099 | 0000CC | 0000FF |
| Red and Green Combinations | ||||
| 333300 | 336600 | 339900 | 33CC00 | 33FF00 |
| 663300 | 666600 | 669900 | 66CC00 | 66FF00 |
| 993300 | 996600 | 999900 | 99CC00 | 99FF00 |
| CC3300 | CC6600 | CC9900 | CCCC00 | CCFF00 |
| FF3300 | FF6600 | FF9900 | FFCC00 | FFFF00 |
| Red and Blue Combinations | ||||
| 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 990033 | 990066 | 990099 | 9900CC | 9900FF |
| CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| Green and Blue Combinations | ||||
| 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| Other | ||||
| 333333 | 999999 | FFFFFF | 333399 | CC6633 |
| 000000 | 666666 | CCCCCC | 3366FF | FF3366 |
Spend some time understanding how the above colors were created. You should see a connection between the hexadecimal digit combinations and the actual color produced. Now, without looking at the chart, try to guess what code was used for the following colors.
Background Color
You have already learned how to change the color of the text. Now, let’s look at how to change the background color of your web page. On simple web pages, only one color may be used for the whole background. It can be specified as part of the <body> tag. Here is the syntax (proper way to use it) of the <body> tag:
Syntax:
<body style="background-color:#color code">...</body>color code is a code specifying the text color.
Practice:
|
Color Names
HTML also has 17 standard color names that may be used by simply using their names. These are:
| red | green | blue |
| fuchsia | lime | aqua |
| maroon | olive | navy |
| orange | yellow | teal | purple |
| silver | black | white | gray |
There are other colors that are named. A list can be found here.