Text, background and border colours.
✍️ 3 exercises + code challenge in this lessonCSS colours can be set for text (color), backgrounds (background-color) and borders (border-color).
red, teal, navy#2563EB (or the short form #09f)rgb(37 99 235), rgba(37, 99, 235, 0.5)hsl(221 83% 53%)The opacity property makes a whole element (including its content) transparent.
Mastering CSS Colors helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<style>
div { padding: 12px; margin: 6px 0; border-radius: 8px; border: 3px solid; }
.a { color: white; background-color: #2563EB; border-color: #1D4ED8; }
.b { color: #071A2F; background-color: rgba(20, 184, 166, 0.3); border-color: teal; }
.c { color: white; background-color: hsl(16, 77%, 52%); border-color: hsl(16, 77%, 35%); }
.d { background: #071A2F; color: white; opacity: 0.5; border-color: transparent; }
</style>
<div class="a">HEX colours</div>
<div class="b">RGBA background</div>
<div class="c">HSL colours</div>
<div class="d">opacity: 0.5</div>Check what you learned in “CSS Colors”.
Set the text colour with an RGB value for pure red.
p { color: ; }
Which property sets the background colour?
Give the box a background colour of #2563eb and white text.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services