The CSS color property defines the foreground color for an element.
Setting Color Property
The color
property typically defines the color of the text content of an element.
For instance, the color
property specified in the body
selector defines the default text color (foreground color in general) for the whole page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS color</title> <style type="text/css"> body { color: #000000; } h1 { color: #ff0000; } p { color: #00ff00; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
Colors in CSS most often specified by the following methods:
- a HEX value – like “#ff0000”
- an RGB value – like “rgb(255,0,0)”
- a color name – like “red”
Look at CSS Color Names for a complete list of possible color names.
Affect of Color Property on Borders and Oulines
The color
property is not just for text content, but for anything in the foreground that takes a color value. For instance, if border-color
or outline-color
value hasn’t been defined explicitly for the element, the color value will be used instead.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS color</title> <style type="text/css"> p.one { color: #0000ff; border: 2px solid; } p.two { color: #00ff00; outline: 2px solid; } </style> </head> <body> <p class="one">The border color of this paragraph is same as the element's text color.</p> <p class="two">The outline color of this paragraph is same as the element's text color.</p> </body> </html> |
Note:The
'color'
property normally inherits the color value from their parent element, except the case of anchor elements.