docs.rodeo

MDN Web Docs mirror

Applying color to HTML elements using CSS

{{CSSRef}} 

With CSS, there are lots of ways to add color to your HTML elements to create the look you want. This guide is a primer introducing how CSS can be used to apply colors to HTML elements. This guide includes lists of the CSS properties that set color in their values and how to use colors both in stylesheets and in other ways.

[!NOTE] It is important to use colors wisely. Always select appropriate colors, ensuring the contrast between text and the background is sufficient to ensure legibility, and always keep the needs of people with differing visual capabilities in mind.

To learn more about CSS colors as a data type, see the CSS <color> data type reference and the CSS color values guide.

Properties that can have color

At the element level, everything in HTML can have color applied to it. Let’s look at the different items rendered on the page — such as text, borders, etc. We’ll provide lists of the CSS properties that apply color to each.

At a fundamental level, the {{cssxref("color")}}  property defines the foreground color of an HTML element’s content and the {{cssxref("background-color")}}  property defines the element’s background color. These can be used on just about any element.

Text

Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.

Boxes

Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.

Borders

Any element can have a border drawn around it. A basic element border is a line drawn around the edges of the element’s content. See The box model to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.

You can use the {{cssxref("border")}}  shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.

Specifying colors as values in stylesheets

Now that you know which CSS properties let you apply color to elements, you can start adding colors to your websites. Let’s look at some examples of using color within a {{Glossary("stylesheet")}} . In this example, we use several previously mentioned properties, with the concept of applying colors in CSS being the same no matter the property.

Let’s look at the result first, before going on to look at the code we need to create it:

{{EmbedLiveSample("Specifying colors as values in stylesheets", 650, 150)}} 

HTML

The HTML responsible for creating the above example is shown here:

<div class="wrapper">
  <div class="boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="boxRight">
    <p>This is the second box.</p>
  </div>
</div>

Here we have a wrapper {{HTMLElement("div")}}  containing two child <div>s, each with a single child paragraph ({{HTMLElement("p")}} ). Each content <div> is given a different look and feel.

CSS

Let’s look at the CSS that creates the above result a piece at a time.

[!NOTE] We are using multiple different CSS color value types in this example to demonstrate their use. This is not recommended for production code. When writing CSS, use the most intuitive value type for you and your team.

.wrapper {
  height: 110px;
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  border: 6px solid mediumturquoise;
}

div {
  flex: 1;
}

The .wrapper class is used to assign styles to the {{HTMLElement("div")}}  that encloses all of our other content. This establishes the height of the container using {{cssxref("height")}} , allowing the width of this block-level element to default to 100% of its parent. Setting the {{cssxref("display")}}  to flex and adding a 10px {{cssxref("gap")}}  creates a flex container to lay out the children side by side with a gap between all the container’s children. We use {{cssxref("flex")}}  to let the flex children grow to fill the container; it doesn’t effect the flex container itself.

Of more interest to our discussion here is the use of the {{cssxref("border")}}  property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the named color mediumturquoise.

Within our wrapper, we have a left box and a right box.

.boxLeft {
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}

The .boxLeft class, used to style the box on the left, sets up the color of the background and the outline:

.boxRight {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 100% 100%);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

[!NOTE] We included the text-decoration-* styles separately because Safari doesn’t support {{cssxref("text-decoration")}}  as a shorthand property.

Finally, the .boxRight class sets several styles on the box that’s drawn to the right. Then the following colors are established (using five different ways of declaring color values):

We used five different color syntaxes to demonstrate what is possible. In the real world, you and your team will preferably pick a preferred color notation, with everyone working on a code base using the same color syntax.

Other ways to use color

CSS isn’t the only web technology that supports color. Other examples include:

[!NOTE] A few now obsolete HTML attributes accepted colors as values, such as bgcolor and vlink. These attributes only accepted {{cssxref("named-color")}}  and three- or six-digit {{cssxref("hex-color")}}  values.

See also

In this article

View on MDN