Comp25: Colors

Formatting Text with Color

Many of the tags that we have learned thus far can be modified to change their appearance. Color is just one way that we can do this.

When addressing the style of any tag, we use the same attribute:

style="color: blue"

Remember, an attribute is a part of a tag that specifies how that tag should appear or behave. The <img> tag had an attribute called "src". The <a> tag had an attribute called "href". Almost every tag in HTML has an attribute called "style" that we can use to specify how it appears.

If we wanted to change the way that text appeared inside an H1 tag, we would do this:

<h1 style="color: orange">This Heading is in Orange</h1>

It is very important that you are careful with the syntax shown here. Like all attributes, the information for style follows an equals sign and is surrounded by quotes. We then specify the property we are changing (in this case: color) followed by a colon and then the value (in this case: orange).

Notice that we do not need to end the style. It ends when the element ends. There are ways, which we will learn about, to modify groups of elements all at the same time.

Background Color

Likewise, we can change the background color of elements. Consider this style:

<body style="background-color: blue"> ... </body>

There are ways to add an image for a background, but we'll discuss that later.

Border Color

We can change the border of any element as well. Here's how that might look:

<p style="border-color: green; border-style: solid"> Blah blah blah. </p>

Notice with the border, we need to specify a second characteristic: border-style.

Combining Styles

You might want an element to have a orange border with a black background. Here's how you combine two styles together:

<ul style="border-color: orange; border-style:dotted; background-color: black"> ... </ul>

Notice how the two styles are separated with a semicolon (;) but they are still inside the same "style" attribute.

Here is another way to write it and get the same results:

<ul style="border-color : orange; border-style : dotted; background-color: black"> ... </ul>

If you look carefully, both examples are identical. The second method might be easier to read if you are modifying the element with a number of styles all at once.

Color Choices by Name

As you have already picked up, colors can be referenced by their name as shown in the examples above. Here are a few common colors and their names:

aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow

That's just sixteen colors. Click here for the full list of Hex Color Codes

Color Choices by Number

Looking for a color that doesn't have a proper name? Maybe you want a very specific shade of orange. By referencing colors by a numeric value, you have 16,777,216 choices (that's 256 x 256 x 256). We call this 24-bit color because we use 24 bits to describe how much red, green, and blue make up the color we want.

Specifying a color by number follows this easy syntax:

<hr style="color: rgb(50,150,0)">

It's actually the same syntax as we've been using before, but instead of a color's name we write "rgb(x, y, z)". As you might have guessed, RGB stands for "red green blue". The three values each range from 0 to 255, and specify how much of that pigment we're going to use in our new color.

Here's some examples with how it turned out:

rgb(50,150,0) rgb(0,255,255) rgb(200,0,0) rgb(70,70,70)

Almost all digital photo programs like PhotoShop (and even Paint) support coloring by number. You can use these programs to choose a color and find its RGB value.

Introducing HTML Styles

Through this reading, you have learned a new HTML attribute: style. In the next reading you will learn the true power of this attribute.

Next... Styles