Practice exercises CHAPTER 4 199
margin-right: auto;
text-align: center;
padding: 10px;
}Now that you have a box with a fixed height and width, you can change the height and
width settings on the input and button elements to be a percentage of the calculator
size.- Change the style rules as follows.
input {
width: 85%;
height: 7%;
text-align: right;
padding: 10px;
border: inset;
}
button {
background-color: hsl(255, 50%, 80%);
width: 25%;
height: 10%;
border: outset;
}
Instead of setting the style of txtResult by using its id, it would be better to change the
selector to apply the style to any element whose read-only attribute is set.- Change the style rule as follows.
[readonly] {
background-color: hsl(255, 50%, 80%);
}
Your completed default.css file should look like the following.
body {
background-color: hsl(255,100%,50%);
}#calculator {
border: solid;
background-color: hsl(255, 100%, 60%);
width: 500px;
height: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 10px;
}input {
width: 85%;
height: 7%;
text-align: right;