Colors and Font Styles

HTML allows to specify colors for the page, the links, and the text.
Colors present problem on the web because of the way they are displayed by different platforms (Mac and Windows). The best thing to do is to use what is known as a Safe Palette, which consists of the 216 colors that are displayed safely across platforms. You can always work with thousands of colors, but not everyone using the web has the capability of viewing those many colors. Don't expect that everyone will see your pages exactly the way you see them.

Select this link to see the safe colors: The OFFICIAL 216 CROSS-PLATFORM BROWSER-SAFE COLOURS.

To indicate the color you want to include, you have to use a combination of six letters of numbers or letter preceded by the # sign.

 

  • Page:

    If you don't set the bakground of your page to a certain color, it will generally be displayed as grey. The background color of the page is set in the     BODY tag. In this case, the bakground is set to white:

    <BODY BGCOLOR="#FFFFFF">

    You can also make the background of your page show an image instead of a flat color:

<BODY BACKGROUND="image_name">

  • Text:

    In the same BODY tag you can set the color of all your text. Using the code from above, and to set the text of your web page to a dark blue, you would change it to:

    <BODY BGCOLOR="#FFFFFF" TEXT="#000066">

     

  • Links:

    Also in the BODY tag you can set the color for the links. There are different optional properties:

    • LINK: it defines the color of the link as it's showed before clicking on it. If you don't specify it, it's blue.

    • VLINK: it defines the color of the link once it has been cliked (visited) by an user. If you don't specify it, it's purple.

    • ALINK: it shows the color of the click as it is clicked (active). If you don't specify it, it's red.

    For instance, this is the code for a horrible page with fucsia background, blue text, white links, silvery visited links, and green active links:

<BODY BGCOLOR="#FF00FF" TEXT="#0000FF" LINK="#FFFFFF" VLINK="#C0C0C0" ALINK="#008000">

 

  • Letters, words:

    In the BODY tag you specify the colors for the entire document, but you can "color" paragraphs, words, or letter. To do that, include the property COLOR in the FONT tag:

    The code:

    <FONT COLOR="#FF6600"><B>orange (bold)</B></FONT>

    <B><FONT COLOR="#993399">Other bold</FONT><FONT COLOR="#336600">colors</FONT></B>

    		 The result:

    orange (bold)

    Other bold colors

 

  • Font Styles:

    You can change the appearance of a font type by including the following tags around words:

    The code:

    <B>bold</B>

    <I>italics</I>

    <U>underlined</U>

    		 The result:

    bold

    italics

    underlined