• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 11/2/22

Set your first colors

Color has a way of livening up even the most drab of web experiences. It also allows you to create unique brand identity for a client or for your own business!

The first two CSS properties we'll explore are therefore:

  • color

  • background-color

A combination of the two lets you change the color of your text and the background color of any HTML elements! What more could you need?

Color

Consider the color property of CSS to reference an element's foreground. This applies to text!

Let's say you're a hiking enthusiast and are writing an article on the web about which camping supplies people should bring on their trips. Here's some simple HTML with an article, a heading, and an unordered list with list items that sometimes include links (that currently go nowhere, thus the #) and descriptions:

<article>
    <h1>Camping essentials</h1>
    <p>Packing the right gear is crucial for having a good time on your next camping trip. Make sure you bring the right stuff using the checklist below.</p>
    <ul>
        <li><strong>Tent:</strong> Don't get stuck sleeping outside. Check out some great <a href="#">tents.</a></li>
        <li><strong>Sleeping bag:</strong> A warm sleeping bag can be the difference between a cozy, restful night, and a miserable one.</li>
        <li><strong>Headlamp:</strong> Being able to see in the dark is important for safety.</li>
        <li><strong>Small stove:</strong> Sleeping outside doesn't mean eating only granola bars! Cook yourself a warm meal with a small, portable gas stove.</li>
        <li><strong>Gas bottle:</strong> Your stove needs fuel. Gas bottles can be purchased at any <a href="#">camping store.</a></li>
        <li><strong>Dehydrated meals:</strong> Fill a dehydrated meal bag with boiling water, wait several minutes, et voilà; dinner is served.</li>
        <li><strong>Rain gear:</strong> Hiking while drenched is never fun, but sometimes it's unavoidable. Packing the right kind of rain gear will help you stay as comfortable and warm as possible.</li>
        <li><strong>Water pack:</strong> If your hike is longer, you may prefer a camping-specific water container instead of a traditional bottle. We put together some <a href="#">suggestions.</a></li>
        <li><strong>Hiking shoes</strong> It can be hard to pick a hiking shoe, but your most versatile shoe often will come up to your ankle (or slightly hire) and is comfortable to walk in, even at the end of the day. Tip: make sure to really break in your hiking shoes before wearing them on a trek for the first time!</li>
    </ul> 
</article>

With CSS, we want to change the color of the heading to green and each list strong list item and link to teal to end up with a result like this:

Desired result with teal list items
Desired result with teal list items

In order to do so, we select the appropriate HTML element and set its "color" property to the value of our choice.

h1 {
    color: green;
}

strong {
    color: teal;
}

a {
    color: teal;
}

Background colors are also useful. To change an element's background color, type background-color and set it to the value of your choice.

h1 {
    color: Green;
    background-color: HoneyDew;
}

p {
    background-color: HoneyDew;
}

ul {
    background-color: HoneyDew;
}

strong {
    color: Teal;
    background-color: LemonChiffon;
}

a {
    color: Teal;
}
Result with light green and yellow background colors
Result with light green and yellow background colors

Is this the most aesthetically pleasing color scheme? Not really! But it goes to show you how much color can change the vibe of a page.

In the next chapter, we'll examine how to set colors in more detail beyond simple color names. This will allow us to create much more pleasant designs.

Practice!

You can also do the interactive activity for this chapter to practice setting colors. Head to this CodePen exercise and follow the instructions bellow.

  1. Select the h1 element as you usually would in CSS. Open a set of curly braces, i.e.,

    h1 {
    
    }
  2. Set the  color  property for h1 to either yellow, green blue, hot pink, indigo, or red.

  3. Set the background-color property for h1 to either yellow, green blue, hot pink, indigo, or red.

     

Example of certificate of achievement
Example of certificate of achievement