246 CHAPTER 5 More HTML5
<header>
<hgroup id="headerText">
<h1>Contoso Ltd.</h1>
<h2>Your success equals our success</h2>
</hgroup>
</header>
<nav>
<a href="default.html">Home</a>
</nav>
<div role="main">
<div id="calculator">
<input id="txtResult" type="text" readonly="readonly" /><br />
<input id="txtInput" type="text" /><br />
<button id="btn7">7</button>
<button id="btn8">8</button>
<button id="btn9">9</button><br />
<button id="btn4">4</button>
<button id="btn5">5</button>
<button id="btn6">6</button><br />
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button><br />
<button id="btnClear">C</button>
<button id="btn0">0</button>
<button id="btnClearEntry">CE</button><br />
<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
</div>
</div>
<aside>
<p>Advertisements</p>
</aside>
<footer>
<p>
Copyright © 2012, Contoso Ltd., All rights reserved
</p>
</footer>
</div>
<script type="text/javascript">
window.addEventListener('load', initialize, false);
</script>
</body>
</html>
Exercise 2: Add styles to the calculator layout
Now that you have completed the layout container, add and modify styles in the
default. css file.
- Open the default.css file and, at the top of the file, add a style rule to set the margin
and padding of all elements to 0 pixels.
Your style rule should look like the following.- { margin : 0; padding : 0; }