Cute as a Button explainer

Puzzle Explainer
#1

The aim of this puzzle: Use CSS to change the style of all the buttons on the webpage.

Walkthrough of the solution:
In CSS, you can use one ruleset to set the style of all the elements that share a tag name. For example, the code below selects all the h1 elements on the webpage and sets all their colors to red:

h1 {
  color:red;
}

In this puzzle, you’ll add color and rounded corners to all the buttons on the webpage.

To complete the puzzle, inside the CSS, add a new ruleset with button as its selector. Then, set its color to rgb(255,250,250), its background-color to rgb(188,143,143), and its border-radius to 10px.

Sample code solution:
(Tap below to reveal)

CSS

body {
    background-color: rgb(255, 250, 250);
}

button {
    color: rgb(255, 250, 250);
    background-color: rgb(188, 143, 143);
    border-radius: 10px;
}

img {
    height: auto;
    width: 175px;
}

CSS Concepts: CSS Selectors, Ruleset, Rules, height, width, color, background-color, border-radius

#2
#3

I wrote the correct code but I am unable to continue.

body {
background-color: rgb(255, 250, 250);
}

img {
height: auto;
width: 175px;
}

button {
background-color:rgb(188,143,143)
color:rgb(225,250,250)
border-radius:10px
}

#4

Hey there,

In the button ruleset, try setting the color to rgb(255, 250, 250). You’ve got rgb(225, 250, 250).

That should solve the problem. Let me know if you still encounter any issues.

Hope this helps!
Ben

#5

Well Im stuck.
I cant for the life of me see what I am doing different but it will not let me go forward.

Any suggestions would be greatly appreciated.

body {
background-color: rgb(255, 250, 250);
}

img {
height: auto;
width: 175px;
}
button {
color: rgb(255, 250, 250);
background-color: rgb(188,143 143);
border-radius: 10px;
}

#6

help me please on get more supplies.

#8

How do I make the button’s text multi colored

1 Like
#9

Hey there, make sure each CSS rule ends with a semicolon, like this:

button {
    background-color: rgb(188,143,143);
    color: rgb(225,250,250);
    border-radius: 10px;
}

Also, make sure to put a space after the :. It’s not required, but it’s best practice to format your code so that it can be read easily by others.

Hope this helps!
Ben

#10

Thanks for getting back to me.
About the third time I nuked it and started over and it accepted it. So whatever it was I got it right finally even though I never could identify the mistake

#11

image
image1577×978 165 KB
what is wrong!!!

#12

Hey there, make sure each CSS rule ends with a ;, like this:

button {
    color: rgb(255, 250, 250);
}

When you get errors like this, try hovering over the warnings in the editor (the yellow warning sign and red error sign at the left of the screen). They might not tell you exactly what’s wrong, but they can help point you in the right direction.

Hope this helps!
Ben

#13

Here’s what I got:

body {
background-color: rgb(255, 250, 250);
}

img {
height: auto;
width: 175px;
}

button {
background-color: rgb(188,143,143);
color: rgb(225,250,250);
border-radius: 10px;
color:rgb(255, 250, 250)

}
That’s the finish product.