Back and Font explainer

Aim of the puzzle: Use CSS to style a webpage.
Walk through of solution: While HTML is used to add elements to a webpage, CSS is used to style them.

CSS code consists of a selector, followed by one or more rules. The selector selects the elements to style, and the rules set the styles. For example:

h1 {
    color: red;
}

In the above example, h1 is the selector, and selects all h1 elements. Inside the brackets, color: red sets the color of these h1 elements to red. A selector together with rules is called a “ruleset”

Finally, the semicolon ; marks the end of the rule. The semicolon must be placed at the end of each rule for the CSS code to work.

In this puzzle, you will change the colors of a webpage using the background-color and color rules.

There are 140 colors built in to CSS. In addition to these colors, RGB values can be used, as well as several other color systems you can read about here.

For this course, you will stick to RGB and built-in colors.

To complete this puzzle, change the background-color of body to rgb(0, 50, 75), and the color of h1 to white.
Sample code solution:

body {
    background-color: rgb(0, 50, 75);
}

h1 {
    color: white;
}

HTML Concepts: Body, h1 Header element
CSS Concepts: CSS Selectors, Rules, Ruleset

1 Like

I input correctly answer, but can’t continue.
what happen? This is problem.

1 Like

Hey there, if you post a screenshot of your code, I can take a look.

Thanks,
Ben

1 Like

My solution in firefox:

body {
background-color: rgb(0,50,75);
}

h1 {
color: white;
}

Today I solve in chrome, I can continue.
But in firefox, I can’t continue.

1 Like

Hey there, check if you have any browser extensions that affect the css of pages you’re on. For example, a dark mode extension could prevent this puzzle from completing properly, as it would change the color of the h1 elements from white to black.

Hope this helps! Let me know if you have any questions.
Ben

5 Likes

can i write like this? the result is the same, but i can’t continue, why?

1 Like

Meu código está exatamente igual a este e não está passando. Mistério…

Meu código está exatamente igual a este e o compilador não está lendo. Está vindo mensagem : ‘Set the background-color property in the body rule set to rgb (0,50,75)’

Tira um print da tela e manda aí pra eu dar uma olhada e ver o que está sendo feito de diferente.

Thank you I had this problem and my dark mode browser extension was causing the issue.

Oh, so thanks for the solution! I also had the same issue and just deactivated my dark mode extension. So thanks!