S2JS - Javascript interacting with HTML : Add some styles

Now we'll add some styling.

We'll make a CSS class called MyCalculator which holds the calculator
It will have a tan coloured background, and elements inside it will be centred
All the buttons will be large, with large text and a border
All the buttons will appear inset when they are pressed
We'll make a CSS class called NumBtn for the "number" buttons
We'll make another CSS class called OpBtn for all the "operation" buttons

<HTML> <title> My Calculator </title> <body> <style> .MyCalculator {width:240px; padding:10px; text-align:center; background-color:tan;} button {margin-top:5px; font-size:150%; border-width:3px;} button:active {border-style: inset} .NumBtn {width: 20%;} .OpBtn {width:30%; color:red} </style> <div class="MyCalculator"> <button class="NumBtn">1</button> <button class="NumBtn">2</button> <button class="NumBtn">3</button> <br> <button class="NumBtn">4</button> <button class="NumBtn">5</button> <button class="NumBtn">6</button> <br> <button class="NumBtn">7</button> <button class="NumBtn">8</button> <button class="NumBtn">9</button> <br> <button class="NumBtn">0</button> <button class="NumBtn">.</button> <br> <hr> <button class="OpBtn" >+</button> <button class="OpBtn" >*</button> <button class="OpBtn" >CLR</button> <br> <button class="OpBtn" >-</button> <button class="OpBtn" >/</button> <button class="OpBtn" >=</button> </div> </body> </html>