HTML Basics Simple Use of Color

HTML BASICS—Simple Use of Color

Adding background color to your web page

If you are looking to add a little "splash" to your page, one of the most basic features is to change the background color of the page.
This is done by putting additional tag information inside the <body> tag. We call this addition a tag "attribute" since it is not entered as a separate tag. You will learn about many different attributes during this semester!
Any time you place information between the opening and closing brackets <info here>, I will refer to this as being "inside" the tag
You place text to be displayed "between" a pair of tags, i.e. <body>This is my sentence.</body>.
So, back to the background color. If you want to change the color of your pages background, you would add the bgcolor attribute to the body tag.
Web page coloring is based on a hexadecimal system. All colors are assigned a 6 character code that represents the desired color. Codes begin with a number sign.
To set your page background color to navy, for example, you would do the following: <body bgcolor = "#000080">. This is done in your opening body tag. the attribute is "bgcolor" and the equal sign and quotes are necessary. Remember, this is referred to as being inside the body tag. There are no spaces except after the initial tag word (body).
Now there is a massive amount of combinations for setting colors, and I do not expect you to memorize them. You should, however, make yourself familiar with at least a half dozen colors that you may use frequently. To help you out, here is a link to a good web site for determining colors: http://www.visibone.com/colorlab/
Remember that if you change the background color, you still need to pay attention to contrast. Dark backgrounds should have light text and vice versa.

Adding text color to your web page

To change all the text in your body to one color, you will add another attribute within your body tag.
The attribute to change text color is "text" and it would look like this:
<body text="#b22222">
You can add both attributes to the body tag and it would look like this:
<body bgcolor="#000080" text="#b22222">

Aligning text:

Now that you understand attributes, here is one for aligning text. If you wanted a heading to be centered, for example:
<h2 align= "center">
(left is the default; you can align center or right)

Basic inline styles:

The preferred method of formatting web pages is through STYLES known as CSS. We will discuss this in more detail later, but for now here is what you need to know:

Wrap the desired text with a set of <span> </span> tags
Inside the opening tag, add the style="________" attribute. The general form to add one style property looks like this:

<style="property:value">

Define the elements you want changed by the style by changing the word property above with either: color, font-family, or font-size (note that two-word properties require a dash and no spaces)
Replace the word value above with the desired value (red, arial, 12pt, etc.)

Examples of inline styles:

<span style="color:red">I am red!</span>

<span style=“color: red; font-size: 24pt”>Big red words!</span>

(note a semicolon between multiple properties)