HTML and CSS Reference
In-Depth Information
<meta charset="UTF-8"/>
<title>Alien Invasion</title>
<link rel="stylesheet" href="base.css" type="text/css" />
<div id='container'>
<canvas id='game' width='320' height='480'></canvas>
<script src='game.js'></script>
The only external files so far are the base.css file, an external style sheet, and a nonexistent game.js
file that will contain the JavaScript code for the game. Drop the HTML from Listing 1-1 into a new directory,
and call it index.html .
In base.css you need two separate sections. The first is a CSS reset. CSS resets make sure all elements
look the same in all browsers and any per-element styling and padding is removed. To do this, the reset sets the
size of all elements to 100% (16 pixels for fonts) and removes all padding, borders, and margins. The reset used
is the well-known Eric Meyer reset: .
You can simply copy the CSS code verbatim to the top of base.css .
Next, you need to add two additional styles to the CSS file, as shown in Listing 1-2 .
Listing 1-2: Base canvas and container styles
/* Center the container */
#container {
margin:0 auto;
/* Give canvas a background */
canvas {
background-color: black;
The first container style gives the container a little padding at the top of the page and centers its content in
the middle of the page. The second style gives the canvas element a black background.
Getting Started with Canvas
You hopefully noticed a canvas tag in the middle of the HTML on the page (as shown in Listing 1-2 ) :
<canvas id='game' width='320' height='480'></canvas>
This is where all the action for the game takes placeā€”so much exciting stuff you can do in such an unassum-
ing tag.
Search WWH ::

Custom Search