3. Convert from inline CSS to external CSS - file t1q3_solution_lastname.html --
ID: 3725558 • Letter: 3
Question
3. Convert from inline CSS to external CSS - file t1q3_solution_lastname.html ----------------------------------------------------------------------------- <!DOCTYPE html> <html> <head><title>SQUARE PROBLEM</title> </head> <body> <form> <table> <tr> <th colspan="2">SQUARE PROBLEM</th> </tr> <tr> <td><label>Enter side:</label></td> <td><input type="text"/></td> </tr> <tr> <td><label>Area:</label></td> <td><input type="text" readonly/></td> </tr> <tr> <td><label>Perimeter:</label></td> <td><input type="text" readonly/></td> </tr> <tr> <td colspan="2" > <center> <input type="button" value="Area"/> <input type="button" value="Perimeter"/> <input type="button" value="Both"/> <input type="button" value="Clear"/> </center> </td> </tr> </table> </form> </body> </html> ----------------------------------------------------------------------------- 4. Convert from inline CSS to external CSS - file t1q4_solution_lastname.html ----------------------------------------------------------------------------- <!DOCTYPE> <html> <head><title>SHIPPING PROBLEM2</title> </head> <body> <form> <table> <th colspan="2">SHIPPING</th> <tr> <td><label>Cart Price:</label></td> <td><input type="text" /> </td> </tr> <tr> <td><label>Shipping:</label></td> <td><input type="text" readonly/></td></tr> <tr> <td><label>Cost:</label></td> <td><input type="text" readonly/></td></tr> <tr> <td colspan="2" > <input type="button" value="REGULAR" /> <input type="button" value="EXPRESS" /> <input type="button" value="OVERNIGHT" /> <input type="button" value="CLEAR" /> </td> </tr> </table> </form> </body> </html>
Explanation / Answer
Question 3)
The external CSS code for the given HTML file is given below along with the changes required in HTML document. Name the CSS file as newstyle.css and place in same folder where HTML file is placed.
HTML file
<!DOCTYPE html>
<html>
<head><title>SQUARE PROBLEM</title>
<link type="text/css" rel="stylesheet" href="./newstyle.css"/>
</head>
<body>
<form>
<table>
<tr>
<th colspan="2" >SQUARE PROBLEM</th>
</tr>
<tr>
<td><label>Enter side:</label></td>
<td><input type="text" id = "td1"/></td>
</tr>
<tr>
<td><label>Area:</label></td>
<td><input type="text" id = "td2" /></td>
</tr>
<tr>
<td><label>Perimeter:</label></td>
<td><input type="text" id ="td2" readonly /></td>
</tr>
<tr>
<td colspan="2" >
<center>
<input type="button" value="Area" id="td3"/>
<input type="button" value="Perimeter" id="td4"/>
<input type="button" value="Both" id="td5"/>
<input type="button" value="Clear" id="td6"/>
</center>
</td>
</tr>
</table>
</form>
</body>
</html>
newstyle.css
table
{
color:white;
background-color:blue;
border:solid black 7px;
border-radius:25px;
}
th
{
color:white;
background-color:black;
border:solid black 2px;
outline:solid black 2px;
}
#td1
{
background-color:#DEDEE6;
border:4px solid red;
}
#td2
{
background-color:#DEDEE6;
border:4px solid yellow;
}
#td3
{
color:white;
background-color:black;
border:1px solid red;
}
#td4
{
color:white;
background-color:black;
border:1px solid white;
}
#td5
{
color:white;
background-color:black;
border:1px solid red;
}
#td6
{
color:white;
background-color:black;
border:1px solid white;
}
Question 4)
<!DOCTYPE>
<html>
<head><title>SHIPPING PROBLEM2</title>
<link type="text/css" rel="stylesheet" href="./newstyle2.css"/>
</head>
<body>
<form>
<table>
<th colspan="2">SHIPPING</th>
<tr>
<td><label>Cart Price:</label></td>
<td><input type="text" id="td1" /> </td>
</tr>
<tr>
<td><label>Shipping:</label></td>
<td><input type="text" readonly id="td1"/></td></tr>
<tr>
<td><label>Cost:</label></td>
<td><input type="text" readonly id="td1"/></td></tr>
<tr>
<td colspan="2" >
<input type="button" value="REGULAR" id="td2" />
<input type="button" value="EXPRESS" id="td3" />
<input type="button" value="OVERNIGHT" id="td4" />
<input type="button" value="CLEAR" id="td5" />
</td>
</tr>
</table>
</form>
</body>
</html>
newstyle.css
table
{
color:black;
background-color:orange;
border:solid black 6px;
border-width:4px;
}
th
{
color:white;
background-color:black;
outline-style:solid;
outline-width:2px;
border:2px solid black;
}
#td1
{
background-color:#DEDEE6;
border:4px solid black;
}
#td2
{
color:black;
background-color:white;
border:1px solid white;
}
#td3
{
color:blue;
background-color:white;
border:1px solid white;
}
#td4
{
color:orange;
background-color:black;
border:1px solid white;
}
#td5
{
color:white;
background-color:black;
border:1px solid white;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.