Extra 3-1 Use CSS to format the Quotation application This application for this
ID: 638553 • Letter: E
Question
Extra 3-1 Use CSS to format the Quotation application
This application for this exercise is the same as the one for exercise 2-1, except that the formatting is done with CSS instead of a table. This time, the formatting will be the way it is below and the form will be centered in the browser.
For this exercise, you will start a new web site and add the Default.aspx file and its code-behind file from the application for exercise 2-1. You will also add the CSS file from the Future Value application. Then, you will modify the Default.aspx file so the web site uses CSS for formatting. That will help you appreciate how much simpler the aspx code is when you separate the formatting from the content.
Start a new web site and build the form without using a table
Start a new web site named XEx03Quotation.
Add the Default.aspx to this web site. Then, use Source view to delete the entire Style element in the head section of the document.
Use Source view to remove all of the tags for the table, rows, and columns, but keep the aspx for the text box controls, label controls, and validators that were in columns 2 and 3. Also, keep the aspx code for the button.
Add HTML label elements that identify the server controls for the text boxes and the label controls that display the results. Add <br> elements after the validator controls for the first two entries and after the label controls that display the results. For extra spacing, add another <br> element.
Delete the Font-Bold attributes for the first text box and the two label controls. Then, test this form to see how it looks and works in a browser. Although it should still work, the formatting won
Explanation / Answer
body {
font-family:Arial;
display:table;
margin:auto;
}
.entry {
}
.validator {
color:red;
}
.button {
width:150px;
}
.result {
font-weight:bold;
}
label {
display:inline-block;
width:150px;
}
h1 {
color:blue;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.