How to Change Website Font Colors With CSS

Adding Styles to Change Font Color

1. For this example, you need to have an HTML document to see the CSS changes and a separate CSS file that's attached to that document. We're going to look at the paragraph element, specifically.

2. To change the text color for every paragraph in your HTML file, go to the external style sheet and type p { }. Place the color property in the style followed by a colon, like p { color: }. Then, add your color value after the property, ending it with a semicolon: p { color: black;}.

   p {
    color: black;
   }
   

   Color values can be expressed as color keywords, RGB color numbers, or hexadecimal color numbers. In our example, the paragraph text is changed to the color black.

3. However, if you want to change the text color to green, blue, red, etc., using color keywords will not give you the flexibility you might want to create different shades. That's where hexadecimal values come in to play.

   p { 
    color: #000000; 
   } 
   

   This CSS style can be used to color your paragraphs black because the hex code #000000 translates to black. You could even use shorthand with that hex value and write it as #000 with the same results.

4. p { 
    color: #2f5687;
   }
   

   Like we mentioned above, hex values work well when you need a color that isn't simply black or white. The above CSS hex value would set the paragraphs to a blue color, but unlike the keyword "blue", this hex code gives you the ability to set a very specific shade of blue, a mid-range, slate-like blue in this case.

   Hex works by setting the RGB(red, green, blue) values of a color separately with base-sixteen values. That's why they contain the letters A through F in addition to the digits 0 through 9.

   Each color, red, green, and blue, receives its own two-digit value. 00 is the lowest value possible, while FF is the highest. The colors are listed in RGB order in a hex, so the first two digits represent the red value and so on.

5. Finally, you can use RGBA color values for font colors as well. RGCA is supported in all modern browsers, so you can use these values with confidence that it'll work for most viewers, but you can also set an easy fallback.

   p { 
    color: rgba(47,86,135,1);
   }
   

   This RGBA value is the same as the slate blue color specified earlier. The first three values set the Red, Green, and Blue values and the final number is the alpha setting for transparency. The alpha setting is set to 1 to mean 100 percent, so this color has no transparency. If you set that value to a decimal number, like .85, it translates to 85 percent opacity and the color would be slightly transparent.

   p {
    color: #2f5687;
    color: rgba(47,86,135,1);
   } 
   

   If you want to bulletproof your color values, mimic the above CSS code. This syntax sets the hex code first and then overwrites that value with the RGBA number. This means that any older browser that does not support RGBA will get the first value and ignore the second.

6. It's important to keep in mind that the color property works on any HTML text element in CSS. You can, for example, change all your link colors.

   a {
    color: #16c616;
   }
   

   The example above would make your links bright green.

   You this works with multiple elements at once too. You can set every title level at once.

   h1, h2, h3, h4, h5, h6 {
    color: #020833;
   }
   

   That would set all of your title elements to a midnight blue color.

7. Coming up with the hex or RGBA values for your colors isn't always easy. Most web designers will use their image editing program, like Photoshop or GIMP to generate the exact codes. You can also find convenient color picker tools online, like this one from w3schools.

Other Ways to Style an HTML Page