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:
HTML
The HTML responsible for creating the above example is shown here:
<div class="wrapper">
<div class="box boxLeft">
<p>This is the first box.</p>
</div>
<div class="box boxRight">
<p>This is the second box.</p>
</div>
</div>
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.
CSS
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.
.wrapper {
width: 620px;
height: 110px;
margin: 0;
padding: 10px;
border: 6px solid mediumturquoise;
}
The .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 width and height as well as its margin and padding.
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 mediumturquoise.
Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:
.box {
width: 290px;
height: 100px;
margin: 0;
padding: 4px 6px;
font: 28px "Marker Felt", "Zapfino", cursive;
display: flex;
justify-content: center;
align-items: center;
}
In brief, .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 justify-content and align-items to center. Then we can create a class for each of the two boxes that defines the properties that differ between the two.
.boxLeft {
float: left;
background-color: rgb(245, 130, 130);
outline: 2px solid darkred;
}
The .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
border, 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.
.boxRight {
float: right;
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.
Finally, the .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:
- The
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
text-decoration. - Finally, a bit of a shadow is added to the text using
text-shadow. Its color parameter is set to black.
