What I learned this week…
This week on the 9th of October we talked about the next layer of The Web Standards Model – the presentation layer, also known as CSS or the style sheet.
We covered the important basics and some best practices:
- Linking the style sheet to our HTML files using a
<link>element - Always writing in American English
- Using only one style sheet for the whole website
- Resetting the CSS file – more specifically using Eric Meyer’s reset
- Always adding a semicolon ; after a declaration
After that we did a demo practice applying a CSS reset and adding some styling rules ourselves. We covered how a style rule should be structured and the many options of declarations we can include in one rule.
Then, we covered the font declaration and its structure. A font declaration begins with our preffered font, followed by at least two fonts – one for Windows and one for Mac users – and by a generic font such as serif or sans-serif. This selection of fonts is also reffered to as ‘font stack’.
We learned about the “Box Model” that applies to all HTML elements and consists of padding, border and margin. Each one has a different role. To best understand what is the role of each one, using a different background colour than the one for the other elements can help. Simply put, the “Box Model” surrounds an element and is by default transparent and invisible. The padding creates space between the element and its box border and the margin adds space between the element and other elements. At first it does seem a little confusing to imagine and understand how it works. I watched Kevin Powell’s Box Model video to help me visualise and better understand it.
Lastly, we quickly covered colour and how to add them, the element that do and don’t inherit style rules, and how to add comments. It was interesting to learn that comments in HTML and CSS files are structured differently. HTML comment looks like this <!--comment here--> and a CSS comment is /*comment here*/, which makes me wonder how a comment would be structured in Java Script (the next coding language we will learn in Term 2).