Now we've got everything set up, we can start to design our user interface. Cast your mind back to our wireframe:
We want to centre everything and we might want a nice punchy background colour. We are designing a mobile app, so we will need to set a phone-sized maximum width. Let's see what this looks like in CSS:
The great thing about CSS is you can kind of read what it's doing. For the sake of absolute clarity, let's have a look at what this block of CSS would look like with comments after each line:
We start by targeting all paragraphs and setting their display property to "none". Then, we targeted just the first question and set its display property to "block", which is CSS's way of saying "show".
nth-of-type(n) is what's called a pseudo-selector; it allows you to get one of a specified group of elements.
Please note, the authors had to Google "targeting first paragraph with CSS" as it's not something we'd done before! As a coder, you're not expected to know all the answers. Search engines are always right there – it doesn't make sense trying to remember all the commands, and we're all learning all the time!
You should now have just one question showing. Let's style up the answer boxes by targeting the
spans inside the paragraphs and making them big and bold. Let's also make the paragraphs a bit bigger and make them bold as well. We've already done this for the heading, so this bit should be a doddle :)
Padding is the space around the inside of an element, between the content and any border. Margin is the space around the outside. We've used "p span" as we only want to target
spans that are inside paragraphs.
Wouldn't it be nice if the buttons changed when you hovered over them? We can do this by defining an extra list of styles for when it's hovered over (with ":hover" being another pseudo-selector!)
Finally, let's style up our score box. We want it to appear at the bottom of the page and stick there:
We've given it the same background colour as the rest of the page. This means that if your questions are very long, they will scroll behind the score. The instruction for padding is the equivalent of writing:
The answers to the question have no room to scroll and the score box is sitting over them. Let's add some padding to the bottom of the body; this means the page can scroll comfortably: