How to Change the Color of Text of a Web Page With CSS

In this tutorial, we go over how to change the color of text of a web page using CSS.

To change the color of text of a web page with CSS, go to tag that you want to modify, which can be the body tag or the paragraph tag or the header tags.

Below, I'm modifying three different paragraph tags, #para1, #para2, #para3. The attribute that I need to change is their color attribute. This attribute followed by a colon and the wanted color.

It looks like this:

color: choose_color

So, for example, to make a paragraph green, we would use the following line in the paragraph tag:

color:green

The CSS code to change the color of each of these 3 paragraphs is below. As can be seen, the only attribute which is changed if only color wants to be changed is the color attribute.


#para1 {margin:0 0 .8em 0; line-height:150%;
font:14px "Arial",san-serif;font-weight: bold; color:black}

#para2 {margin:0 0 .8em 0; line-height:150%;
font:14px "Arial",san-serif; font-weight: bold; color:maroon }

#para3 {margin:0 0 .8em 0; line-height:150%;
font:14px "Arial",san-serif; font-weight: bold; color:green }

Below are the results:

This is #para1. Notice how the text is black. This is because the color is set to black.

This is #para2. Notice how the text is maroon. This is because the color is set to maroon.

This is #para3. Notice how the text is green. This is because the color is set to green.