How to Speak Code (Part 2: CSS)
So now you know how to create a HTML sheet, but your web page is looking, well, boring. But good news you can easily fix that with CSS (this is your style sheet)! The CSS is where you can make your web page look colourful and eye catching.
If you want to only focus on one section you have to add some code to your HTML. In my case I wanted my ingredients and equipment list to be in separate boxes. Above my ingredients heading I added the code: <section class=”ingredientslist”>, then closed it using </section>; and proceed to do the same with my equipment list.
You then add the section to your CSS. You can then choose the font as well as different colours for your background, text and the border, also you can control the padding.
If you want to change certain words to make them stand out; you, again, have to add to your HTML first. In my ingredients list I wanted to make the quantities more pronounced. I used the code <span class-”quantity”> before the amount and closed it with </span> afterwards. Then added the section to my CSS:
This is how my ingredients list looked on the web page:
