Here is what I have so far: * { box-sizing: border-box; } body { background-colo
ID: 3711707 • Letter: H
Question
Here is what I have so far:
* { box-sizing: border-box; }
body { background-color: #3f2860;
color: #3f2860;
font-family: Verdana, Arial, sans-serif; }
header { background-color: #9bc1c2;
background-image: url(image/lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px; }
h1 { padding-top: 50px;
padding-left: 2em; }
nav { float: left;
width: 160px;
font-weight: bold;
padding: 1em; }
nav a { text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
border: 3px outset #cccccc;
padding: 1em;
margin-bottom: 1em; }
nav a:link { color: #3f2860; }
nav a:visited { color: #497777; }
nav a:hover { color: #a26100; border: 3px inset #333333; }
nav ul { list-style-type: none;
padding-left: 0; }
.studio { font-style: italic; }
main {
display: block;
margin-left: 170px;
padding-top: 1em; }
footer { background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em; }
#wrapper { margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px; }
.floatleft { float: left;
margin-right: 4em; }
.clear { clear: both; }
header, nav, main, footer { display: block; }
1. Create a label element selector to float to the left with block display. Set the text alignment to right, font-weight to bold, assign a width of 10em, and configure 1em right padding.
2. Configure the input element and textarea element selctors with block display and 2em of bottom margin.
3. Configure an id named mySubmit with a 12em left margin.
4. Configure the form element selector with 3em padding.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
* { box-sizing: border-box; }
body { background-color: #3f2860;
color: #3f2860;
font-family: Verdana, Arial, sans-serif; }
header { background-color: #9bc1c2;
background-image: url(image/lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px; }
h1 { padding-top: 50px;
padding-left: 2em; }
nav { float: left;
width: 160px;
font-weight: bold;
padding: 1em; }
nav a { text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
border: 3px outset #cccccc;
padding: 1em;
margin-bottom: 1em; }
nav a:link { color: #3f2860; }
nav a:visited { color: #497777; }
nav a:hover { color: #a26100; border: 3px inset #333333; }
nav ul { list-style-type: none;
padding-left: 0; }
.studio { font-style: italic; }
main {
display: block;
margin-left: 170px;
padding-top: 1em; }
footer { background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em; }
#wrapper { margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px; }
.floatleft { float: left;
margin-right: 4em; }
.clear { clear: both; }
header, nav, main, footer { display: block; }
/*below is required config**/
.input-label{text-align: right; font-weight: 700;display: block; color:white;width: 10em;padding-right: 1em;}
.input-control{display: block; margin-bottom: 2em;}
#mySubmit {margin-left: 12em;}
form{padding: 3em;}
</style>
<form>
<label class="input-label">Input Label</label>
<input type="text" class="input-control">
<label class="input-label">Text area</label>
<textarea cols="15" class="input-control"></textarea>
<input type="submit" id="mySubmit">
</form>
</body>
</html>