The easiest way to apply color to elements—and the way you'll usually do it—is to specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.
Let's take a look at an example, starting by looking at the results we're trying to achieve:
The HTML responsible for creating the above example is shown here:
<div class="box boxLeft">
This is the first box.
<div class="box boxRight">
This is the second box.
This is pretty simple, using a
<div> as a wrapper around the contents, which consists of two more
<div>s, each styled differently with a single paragraph (
<p>) in each box.
The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.
We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.
border: 6px solid mediumturquoise;
.wrapper class is used to assign styles to the
<div> that encloses all of our other content. This establishes the size of the container using
height as well as its
Of more interest to our discussion here is the use of the
border property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color
Our two colored boxes share a number of properties in common, so next we establish a class,
.box, that defines those shared properties:
padding: 4px 6px;
font: 28px "Marker Felt", "Zapfino", cursive;
.box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable
flex mode using
display: flex, and set both
center. Then we can create a class for each of the two boxes that defines the properties that differ between the two.
background-color: rgb(245, 130, 130);
outline: 2px solid darkred;
.boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:
- The box's background color is set by changing the value of the CSS
background-color property to
rgb(245, 130, 130).
- An outline is defined for the box. Unlike the more commonly used
outline doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as
border does. This outline is a solid, dark red line that's two pixels thick. Note the use of the
darkred keyword when specifying the color.
- Notice that we're not explicitly setting the text color. That means the value of
color will be inherited from the nearest containing element that defines it. By default, that's black.
background-color: hsl(270deg, 50%, 75%);
outline: 4px dashed rgb(110, 20, 120);
color: hsl(0deg, 100%, 100%);
text-decoration: underline wavy #88ff88;
text-shadow: 2px 2px 3px black;
Note: When you try to show it in Safari, it will not show properly. Because Safari doesn't support
text-decoration: underline wavy #88ff88.
.boxRight class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:
background-color is set using the HSL value specified using
hsl(270deg, 50%, 75%). This is a medium purple color.
- The box's
outline is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (
rgb(110, 20, 120)).
- The foreground (text) color is specified by setting the
color property to
hsl(0deg, 100%, 100%). This is one of many ways to specify the color white.
- We add a green wavy line under the text with
- Finally, a bit of a shadow is added to the text using
color parameter is set to