By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

How to change font color with CSS

This CSS tutorial shows how to change the font color with pure CSS.

Edited: 2012-12-25 03:25

It is very important to chose the right font color when designing pages, the font color can be changed with the color property of CSS – but while changing the color is easy enough, choosing the right color can be very difficult.

Before we start, you should know that there are many ways to specify a color, which way you chose to go is almost entirely up to personal preference – but alpha transparency is only available if you use either RGBA or HSLA to set your colors.

For those of you who simply want to know how to change the color of a font, the below CSS will change the color for the entire page – changing the color for specific elements, such as h1 or p, will take precedence over the body decelerations.

/*
color: #ff0000; All red
color: #00ff00; All green
color: #0000ff; All blue
*/
body {
  color: #ff0000;
}
h1 {color: #0000ff;}

To change the colors of classes and ids given to elements in your page, simply use dot for classes, and number sign for ids.

.MyClass {color: #ff0000;}
#UniqueIdOfElement {color: #0000ff;}

Choosing a good color theme

There are many tools to help you choose a good color theme – some better than others – but it is generally hard to be inspired by these tools, without knowing a little on colors already.

It can be good to know how colors are perceived, and how they play together. Dark backgrounds with bright text are typically not well suited for sites where the user will spend a lot of time reading. Bright color themes tends to have a positive mood effect, while dark-themed sites tend to have a negative effect.

Both dark and bright themed colors can "burn" the eyes out on your readers – ok maybe not burn them out – but their eyes will often get irritated if you get the colors wrong. Toning your text and background colors a little towards gray, or another color shade, can often help you overcome this problem easily.

Colors and backgrounds

A lot of beginners want to make a cool looking website, with an awesome color theme from the start – this often lead to awful designs, all while the designer things they are great themselves. The truth is, you most likely wont be able to make a great design as a beginner – getting your colors play nice together is something you will learn over time.

A common mistake is also to use to many images, the best designs, often use very little images for their designs. Its fine for content, but generally not as a part of the design – if you use images in design, it will mostly be limited to a couple of buttons, social icons; or gradients in post headings. And so on. You rarely see someone use a huge background image as the background of the entire website, and when someone dose it, it almost always fail in some way.

Images as backgrounds for textural content – even smaller seamless ones – are very hard to integrate into a design. Choosing a color and font that will be readable on a background-image can be very difficult – not that it can't be done, but you might as well save yourself the trouble, and just go with a solid color background.

Choosing colors for text fonts

Many web-designers are over-simplifying their designs, almost to the point where there is little design to it – its often said that "simple" is good, the problem is that those who say it, either have no idea about what simple really is; or how to express themselves so that we understand what they mean.

Black text on all white backgrounds – easy, but it both looks awfully close to browser defaults, and feels bad on the eyes. What would often look better, is if you turned that white background 1-5% towards another color of your choice, and then darkened the headings and paragraphs a little, perhaps even turning them towards a text-color you want.

The text color in a bright background design should be close to black, but yet still hold enough "color" for it to be visible, and create a "feel" about the website. Dark background designs are simply handled opposite of bright ones.

This design approach is easy to get into play, without to much fiddling around. Keep in mind that you most-likely want to change the colors of your normal, visited, and hovered links; finding so many colors that work well with a background color can be difficult – so staying within a safe-range can be a great help to many.

Bright text on dark backgrounds can be hard to style, because, as mentioned in the above paragraph, you most likely want to leave enough room for link colors in your design – some background colors may be harder to work with than others, and you want text to be clearly readable, even your visited links – do not settle with good, aim for perfect! You can always adjust the colors in your CSS StyleSheet later, if you are unhappy about them.

See also

  1. Colors in HTML and CSS