In this tutorial you will learn how to change color in HTML of text and backgrounds in easy and simple ways. There are over 16 million colors in HTML. The 6-digit hex values for all colors used in HTML can be easily found on the internet.
Changing color in html of text can be approached in various ways. We can either set a universal color for all the text on a web page, or we can set color of a particular paragraph separately.
Step # 1 – Coloring text universally
While changing color in html our first approach will be to set a universal text color for one web page. To set a universal color of all text on page, for example; red, the attribute “text” is used in the body element along with a 6-digit hex value denoting the color red.
body text=”#DD0000”
/body
The browser considers this color as universal to all text on the web page.
Step # 2 – Coloring a paragraph
Now, after coloring all text as red, if we wish to change the color of a particular piece of text to green, we can use the element “font” and set the 6-digit hex value of green in the “color” attribute. The text to be colored should be placed inside the font element.
font color=”#00DD00” Sample text /font
This change is specific to a piece of text and overrules any text color set at the universal level. The browser reads these changes in the form of precedence. The coloring defined to an individual element has more precedence than the coloring defined to a group of elements.
Step # 3 – Coloring the background
Changing background color in HTML is similar to changing text color. The color of all the complete web page can be changed by the “bgcolor” attribute in the body element. This attribute takes a 6-digit hex color value. We will change the background of our web page to black by editing the code with the following changes:
body bgcolor=”#000000”
/body
Step # 4 – Coloring a table cell
Apart from changing color of the background of an HTML page, background of tables and separate cells can also be colored individually. This is done with the “bgcolor” attribute in the table element, and the table data element. The code for changing the background color for all elements is similar to the one of the body element.
To clearly outline the selective coloring we will color the background of a table cell white as shown below:
tabl e
tr
td bgcolor=”#FFFFFF”
/td
/tr
/table
And that’s pretty much all you need to learn about how to change color in html.
Home