Build Your First Web Pages With HTML and CSS

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:

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;
}

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.