Game Development Reference
In-Depth Information
Adding a little style
When you open the HTML file in a browser, you will notice that things look a little shaken up. What we
need is a basic CSS stylesheet to get all the parts of our application into the right places. To accomplish
this, we link to our previously created
style.css
file. After adding the stylesheet link, the
<head>
block of
our HTML markup looks like the following:
<head>
<meta charset="utf-8">
<title>Create, Save and Load Tracks</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
Let's open the
style.css
file in your favorite text editor and start adding some CSS rules. For an easy
start, we'll just change the font settings for the entire HTML document.
body {
font-family: Helvetica, Arial, san-serif;
}
Now it gets a little trickier. We need to align all three sections next to each other. We give the two outer
sections each a width of 300 pixels, whereas the center section is only 100 pixels wide. We add a margin
of 50 pixels to the left and center sections so that it doesn't look too clustered. To get the sections next to
each other, we float all three of them to the left. Everything put together gives us the following CSS rules:
section#grid-container {
width: 300px;
margin-right: 50px;
float: left;
}
section#bricks-container {
width: 100px;
margin-right: 50px;
float: left;
}
section#tracks-container {
width: 300px;
float: left;
}
To round off the appearance, we remove the margin from the saved tracks headline and float to the right
the Save button and the text field for the track name. After adding those last two CSS rules, the finished
style.css
file looks like the following:
body {
font-family: Helvetica, Arial, san-serif;
}
section#grid-container {
width: 300px;
