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’.
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.