FAQ: CSS Color - Introduction to Color

This community-built FAQ covers the “Introduction to Color” exercise from the lesson “CSS Color”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Introduction to Color

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Hi Team,

Looking at the css code of this exercise I cannot find a rule that would set the <h1>The Best Coffee Regions</h1> font family as it is displaying in my browser.

The only rule related to this heading seems to be the following:

.header {

  background-image: url(https://images.unsplash.com/photo-1455267847942-f4fdb784f0c5?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb);

  height: 400px;

  background-position: center center;


But is seems to only set a background image, rather than affecting the font itself.

Can anyone explain this?


Ok, nevermind - just realised it’s actually a <h1> element - this can be closed. Thanks!

When dealing with animations made dynamic by JavaScript, I prefer RGB (Red Green Blue) values rather than Hexadecimal value for the simple fact that numbers are easier to manipulate in JavaScript than alphabets. But since you can also make basic event animations in CSS, I prefer hexadecimal values. But when I am dealing with things that need to be animated to be more opaque or more transparent, I prefer RGBA (Red Green Blue Alpha) values because you can change their transparency by adding a fourth value between 0 and 1 that tells CSS what opacity the tag should have.

1 Like

I have a feeling this will be handy in the future. Thanks.

Colors in CSS can be described in three different ways:

  • Named colors — English words that describe colors, also called keyword colors
  • RGB — numeric values that describe a mix of red, green, and blue
  • HSL — numeric values that describe a mix of hue, saturation, and lightness

Where is the HEX in this list? I think there is a mistake at the beginning of this class.

It could be argued that it is RGB as a literal expression, rather than returned from a function, rgb(). They both rely upon three values in the range 0 through 255, inclusive.

Actually it’s not the answer to my question. At the end of this lesson, it says colors in CSS can be described in four different ways which contain HEX too.

1 Like

So there you have it. The HEX and rgb() colors are based on palette numbers, where the HSL is based on degrees in a circle and percentages of lightness and saturation.