2. Convert from inline CSS to external CSS - file t1q2_solution_lastname.html --
ID: 3725601 • Letter: 2
Question
2. Convert from inline CSS to external CSS - file t1q2_solution_lastname.html ----------------------------------------------------------------------------- <!DOCTYPE html> <html> <head><title>RECTANGLE PROBLEM</title> </head> <body> <form> <table> <tr><th colspan="2">RECTANGLE PROBLEM</th></tr> <tr> <td><label>Length:</label></td><td><input type="text"/> </td> </tr> <tr> <td><label>Width:</label></td><td><input type="text"/> </td> </tr> <tr> <td><label>Area:</label></td><td><input id="area" 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="reset" value="Clear" /> </center> </td> </tr> </table> </form> </body> </html>
Explanation / Answer
MyHtml.html
----------------
<!DOCTYPE html>
<html>
<head><title>RECTANGLE PROBLEM</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<form>
<table>
<tr><th colspan="2">RECTANGLE PROBLEM</th></tr>
<tr> <td><label>Length:</label></td><td><input type="text"class="a1"/> </td> </tr>
<tr> <td><label>Width:</label></td><td><input type="text" class="a1"/> </td> </tr>
<tr> <td><label>Area:</label></td><td><input id="area" type="text" class="a1" readonly/> </td> </tr>
<tr> <td><label>Perimeter:</label></td><td><input type="text" class="a1" readonly/> </td> </tr>
<tr>
<td colspan="2" >
<center>
<input type="button" value="Area" class="a2" />
<input type="button" value="Perimeter" class="a2" />
<input type="button" value="Both" class="a2"/>
<input type="reset" value="Clear" class="a2"/>
</center>
</td>
</tr>
</table>
</form>
</body>
</html>
mystyle.css
------------------
table{
background-color:orange;
border:solid black 7px;
border-radius:25px;
}
th{
color:white;
background-color:black;
border:solid black 2px;
outline:solid black 2px;
}
.a1{
background-color:#DEDEE6;
border:4px solid black;
}
.a2{
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.