Time to Style explainer

Puzzle Explainer
#7

Capture
Capture.PNG528×788 49.3 KB

not working for me says ‘‘The CSS starter code has been edited or removed. Use the reset button to reset the puzzle.’’

#8

Hey did you did you find the solution? @Garrett_Green

#9

https://youtu.be/piWuG4zbJC8 @Garrett_Green

1 Like
#10

Hey there,

In the body ruleset, color has been changed. background-color and color are 2 different things.

Tap reset to set it back, then add background-color: rgb(232, 246, 255) to the body ruleset.

Hope this helps!
Ben

#11

I am using Chrome still i am not able to execute it. can anyone HELP !!

Capture
Capture.PNG1670×1009 152 KB

#12

Hey there, it looks like the color property of body was removed. Try adding:

color: rgb(0, 50, 75);

back into the body.

Hope this helps!
Ben

#13

Not sure why Im getting line errors:

image
image.png1297×759 58.7 KB

#14

Hey there,

On line 5, change background color to background-color

On line 36, change border-radius = 5px to border-radius: 5px

Hope this helps!
Ben

#15

what is the problem in my code?

image
image.png1917×1078 305 KB

#16

Hey there, please see this post.

-Ben

#17

thanks
i have decide this puzzle already

#18

you have only to add the background-color in the body without change or remove anything and so in the ather css selector

Capture
Capture1670×1009 152 KB

#19

Please someone help :frowning:
body {
font-family: Helvetica, Arial, sans-serif;
text-align: center;
color: rgb(232, 246, 255);
}

h1 {
font-size: 32px;
margin: 0;
padding-bottom: 16px;
font-weight: 600;
color: rgb (255,140,0);
}

h2 {
font-size: 24px;
margin: 0;
padding: 16px 0 8px 0;
}

p {
font-size: 16px;
margin-bottom: 8px;
padding: 0;
line-height: 1.4;
}

button {
font-size: 16px;
padding: 10px 16px;
margin-bottom: 32px;
background-color: rgb(74, 144, 226);
color: rgb(255, 255, 255);
border: 0;
border-radius: 5px;
cursor: pointer;
}
img {
width: 200px;
height: auto;
}

What is wrong with it

#20

Hey there, make sure your body ruleset has both a color and background-color rule, like this:

body {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  background-color: rgb(232, 246, 255);
  color: rgb(0, 50, 75);
}
#21

help… please… what am i doing wrong??

body {
font-family: Helvetica, Arial, sans-serif;
text-align: center;
background-color: rgb(232, 246, 255);
}

h1 {
font-size: 32px;
margin: 0;
padding-bottom: 16px;
font-weight: 600;
background-color: rgb(255, 140, 0);
}

h2 {
font-size: 24px;
margin: 0;
padding: 16px 0 8px 0;
}

p {
font-size: 16px;
margin-bottom: 8px;
padding: 0;
line-height: 1.4;
}

button {
font-size: 16px;
padding: 10px 16px;
margin-bottom: 32px;
background-color: rgb(74, 144, 226);
color: rgb(255, 255, 255);
border: 0;
border-radius: 5px;
cursor: pointer;
}

img {
width: 200px;
height: auto;

}

#22

Try this solution, it took me several times to figure out the problem. Hope this helps :slight_smile: ;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
color: rgb(0, 50, 75)
background-color: rgb(232, 246, 255);
}

h1 {
font-size: 32px;
margin: 0;
padding-bottom: 16px;
font-weight: 600;
color: rgb(255, 140, 0);
}

h2 {
font-size: 24px;
margin: 0;
padding: 16px 0 8px 0;
}

p {
font-size: 16px;
margin-bottom: 8px;
padding: 0;
line-height: 1.4;
}

button {
font-size: 16px;
padding: 10px 16px;
margin-bottom: 32px;
background-color: rgb(74, 144, 226);
color: rgb(255, 255, 255);
border-radius: 5px;
cursor: pointer;
}
img{
width: 200px;
height: auto;
}

#23

Hey there,

body should have both color and background-color. Try adding the color rule back:

color: rgb(0, 50, 75);

Hope this helps!
Ben

#24

Hello i need help with my code it does not let me continue here it is:

body {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  color: rgb(0, 50, 75);
  background-color: rgb(232, 246, 255);
}

h1 {
  font-size: 32px;
  margin: 0;
  padding-bottom: 16px;
  font-weight: 600;
  color: rgb(225, 140, 0) }.

h2 {
  font-size: 24px;
  margin: 0;
  padding: 16px 0 8px 0;
}

p {
  font-size: 16px;
  margin-bottom: 8px;
  padding: 0;
  line-height: 1.4;
}

button {
  font-size: 16px;
  padding: 10px 16px;
  margin-bottom: 32px;
  background-color: rgb(74, 144, 226);
  color: rgb(255, 255, 255);
  border: 0;
  cursor: pointer;
  border-radius: 5px;
}
img {
    width: 200px;
    height: auto;
}

Please help me

#25

Hey there, looks like the problem is on the last line of the h1 ruleset:

h1 {
  font-size: 32px;
  margin: 0;
  padding-bottom: 16px;
  font-weight: 600;
  color: rgb(225, 140, 0) }. /* This line right here! */

First, change 225 to 255.

Then, put a semicolon after color: rgb(255, 140, 0). Every rule in CSS has to end with a semicolon.

Finally, put the closing bracket down one line and delete the period. Like this:

h1 {
  font-size: 32px;
  margin: 0;
  padding-bottom: 16px;
  font-weight: 600;
  color: rgb(255, 140, 0); /* Note the semicolon and 255 */
} /* Bracket is on its own line */

Hope this helps!
Ben

1 Like
#26

Wow thank you for all this help i appreciate it.