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