SHARE

CSS Basics: Color Properties

Written By

Mar 12, 2010

In the last article, we discussed what CSS is and how to apply it to documents. In this article, we will discuss how to apply CSS color properties. Color properties can be applied to a HTML element or selector (class or ID). When color properties are applied to the top most item, all elements under that item will inherit that style unless overridden with another style.

	body { color: black; }
	.myText { color: white; }

	<body>
		<p>This text will be black</p>
		<p class="myText">But this text will be white</p>
		<p>Now, we are back in black</p>
	</body>

Adding a Bit of Color

Adding color is done using the "color" property for the foreground color and the "background-color" property for the background color. The "color" property specifies the color of the text for the HTML element.

	Syntax: color: <value>
	Syntax: background-color: <value>

There are 2 ways to specify color in CSS: RGB and keyword. RGB values are specified using the sRGB color space (red, green, and blue). There are 3 values that are used. The first value is the amount of red, the second is the amount of green and the third is the amount of blue. All 3 must be specified.

RGB values can be applied using the functional notation, "rgb(0,0,0)", or the HEX notation, "#ffffff". The functional notation is specified using the keyword "rgb" followed by either 3 numeric values or 3 percentage values separated by a comma. The numeric values are from 0 (black) to 255 (white). The percentages are from 0% (black) to 100% (white). These are written in the order of red (r), green (g), and blue (b).

	.colorRGB { color: rgb(255, 0, 128); }
	.colorRGB { color: rgb(100%, 0%, 50%); }

There is a shortcut that can be used when the values are all the same. If you have a 2 digit value with all one character, you can shorten it to 3 characters instead. This allows for fewer characters in the CSS file, which makes it smaller which results in a faster download.

	.myText { color: #ffffff; } or .myText { color: #fff; }
	.myText { color: #ff00bb; } or .myText { color: #f0b; }

A color keyword is red, blue, green, etc. There are only 17 named color values listed by the W3C. Many browsers support the use of other names, but it is important to note that for W3C compliancy, you should only use the 17 listed (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow).

	.colorName { color: aqua; }

The "background-color" property is also used to color the background of many HTML elements. It can even specify the default color for the whole page by setting it in the <body> tag in CSS.

	body { background-color: white; }
	.myText { background-color: red; }

Conclusion

There are a lot of options for applying color. This flexibility allows you to make websites that stand out from the competition and give you a wide variety of ways to express yourself on the web.

CSS Basics: Color Properties

Adding a Bit of Color

Conclusion

Vincent Wright

Recommended for you...

Company

Categories