Override Styles in Subsequent CSS fail

HTML-CSS
1

Tell us what’s happening:

Hello, I did the challenge. Eveything is correct except that the text hasn’t became blue! I previously read the posts on that challenge but so far nothing to help me understand why it doesn’t work.

Your h1 element should have the class pink-text .

Passed

Your h1 element should have the class blue-text .

Passed

Both blue-text and pink-text should belong to the same h1 element.

Your h1 element should be blue.

Your code so far


<style>
body {
  background-color: black;
  font-family: monospace;
  color: green;
}
.pink-text {
  color: pink;

.blue.text {
 color: blue;
}

</style>

<h1 class="pink-text  blue-text"> Hello World!</h1>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0.

Challenge: Override Styles in Subsequent CSS

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-styles-in-subsequent-css

2

Welcome, Nova.

You have created a CSS class called blue.text instead of blue-text.

Hope that helps

1 Like
3

Okay so
The code you have now only shows in pink because the pink is above the blue. Making your text pink and not blue. The color of the h1 depends onto the order the colors are in

Thats the purpose of this lesson

Spoiler:
What you are suppose to do is move the blue above the pink after you did run the pink above the blue

1 Like
4

/*

body
{

background-color: black;

font-family: monospace;

color: green;

}

.pink-text
{

color: pink;

}

.blue-text
{

color: blue;

}

Hello World!

*/
1 Like
5

Hi Sky020 thanks after looking again and again I finally found out what was my mistake.))