How to Change Text Color With CSS

CSS (cascading style sheets) lets you add style, such as text colors, background colors, fonts and formatting. If you can grasp HTML, you can pick up CSS rather quickly, too. Let's start out with a simple tag to change text color with CSS.

Instructions

Difficulty: Moderate

Things You’ll Need:

• Text editor

1. Open up your text-based HTML editor. Open up a file so you can see and edit the source.
2. Set up default colors. Create a tag: <style type="text/css"> and insert it before the body tags. After that, begin defining the colors of different types of text. For example, to make all the headlines blue, type: H1 {color: blue}. Define all the text types, each one on a separate line. When you are done, close the tag with </style>.
3. Use default colors. After defining default colors, whenever you use that particular tag, it will be in your predefined color. For example, we have set H1 to blue, so if you were to type <h1> WOW! </h1> it would automatically be in blue.
4. Make an exception. If you want something to be something other than the default color, then simply place the CSS tag within the HTML tag to change it on the fly. For example, to change headlines to red, you would type <h1 style="color: red"> Now it's Red!</h1>.
5. Use contextual selectors. When defining defaults in the beginning, you can also set up more exceptions, based on context. For example, if you want all italics in the headline to be green, you would type: <h1 i "color: green">. Now, whenever you make something italic within a headline, it will be green, but outside it will be the default color.

Tips & Warnings

• This is a basic tutorial. CSS is much, much more powerful if you learn more.
• You can also use HEX colors. For example #F0FFFF is azure, and #FFFFFF is white.
• Not all browsers support CSS. Older browsers may ignore the tags altogether, making your page look strange.