198 CHAPTER 4 Getting started with CSS3
- Open the project from Exercise 1.
If you didn’t perform Exercise 1, you can use the project located in the Exercise 2 Start
folder. - Open the default.html file.
- Surround the inputs and buttons with a element whose id is set to “calculator”.
Thiselement will be used to center the calculator and create a box around it.
The default.html should look like the following.
<!DOCTYPE html>
Web Calculator
- Open the default.css file.
- Insert, after the body style, a style rule for the
element whose id is “calculator”.
Set the style properties to put a border around the calculator. Set a fixed height and
width. Center the contents and set the padding as follows.
#calculator {
border: solid;
background-color: hsl(255, 100%, 60%);
width: 500px;
height: 500px;
margin-left: auto;