Normally you can tell what a CSS property does just by its name. Margin is used to set the margins around an element. Font-size is used to set the size of your font. But there is a CSS property called color, and so it isn’t immediately clear what it does.
I mean, it sets the colour of elements, right?
Fine. But what part?
We have background-color for setting the colour of backgrounds. So what is color for?
It’s not obvious, but the color CSS property actually sets the colour of the text.
color:
Put simply, the color property in CSS sets the colour of text elements.
It looks like you’ve spelt it wrong.
No, in CSS this the way it’s done.
This is the American spelling of colour.
It might look a bit odd at first.
To be fair, I’ve only just learnt to read.
So why are we using the American spelling?
I can’t find a definitive answer but did find that the CSS specification is maintained by the World Wide Web Consortium who have their headquarters in Massachusetts in the US. So this probably has something to do with it.
Here are some examples of this CSS property in action.
color: salmon;
color: #DE8333;
color: rgba(42, 154, 188, 0.43);
Salmon
Orange
Blue
When using the color property, just set the colour in the same way as we did for background-color. If you need a reminder, click here.
Use the box below to change the colour of the paragraph element below. Try out colour keywords as well as hexadecimal and rgb colour definitions.
HTML
<h3 class="sub-heading">Color in CSS</h3>
<p class="color-intro-text">Learn how to set the colour of your text.</p>
CSS
.sub-heading {
color:
}
.color-intro-text {
color:
}
Learn how to set the colour of your text.
It’s important to remember that the ‘color’ property only sets the colour of the text and so this colour has to be chosen carefully so that your text can be easily read. Choosing a similar colour to your background colour might make your words difficult to see and then, well, what’s the point in writing them!
Imagine you have a blanket.
Done.
Easy.
I don’t even have to imagine.
I have lots of blankets.
Just play along.
Imagine you have one blanket and so you want everyone to know it is your blanket. To remind everyone, you get your name sewn into it.
So your name stood out, it would need to be obvious that it is there and easy to see. If you had a blue blanket and your name was sewn in using blue thread, people wouldn’t see your name and would use your blanket.
The horror!
But maybe white would show up well.
Then your name wouldn’t be missed and all your blankets would be safe.
Finally, a happy ending.
You’ve made me paranoid, I’m going to check on all my blankets.
Experiment with different background colours and text colours using the boxes below. What colours go well together? What kinds of combinations are difficult to read?
HTML
<div id="background-color-experiment-box">
<p class="background-color-experiment-text">Learn how to set the colour of your text.</p>
<p class="background-color-experiment-text">Can you read this?</p>
</div>
CSS
#background-color-experiment-box {
background-color:
width: 80%;
margin-left: 10%
}
.background-color-experiment-text {
color:
}
Learn how to set the colour of your text.
Can you read this?
Ok, so now I have to add CSS to cover all of my text elements.
Actually, that could be a lot.
There’s all my heading elements and my paragraph elements.
This could take ages!
Fortunately, I can show you a shortcut.
We have looked at writing CSS which applies to specific elements, using an ID, and we have looked at writing CSS that applies to a class of elements, using classes in HTML. There is also a way to write CSS that applies to all elements using the same tags.
Using this method all of the elements you create with the p tag or any of the h tags can have the same CSS applied to them.
To do this, where you would normally write the class name or the ID, instead write the HTML tag you are interested in. This code will make sure all of your paragraph elements have the same grey text.
p {
color: black;
}
If you want to apply your CSS to several tags, just separate out your list with commas.
h1, h2, h3, h4, h5, h6, p {
color: black;
}
This will apply this CSS to all your paragraph elements and all of your headings. Of course, if you want a specific text element you can always use HTML IDs like we have done before.
Right, I think all my blankets are safe.
What did I miss?
Surely no one has the heart to take this blanket from her.