Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Practice exercises CHAPTER 4 195

Exercise 1: Add a style sheet to the calculator project

In this exercise, you apply your CSS3 knowledge by adding a cascading style sheet to the

WebCalculator project that you created in Chapter 3, “Getting started with JavaScript.” You

add style rules to improve the look of the webpage. The color scheme for this webpage will

be purple-blue, and all colors will have the hue set to 255.

This exercise adds style rules with a minimum of modifications to the default.html file. In

the next exercise, you make changes to the default.html file that the style rules can use to fin-

ish cleaning up the webpage.

1. Start Visual Studio Express 2012 for Web. Navigate to File | Open Project.


2. Navigate to the solution that you created in Chapter 3 and select the WebCalculator.sln
   file. Click Open. You can also navigate to File | Recent Projects and Solutions to select
   the solution.
   If you didn’t complete the exercises in Chapter 3, you can use the solution in the
   Chapter 4 Exercise 1 Start folder.


3. In the Solution Explorer window, right-click the default.html file and choose Set As
   Start Page. Press F5 to verify that your home page is displayed.


4. In the Solution Explorer window, add a CSS file by right-clicking the Content folder in
   the project and navigating to Add | Style Sheet.


5. Name the page default.css and click OK.


6. Open the default.html page, drag the default.css file from the Solution Explorer win-
   dow, and drop it just before the
   
   


7. Open the default.css file and set the body background color with maximum saturation
   and half lightening as follows.
   body {
   background-color: hsl(255,100%,50%);
   }


8. Add a style rule that formats the text boxes.
   This style sets the height, width, text alignment, padding, and border style as follows.
   input {
   width: 446px;
   height: 35px;
   text-align: right;
   padding: 10px;
   border: inset;
   }