Like HTML, CSS is not really a major focus for this course - but it’s good to know a few basic rules so that our game doesn’t stick out like a sore thumb on a white background with a horrible “Times New Roman” title.

CSS Intro

As mentioned in the Adding HTML to our Project page, CSS is essentially a set of rules that are applied to your HMTL page to describe how it should look. There are a number of ways that you can apply CSS rules to an HTML document, but we will only focus on two for now.

1 - By tag - this will apply the style you describe to each and every tag on your page.

body { 
	background-color: black;
}

2 - By id - in the HTML exercises you created a div with id=”gameContainer”. You can use as many id options as you like to set styles on specific elements of your document.

#gameContainer { 
	background-color: red;
}

Let’s do some basic CSS now. You won’t be an expert after these exercises, but it will give you some background into how CSS works.

Exercises

0 - First, we need somewhere to place the CSS that we’re going to use to style our page. Create a file in your Brackets project called exercises.css.

1 - Now we need to tell the HTML page to read the CSS file and load the styles from it. You should add the following link to the <head> section of your exercises.html page.

<link rel="stylesheet" href="exercises.css" />

The link tag is used to load external resources that should be used to render the page. Like with images, the link tag doesn’t contain anything - but it does need a couple of options to function. First, it needs to know just what it is that is being loaded into the page. We’re loading a CSS stylesheet to style the page, so we provide rel=”stylesheet”. After that we need to say what we want to link, and that’s the name of the CSS file we just created href=”exercises.css”.

2 - Okay, hopefully all is good, but we won’t be able to see anything yet as the stylesheet is empty. As our game is going to be set in space, let’s add a dark background to the page. You can either just use black directly or a dark grey colour like #555555. Refresh the page after adding the script below to your css file and the background should change.

body { 
	background-color: #555555;
}

3 - If you’re new to colours in CSS, now would be a good time to play with the background colour of your page. Try some different values. Colour codes are #RRGGBB where RR is the amount of red in the colour, GG green and BB blue. Each part is actually a hexidecimal value - so it can range from 00 (0) to FF (255). Experiment with some colours now, try setting the page to #FF0000 and then #00FF00 and #009999.

Note that white is #FFFFFF and black is #000000. Any colour where all 3 values are the same is always a shade of grey (#999999).

4 - Now that you’ve got the hang of colours, try setting the page background to a dark colour again (maybe even black).

5 - With a dark page background - we probably also want to change the colour of the text to something lighter. If you set the color: property for your body tag, then it will change the colour of ALL text on your page (as everything is ultimately enclosed by body tags). Try setting the colour of your text to white or a light grey.

6 - Next up we want our title to stand out by being a different colour. It’s time to add a secton to match our h1 tags to our stylesheet.

h1 { 

}

Use the color: tag to change the colour of your page title to something different to your body text.

7 - Now we’ve got to do something about that damn font. The default font it exceptionally ugly! Using the ‘font-family’ tag experiment with the following fonts “Arial”, “Verdana”, “Tahoma”, “Century Gothic”.

body { 
	... 
	font-family: ""
}

8 - Many websites use a different font for the page title to the rest of the page to make it stand out more. Add a font-family property to your h1 tag and change the font to one that is different to your body tag.

Fin

We now have enough knowledge of CSS to make a basic page for our game project. Use this knowledge to setup a basic page with a title for our game to live in.