How To Use Color On Your Website

By HTMLGoodies Staff

Cascading Style Sheets (CSS) is the preferred method of changing text color, so first we will show the (archival) method of changing text color using inline HTML color codes, then we will move on to how to achieve the same effect using CSS.

Using Text Color (Hex) Codes

Then choose the best color to serve as the primary color for your website color scheme. For example, if you’re an organic food company, your best bet would probably be green because it’s associated with nature and health. Consider gender. Although this won’t apply to everyone, some companies mostly cater to a specific gender. To make a primary action pop out, you can pull out the contrasting color from your palette and put it to work. Besides making the button larger than the others on the page, you can use the contrasting color for the button's background to make sure everyone sees it. Like this one on Leashboss.com.

Simply enter the URL of the website you want to grab colors from, then press the Get the Colors button. This tool will then attempt to read that websites HTML and CSS files to find all of the HEX color codes. If colors are found, you will be redirected to the color combinations tester page where you can see all of their colors.

In order to change text colors, you will need two things:

1. A command to change the text.
2. A color (hex) code.

The color codes, as I mentioned above, are technically called hex codes. The codes are not very user friendly, so you'll need a chart to tell you what code makes what color. Well, I happen to have one right here: Click to go.

Drop by, grab a six-pack of color code, and come on back.

Old School: Changing Text Colors on the Whole Page

You have the ability to change full-page text colors over four levels:

<TEXT='######'> -- This denotes the full-page text color.
<LINK='######'> -- This denotes the color of the links on your page.
<ALINK='######'> -- This denotes the color the link will flash when clicked upon.
<VLINK='######'> -- This denotes the colors of the links after they have been visited.

How To Change Color On Your Website

These commands come right after the <TITLE> commands. Again, in that position they affect everything on the page. Also... place them all together inside the same command along with any background commands. Something like this:

< BODY BGCOLOR='######' TEXT='######' LINK='######' VLINK='######'>
Please note: When you write these codes, you can write them with a # sign in front of the hex code or not. It used to be that the symbol was required, but not any more. I still use it just because I started that way. You may want to just go with the six-digit code. Also make sure to place a space between each command and be sure to enclose it in quotation marks, like so:

<VLINK='#FFFFFF'>

Old School: Changing Specific Word Color

But I only want to changeoneword'scolor

How To Use Color On Your Website Using

You'll use a color (hex) code to do the trick. Follow this formula:

It's a pain in the you-know-where, but it gets the job done. It works with all H commands and text size commands. Basically, if it's text, it'll work.

Using Cascading Style Sheets (CSS) to Change Text Colors

How To Use Color On Your Website As A

There isn't enough space to fully describe what CSS is capable of in this article, but we have several articles here that can get you up to speed in no time! For a great tutorial on using CSS to change color properties, check out this article by Vincent Wright.

A quick intro to CSS is in order, so let's describe it a bit. CSS is used to define different elements on your web page. These elements include text colors, link colors, page background, tables, forms--just about every aspect of the style of the web page. You can use CSS inline, much like the HTML above, or you can, more preferably, include theh style sheet within the HEAD tags on your page, as in this example:

Alternately, you can include the CSS that is between the STYLE tags above, and save it in a file that you could call 'basic.css' which would be placed in the root directory of your website. You would then refer to that style sheet by using a link that goes between the HEAD tags in your web page, like this:

How To Use Color On Your Website For Beginners

As you can see in the example above, you can refer to the colors using traditional color names, or hex codes as described above.

The use of CSS is vastly superior to using inline FONT tags and such, as it separates the content of your site from the style of your site, simplifying the process as you create more pages or change the style of elements. If you are using an external style sheet, you can make the change once in the style sheet, and it will be applied to your entire site. If you choose to include the style sheet itself within the HEAD tags as shown above, then you will have to make those changes on every page on your site.

CSS is such a useful tool in your web developer arsenal, you should definitely take the time to read more about it in our CSS Tutorials section.

Loadmesh384