<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
head
title>A Smarter Way to Learn HTML & CSS - Chapter 84 – Ems vs. percentages vs. pixels</title>
<link rel="stylesheet" href="styles-site-improved.css" media="screen" />
<script src="main.js"</script>
<script src="dragable-content.js"</script>
script
functionnoMobile() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.replace("no-mobile.html");
}
}
functioncheckForSilk() {
if (/\bSilk\b/.test(navigator.userAgent)) {
window.location.replace("no-mobile.html");
}
}
</script>
</head>
<body onLoad="noMobile(); checkForSilk();">
<div id="container">
<div id="header" class="unhidden">
imgsrc="header-84.png" />
<div id="numberboard">
img id="num-1" src="num-1-white.png" />
img id="num-2" src="num-2.png" />
img id="num-3" src="num-3.png" />
img id="num-4" src="num-4.png" />
img id="num-5" src="num-5.png" />
img id="num-6" src="num-6.png" />
img id="num-7" src="num-7.png" />
img id="num-8" src="num-8.png" />
img id="num-9" src="num-9.png" />
img id="num-10" src="num-10.png" />
img id="num-11" src="num-11.png" />
img id="num-12" src="num-12.png" />
img id="num-13" src="num-13.png" />
img id="num-14" src="num-14.png" />
img id="num-15" src="num-15.png" />
img id="num-16" src="num-16.png" />
img id="num-17" src="num-17.png" />
img id="num-18" src="num-18.png" />
img id="num-19" src="num-19.png" />
img id="num-20" src="num-20.png" />
</div>
</div>
<div id="e0" class="unhidden"<p<b>1. </b>Fill in the recommended form of measurement. <br<span class='code'>font-size: 5__. </span</p<form<textarea rows="1" cols="55" id="i0" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p0" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck0" type="button" value="Check answer" onFocus="checkPatternNoReturns(/^ *em *$/,0);" onClick="checkPatternNoReturns(/^ *em *$/,0);" <input id="buttonSkip0" type="button" value="Skip exercise and get credit" onClick="skip(0);"</form<p id="correct0" class="correct">That's correct. Well done!</p<p class="hidden" id="c0" style="margin-top: .75em;">The correct code:<br /<span class='code'>em</span</p<p class="hidden" style="font-size:.75em; font-style: italic; margin-top: -.1em;" id="cueAdvance0">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance0" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('0')" onClick="advanceToNextExercise('0')"<input type="button" id="buttonProtest0" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(0);"</form</div>
<div id="e1" class="hidden"<p<b>2. </b>Fill in the best form of measurement for a div. <br<span class='code'>width: 50___. </span</p<form<textarea rows="1" cols="55" id="i1" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p1" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck1" type="button" value="Check answer" onFocus="checkPatternNoReturns(/^ *% *$/,1);" onClick="checkPatternNoReturns(/^ *% *$/,1);" <input id="buttonSkip1" type="button" value="Skip exercise and get credit" onClick="skip(1);"</form<p id="correct1" class="correct">That's correct. Well done!</p<p class="hidden" id="c1" style="margin-top: .75em;">The correct code:<br /<span class='code'>%</span</p<p class="pCueAdvance" id="cueAdvance1" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to advance to next exercise.</p<p class="hidden" id="cueAdvance1" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance1" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('1')" onClick="advanceToNextExercise('1')"<input type="button" id="buttonProtest1" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(1);"</form</div>
<div id="e2" class="hidden"<p<b>3. </b>Code one line to specify a solid black hairline border. Don’t indent.</p<form<textarea rows="1" cols="55" id="i2" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p2" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck2" type="button" value="Check answer" onFocus="checkPatternNoReturns(border: 1px solid red; *$/,2);" onClick="checkPatternNoReturns(/^ * border: 1px solid red; *$/,2);" <input id="buttonSkip2" type="button" value="Skip exercise and get credit" onClick="skip(2);"</form<p id="correct2" class="correct">That's correct. Well done!</p<p class="hidden" id="c2" style="margin-top: .75em;">The correct code:<br /<span class='code'>border: 1px solid red;</span</p<p class="hidden" id="cueAdvance2" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance2" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('2')" onClick="advanceToNextExercise('2')"<input type="button" id="buttonProtest2" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(2);"</form</div>
<div id="e3" class="hidden"<p<b>4. </b>Code the next line, specifying a width (your choice) for the table class. Indent it. <br<span class='code'>table.standard { </span</p<form<textarea rows="1" cols="55" id="i3" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p3" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck3" type="button" value="Check answer" onFocus="checkPatternNoReturns(/^ *width: [0-9][0-9]?%; *$/,3);" onClick="checkPatternNoReturns(/^ *width: [0-9][0-9]?%; *$/,3);" <input id="buttonSkip3" type="button" value="Skip exercise and get credit" onClick="skip(3);"</form<p id="correct3" class="correct">That's correct. Well done!</p<p class="hidden" id="c3" style="margin-top: .75em;">Example:<br /<span class='code' width: 45%;</span</p<p class="hidden" style="font-size:.75em; font-style: italic; margin-top: -.1em;" id="cueAdvance3">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance3" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('3')" onClick="advanceToNextExercise('3')"<input type="button" id="buttonProtest3" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(3);"</form</div>
<div id='e4' class='hidden'<p<b>5.</b> <strong>Drag-and-drop: </strong>Holding down the left mouse button, drag the pieces of code onto the screen to code an iframe tag. <strong>Note: On this one you won't use all the pieces.</strong</p<imgsrc='monitor-0.png' style='margin-top:-1em;'>
<div class='pieces'>
<div id='piece' class='dragableElement'<iframe src=" id='piece' class='dragableElement'</iframe</div<div id='piece' class='dragableElement'>height</div<div id='piece' class='dragableElement'>width</div<div id='piece' class='dragableElement'>77</div<div id='piece' class='dragableElement'>52</div<div id='piece' class='dragableElement'>em</div<div id='piece' class='dragableElement'>em</div<div id='piece' class='dragableElement'>px</div<div id='piece' class='dragableElement'>px</div<div id='piece' class='dragableElement'>%</div<div id='piece' class='dragableElement'>%</div<div id='piece' class='dragableElement'</div<div id='piece' class='dragableElement'>=</div<div id='piece' class='dragableElement'>=</div<div id='piece' class='dragableElement'</div</div>
<div style="margin: 1em 0 01.5em;">
<input type="button" value="Check your code against the correct code" onclick="window.open('drag-84.html','mywindow','width=750,height=300, top=400,left=450')"<input type="button" value="I got it right" style="margin-left: 1em;" onclick="colorizeNumberAndAdvanceToNextExercise(4,true); advanceToNextExercise(4);"<input type="button" value="I got it wrong" style="margin-left: 1em;" onclick="colorizeNumberAndAdvanceToNextExercise(4,false); advanceToNextExercise(4);"<input type="button" value="Too easy. Skip and give me credit" style="margin-left: 1em;" onclick="colorizeNumberAndAdvanceToNextExercise(4,true); advanceToNextExercise(4);"</div</div>
<div id="e5" class="hidden"<p<b>6. </b>Click in the box and type the next character. I'll autocomplete. Don't type spaces or carriage returns. When the exercise is complete, I'll turn the exercise number green.<p<p>Code a line that specifies overall margins of 2 units, using the preferred unit of measurement (ems, percentage, or pixels).</p<div style="margin-left:5px;"<p id="a5" class="code" style="font-size:18px;"</p</div<input id="i5" class="codeField" type="text" size="2" maxlength="1" autofocus="focus" style="margin-left:345px;" onkeyup="var result=checkKeyPress1Finger('5','margin{}:{}1space2{}em{};{}', event); "<brbr<div style="width:45%; margin: auto;"<input type="button" id="buttonSeeAnswer5" value="See answer and try again later" onfocus="; unhideAndHide('c5'); unhideAndHide('buttonSeeAnswer5'); unhideAndHide('buttonSkip5'); document.getElementById('i5').focus();" onclick="unhideAndHide('c5'); unhideAndHide('buttonSeeAnswer5'); unhideAndHide('buttonSkip5'); document.getElementById('i5').focus();"<input type="button" id="buttonSkip5" value="Skip and get credit" style="margin-left: 1em;" onclick="colorizeNumberAndAdvanceToNextExercise(5,true); advanceToNextExercise(5);"</div<div class="hidden" id="c5" style="margin-top: .75em;">The correct code:<br<span class='code'>margin: 2em;</span>brbr<input id="buttonAdvance5" type="button" value="Advance to next exercise" onFocus="colorizeNumberAndAdvanceToNextExercise(5,false); advanceToNextExercise('5');" onClick="colorizeNumberAndAdvanceToNextExercise(5,false); advanceToNextExercise('5')"</div<div id="success5" class="hidden"<p id="correct5" style= "color: #33cc00;">That's correct. Well done!</p<p id="cueAdvance5" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance5" type="button" value="Advance to next exercise" onFocus="advanceToNextExercise('5')" onClick="advanceToNextExercise('5')"</div</div>
<div id="e6" class="hidden"<p<b>7. </b>Fail-safe coding. If you type the wrong character, I'll cancel the keystroke. Type spaces. When the exercise is complete, I'll turn the exercise number green.</p<p>Code a line that specifies padding for all four sides—no padding for top and bottom, 3 units of padding for left and right. Use the preferred unit of measurement for padding. Don't indent.</p<form<textarea rows="1" cols="57" id="i6" class="codeField style=" font-size:15px;'="" autofocus="focus" onkeyup="var result=checkKeypressBeep(6, 'padding: 0 3em 0 3em;');"</textarea</form<br<div style="width:48%; margin: auto;"<input type="button" id="buttonSeeAnswer6" value="See answer and try again later" onfocus="unhideAndHide('c6'); unhideAndHide('buttonSeeAnswer6'); unhideAndHide('buttonSkip6'); document.getElementById('i6').focus();" onclick="unhideAndHide('c6'); unhideAndHide('buttonSeeAnswer6'); unhideAndHide('buttonSkip6'); document.getElementById('i6').focus();"> <input type="button" id="buttonSkip6" value="Skip and get credit" style="margin-left: 1em;" onclick="colorizeNumberAndAdvanceToNextExercise(6,true); advanceToNextExercise(6);"</div<div class="hidden" id="c6" style="margin-top: .75em;">The correct code:<br /<span class='code'>padding: 0 3em 0 3em;</span>brbr<input id="buttonAdvance6" type="button" value="Advance to next exercise" onFocus="colorizeNumberAndAdvanceToNextExercise(6,false); advanceToNextExercise('6')" onClick="colorizeNumberAndAdvanceToNextExercise(6,false); advanceToNextExercise('6')"<p id="cueAdvance6" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to advance to next exercise.</p</div<div id="success6" class="hidden"<p style= "color: #33cc00;" id="correct6"> That's correct. Well done!</p<input id="buttonAdvance6" type="button" value="Advance to next exercise" onFocus="colorizeNumberAndAdvanceToNextExercise(6,true); advanceToNextExercise('6');" onClick="colorizeNumberAndAdvanceToNextExercise(6,true); advanceToNextExercise('6');"</div</div>
<div id="e7" class="hidden"<p<b>8. </b>Write a line of code to specify a solid black hairline border. Don't indent.</p<form<textarea rows="1" cols="55" id="i7" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p7" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck7" type="button" value="Check answer" onFocus="checkPatternNoReturns(/^ *border: 1px solid black; *$/,7);" onClick="checkPatternNoReturns(/^ *border: 1px solid black; *$/,7);" <input id="buttonSkip7" type="button" value="Skip exercise and get credit" onClick="skip(7);"</form<p id="correct7" class="correct">That's correct. Well done!</p<p class="hidden" id="c7" style="margin-top: .75em;">The correct code:<br /<span class='code'>border: 1px solid black;</span</p<p class="hidden" style="font-size:.75em; font-style: italic; margin-top: -.1em;" id="cueAdvance7">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance7" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('7')" onClick="advanceToNextExercise('7')"<input type="button" id="buttonProtest7" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(7);"</form</div>
<div id="e8" class="hidden"<p<b>9. </b>Style a class of paragraph that specifies 2 units for the font size. Use the preferred unit of measurement. Make up the class name.</p<form<textarea rows="3" cols="55" id="i8" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p8" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck8" type="button" value="Check answer" onFocus="checkPatternNoReturns(/^ *p\.[^ ]+ {\n *font-size: 2em;\n} *$/,8);" onClick="checkPatternNoReturns(/^ *p\.[^ ]+ {\n *font-size: 2em;\n} *$/,8);" <input id="buttonSkip8" type="button" value="Skip exercise and get credit" onClick="skip(8);"</form<p id="correct8" class="correct">That's correct. Well done!</p<p class="hidden" id="c8" style="margin-top: .75em;">Example:<br /<span class='code'>p.big {<br font-size: 2em;<br>}</span</p<p class="hidden" style="font-size:.75em; font-style: italic; margin-top: -.1em;" id="cueAdvance8">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance8" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('8')" onClick="advanceToNextExercise('8')"<input type="button" id="buttonProtest8" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(8);"</form</div>
<div id="e9" class="hidden"<p<b>10. </b>Style a div with an id, specifying a width of your choice. Make up the id.</p<form<textarea rows="3" cols="55" id="i9" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p9" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck9" type="button" value="Check answer" onFocus="checkPatternNoReturns(/^ *div#[^ ]+ {\n *width: [0-9][0-9]?0?%;\n} *$/,9);" onClick="checkPatternNoReturns(/^ *div#[^ ]+ {\n *width: [0-9][0-9]?0?%;\n} *$/,9);" <input id="buttonSkip9" type="button" value="Skip exercise and get credit" onClick="skip(9);"</form<p id="correct9" class="correct">That's correct. Well done!</p<p class="hidden" id="c9" style="margin-top: .75em;">Example:<br /<span class='code'>div#main {<br width: 65%;<br>}</span</p<p class="hidden" style="font-size:.75em; font-style: italic; margin-top: -.1em;" id="cueAdvance9">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance9" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('9')" onClick="advanceToNextExercise('9')"<input type="button" id="buttonProtest9" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(9);"</form</div>
<div id="e10" class="hidden"<p<b>11. </b>Style a class of heading (your choice of size) with a bottom margin. Don't specify the other margins. Choose how much margin. Make up the class name.</p<form<textarea rows="3" cols="55" id="i10" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p10" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck10" type="button" value="Check answer" onFocus="checkPatternNoReturns(/^ *h[1-6]\.[^ ]+ {\n *margin-bottom: [0-9]?\.?[0-9]?em;\n} *$/,10);" onClick="checkPatternNoReturns(/^ *h[1-6]\.[^ ]+ {\n *margin-bottom: [0-9]?\.?[0-9]?em;\n} *$/,10);" <input id="buttonSkip10" type="button" value="Skip exercise and get credit" onClick="skip(10);"</form<p id="correct10" class="correct">That's correct. Well done!</p<p class="hidden" id="c10" style="margin-top: .75em;">Example:<br /<span class='code'>h2.special {<br margin-bottom: 1.5em;<br>}</span</p<p class="hidden" style="font-size:.75em; font-style: italic; margin-top: -.1em;" id="cueAdvance10">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance10" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('10')" onClick="advanceToNextExercise('10')"<input type="button" id="buttonProtest10" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(10);"</form</div>
<div id="e11" class="hidden"<p<b>12. </b>Fix a div with an id of "header" at the top-left of the window.</p<form<textarea rows="5" cols="55" id="i11" class="codeField" size="57" autofocus="focus" onKeyup="checkForSkip(event);"</textarea<form<p id="p11" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck11" type="button" value="Check answer" onFocus="checkPatternNoReturns(/^ *div#header {\n *position: fixed;\n *top: 0;\n *left: 0;\n} *$/,11);" onClick="checkPatternNoReturns(/^ *div#header {\n *position: fixed;\n *top: 0;\n *left: 0;\n} *$/,11);" <input id="buttonSkip11" type="button" value="Skip exercise and get credit" onClick="skip(11);"</form<p id="correct11" class="correct">That's correct. Well done!</p<p class="hidden" id="c11" style="margin-top: .75em;">The correct code:<br /<span class='code'>div#header {<br position: fixed;<br top: 0;<br left: 0;<br>}</span</p<p class="hidden" style="font-size:.75em; font-style: italic; margin-top: -.1em;" id="cueAdvance11">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance11" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('11')" onClick="advanceToNextExercise('11')"<input type="button" id="buttonProtest11" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(11);"</form</div>
<div id="e12" class="hidden"<div id="time-options" style="border: 2px solid black; padding: 0 1em 1em1em;"<p style="margin-bottom:-.1em;">The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.</p<span class="buttonCheckDrag"<imgsrc="button-double-the-allowed-time.png" onmouseover="src='button-double-the-allowed-time-hover.png';" onmouseout="src='button-double-the-allowed-time.png';" onclick="multiplyTime(2); alert('The time to complete each timed exercise for this chapter has been doubled.'); hide('time-options'); document.getElementById('i12').focus();"</span<span class="buttonCheckDrag"<imgsrc="button-quadruple-the-allowed-time.png" onmouseover="src='button-quadruple-the-allowed-time-hover.png';" onmouseout="src='button-quadruple-the-allowed-time.png';" onclick="multiplyTime(4); alert('The time to complete each timed exercise for this chapter has been quadrupled.'); hide('time-options'); document.getElementById('i12').focus();"</span</div<p<b>13. </b<strong>Time goal: 25seconds. </strong>Code a line that specifies padding for all four sides—no padding for top and bottom, 3 units of padding for left and right. Use the preferred unit of measurement for padding. Don't indent.</p<form<textarea rows="1" cols="55" id="i12" type="text" class="codeField" size="57" onfocus="document.getElementById('timerStarted').innerHTML='no';" onkeydown="readKeyForTimed('12');"</textarea</form<p id="p12" style="font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to check answer.</p<input id="buttonCheck12" type="button" value="Check answer" onFocus="checkPatternTimed(padding: 0 3em 0 3em;,12,25);" onClick="checkPatternTimed(padding: 0 3em 0 3em;,12,25);"<input id="buttonSkip12" type="button" style="margin-left: 1em;" value="Skip exercise and get credit" onClick="skip(12);"<p id="correct12"</p<p class="hidden" id="c12" style="margin-top: .75em;">The correct code:<br /<span class='code'>padding: 0 3em 0 3em;</span</p<p class="hidden" id="cueAdvance12" style="color: black; font-size:.75em; font-style: italic; margin-top: -.1em;">Press Tab or click button to advance to next exercise.</p<input id="buttonAdvance12" type="button" value="Advance to next exercise" class="hidden" onFocus="advanceToNextExercise('12')" onClick="advanceToNextExercise('12');"<input type="button" id="buttonProtest12" value="I believe my answer was correct. Give me credit." style="margin-top: .5em;" class="hidden" onclick="advanceAfterProtest(12);"<p class="pCueAdvance" >Press Tab or click button to advance to next exercise.</p</div>