Lesson 7

Designing our User Interface

Getting creative with CSS

Now we've got everything set up, we can start to design our user interface. Let's have a look at our wireframe.

Let's now give our apps a little more colour and structure.

1. Background Color

Add a new design instruction to our body in our stylesheet for 'background'. Note the international spelling of 'color'.

What other colours can we use?

There are a set number of "word colours" that have already been defined by developers, but if you want to truly customise your design you'll need to pick your own. See *Colours in CSS for more details.

2. size and colour

Our canvas elements will display the snap images. Right now they are not showing on the page as they don't have a size. First we create a new set of instructions for the canvas elements, then create changes for the width, height, and background color. The last instruction rounds the corners, adding a curve with a radius of 15 pixels.

Our next instruction targets the html, body and the section element at the same time. We need to set their heights to 100% so the canvas height of 42% will be rendered properly.

What is 'rendering'?

As HTML and CSS are just text, the browser needs to ‘render’ these commands into a visual appearance. The time it takes for the HTML and CSS to be converted into a visual is often considered to be the ‘rendering time’.

3. Margin and Padding

Our h1 will start the game, so we want it to look like a button. We can give it a bright background colour and then add padding and margin instructions to give our heading text a little space to breathe. Padding is a property that adds space inside an element. Margin adds space around it. These border instructions give our h1 a solid black border width is 2 pixels wide.

What other types of border can we use?

As well as solid, a border in CSS can be ‘dotted’ or ‘dashed’.

4. Float

Our player paragraphs will eventually display our player scores. We can style them the same as our h1. However, we want them to sit next to each other. To do this we need to add a 'float' value, so they sit side-by-side.

Why do we use float?

Float is used to force a section of an HTML page to one side - either left or right.

5. Display None

Finally, we don't want out player score to show until play begins. We can use 'display:none;' to hide the paragraphs until we are ready to show them!

Is the content with 'display:none' still loaded by the browser?

Yes. The browser still downloads the content, but immediately hides it until we are ready to reveal it.

*Be as creative as you like

Once you understand the principle of CSS you can add as many rules for each bit of the page as you like. What's great too is that they're all interchangeable, so if you know how to change the font-size of a heading, you can change the font-size of a paragraph (or anything else you like!)

*Colours in CSS

There are a set number of "word colours" that have already been defined by developers, but if you want to truly customise your design you'll need to pick your own.

To do this, you can go to colorpicker.com, and you'll see that each colour has an R, G and B value (standing for red, green, blue). Just select a colour you like, and then copy the RGB colours to your CSS. For example, you might change your heading colour to a lovely shade of pink:

If you'd like to have a bit of transparency in your colour, you can also give it an "alpha" value between 0 and 1, with 0 being completely transparent and 1 being completely opaque.

Go to the next lesson

index.html

style.css

the web page

New Window
Next Lesson