How to Set Text and Background Color with CSS
See CSS: Tips and Tricks for similar articles.The color
and background-color
properties determine how color is set in CSS.
Before you can learn how to set text and background colors in CSS, you need to know a little bit about color values.
Color values can be specified in several ways:
- Color Names: There are 17 basic keyword color names that are specified in CSS3. Modern browsers support many additional color names.
<div style="color: red;">color: red;</div>
- Hexadecimal Color Values: Hexadecimal color values take the format #rrggbb, where rr is the amount of red in the color, gg is the amount of green in the color, and bb is the amount of blue in the color.
<div style="color: #ff0000;">color: #ff0000;</div>
- Short Hexadecimal Color Values: Hexadecimal color values can be abbreviated when a color is represented by three pairs of hexadecimal characters. For example, with #ff6600, you can remove one character from each pair. The shorthand color values take the format #rgb, where r is the amount of red, g is the amount of green in the color, and b is the amount of blue. For example, #f60 is the same as #ff6600.
selector { color: #f60;
- Functional Notation: Functional notation takes the format rgb(n,n,n), where n is a number between 0 and 255 or a percentage between 0% and 100% for the red, green, and blue intensities of the color, respectively.
<div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div> <div style="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div>
- RGBA-Format Color Names: The additional (the "a") parameter specifying the opacity (the "alpha" channel) of the color as a decimal between 0.0 (completely transparent) and 1.0 (completely opaque). Thus, the code
would style the div with a red background with 50% transparency.<div style="background-color: rgba(255,0,0,0.5)"> color: rgba(255,0,0,0.5) </div>
- HSL Specification: Supported in modern browsers (Internet Explorer from version 9), HSL is used to specify hue (a degree on the color wheel, with 0=red, 120=green, and 240=blue), saturation (a percentage, with 0% a shade of gray and 100% the full color), and lightness (a percentage, with 0% as black and 100% as white). The following code displays a div with red background:
<div style="background-color: hsl(0,100%, 50%)"></div>
Our recommendation is to use three-character hexadecimal notation (i.e., #rgb) when you can get the color you want and to use the six-digit hexadecimal notation (i.e., #rrggbb) when you need to define the color more granularly.
Now let's learn how to use these properties in the following steps:
- As you have seen in the examples above, the
color
property is used to set the foreground color of an element. Use the property as shown in this code:
This code renders the following:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Color</title> </head> <body> <h1>Color</h1> <div style="color: red;">color: red;</div> <div style="color: #ff0000;">color: #ff0000;</div> <div style="color: #f00;">color: #f00;</div> <div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div> <div style="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div> <div style="color: hsl(0,100%, 50%);">color: hsl(0,100%, 50%);</div> </body> </html>
- Next, you use the
background-color
property to specify the background color of an element. It can be applied to block elements and inline elements. The syntax looks like this:
Used in HTML, it looks like this:selector { background-color: color;}
This code renders the following:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Background Color</title> </head> <body> <h1>Background Color</h1> <div style="height: 100px; width: 500px; background-color: #ff0000;"> background-color: #ff0000; </div> <div style="height: 100px; width: 500px; background-color: rgba(255, 0, 0, 0.5);"> background-color: rgba(255, 0, 0, 0.5); </div> <div style="height: 100px; width: 500px; background-color: rgba(255, 0, 0, 0.1);"> background-color: rgba(255, 0, 0, 0.1); </div> </body> </html>
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS (this article)
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3