Your Favorite Games
Incremental Lesson 2 - Styling a Display
About this tutorial
In lesson 1, we learnt how to build a basic HTML document, link a CSS and JS file to it, and add some text to the screen. In this lesson, we're going to learn how to separate content into "regions" and "blocks", then how to style those so that they appear exactly how we want them to.
Open the files you created in the last lesson. You'll be using your HTML and CSS files in this lesson. We'll delete the line "Hello World!", as we'll be replacing it with more information. Enter the "div" tag. This tag needs both an opening and closing tag to function correctly, with whatever information you want displayed between them.
Important: Some tags can be nested. This means that you can have a div tag inside a div tag inside a div tag and so on, giving you a lot of freedom in how you format your pages.
We'll start by adding <div>
and </div> in our body.
Between these two tags, we'll add the text "Basic Incremental Game". If we save and load this now, we'll see a page
very similar to what we had before, except the old text will be replaced with the new. What did we achieve then?
This is where our CSS comes in. If you press the "F12" button while in your browser, a window will appear at the bottom of the screen showing all your code. If you look for your body tag, you'll find that your div tags are still present. But they're not doing anything. Yet.
Head back to your editor. In your HTML file, we'll make a small
adjustment to your div tag. Change your opening div tag to <div id="header">. Your div now has an identifying
name.
Important: IDs should be unique in your page, meaning that only a single ID can be assigned to any one element per page.
Save your file and reload it in your browser, checking the F12 window (we'll refer to this as the debug window from now on) to ensure that your changes have taken effect. Now we need to open your CSS file.
IDs can be called by using the "#" symbol followed by their name. In this case, we'll be using "#header" to access our div. Using CSS, you can do just about anything to your page. We'll start by changing the size of the text and making it bold.
On a line, enter "#header" followed by "{". This will tell your browser that anything following the { must be applied to your element. You can tell the browser to stop applying changes using the } symbol.
Keep each adjustment on its own line. This will make it far easier to read and to make changes later on. We'll make a few small adjustments to our text now. Enter the following between the { } symbols.
Note that after each name of a modifier, the : symbol is used to set the value. The ; symbol is then used to tell the browser to stop applying changes to that particular modifier. Since we've already linked the file in our previous lesson, we can save and reload the page in our browser to see the changes.
If you don't see the changes, check that your div has the right id name entered and that your css is entered correctly. Congratulations! You have big, bold, blue text! You can set any hexadecimal value for your colour (which can consist of 6 characters, number 0-9 and letters a-f). Lets have a little play with positioning it now.
We'll make the text centered and lower it from the top of the screen a little. Enter the following into your css for your #header element.
Save and reload into the browser. We're looking better and better! Let's go ahead now and add a new div element
below that one. Start by entering <div id="stats"> and </div>
below your current div. Add the text "This is where our stats will go!" between the tags.
Now we'll make another entry into our CSS file for the stats element. Remember to use # to identify it and { } to tell the browser what to apply. Let's set the text to centered, the size to 12px, the font weight to normal, and the color to black. Note that you can use a selection of word colours for any color related property. Save with the new additions and load the file again.
Looking good, but it's a bit close to the other div. Why not add another margin to the top, perhaps 25px, to space things out a little bit. Save and load to see if you're happy with the change.
Now that you're getting the hang of it, lets add a new div below that for "clickables" and another below that for "buildings". I'll leave setting those up to you.