Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

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.


  1. 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; }



Free download pdf