Text Colour

The color property is used to set the color of the text. The color can be specified by:

  • name – a color name, like “red”
  • RGB – an RGB value, like “rgb(255,0,0)”
  • Hex – a hex value, like “#ff0000″

The default color for a page is defined in the body selector.

There are many ways to skin a cat. You can alter text colour using Inline Styles, Internal Styles, Internal Style Sheets or External (Cascading) Style Sheet known as CSS

Inline Styles

Inline coding can be used in HTML or PHP files to alter specific text like follows:

<p style=”color:red”>

Making text in between the paragraph open <p> and close </p> tags red as shown here

</p>

<font color=”#0000FF” > Will also make text blue in between the font open and close tags </font>

Internal Styles

In HTML as you may know the following code can be placed in the body tag to affect text on the whole page.

<body text=”#000000″> Making the text of the page black unless coded otherwise.

Internal Style Sheet

Text colour can also be changed in the open <head> and close </head> tags as follows:


<head>
<title>Text Colours</title>
<style type=”text/css”>
text_blue {color:blue;}
text_red {color:red;}
p {color:green;}
</style>
</head>


And then coded in the open <body> and close </body> tags as follows:


<body>
<text_blue> All header 2 elements will be blue </text_blue>
</body>


All text_blue elements will be blue


<body>
<text_red> All text_red elements will be red </text_red>
</body>


All text_red elements will be red


<body>
<p> All text in paragraph open <p> and close </p> tags will be green. </p>
</body>


All text in paragraph open <p> and close </p> tags will be green.


Exernal Style Sheet

Style sheet code, to make all text on the page black, paragraphs <p> Red, Headings 1 <h1> Green and Headings 2 <h2> Blue may look something like this:


body {color: #000000 }
p {color: #FF0000}
h1 {color: #00FF00}
h2 { color: #0000FF }


The style sheet “style.css” is called by the html or php file from within the header like so:

<head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<head>

The text colour within the open <body> and close </body> will be black.

The text colour within the open paragraph <p> and close </p> will be Red.

The text colour within the open heading 1 <h1> and close </h1> will be Green.

The text colour within the open heading 2 <h2> and close </h2> will be Blue.