Resetting Browser Default CSS
I learned a neat way to reset browser default rules, particularly box-sizing, which makes specified widths include (or not include) padding and borders.
The width and height of each of the boxes below has been set to 200px. Each has padding of 20px and border of 2px.
Content Box
For content-box sizing, width is applied only to the content of the element, so to get the elements true rendered width we need to add 200px content width to 20px left padding and 20px right padding plus 2px left border and 2px right border. That means the actual rendered width of my element is 244px! The same applies to height.
There's a cool preset stylesheet at https://meyerweb.com/eric/tools/css/reset/ but beware! It really does reset everything! I took out the <code> tags because it was too much hassle to rewrite them!
Border Box
For this box, border-box sizing is applied, which means width and height apply to everything right up to the border. That's going to make it much easier to position elements on the page.
Using Font Face
I've use @font-face before but I'm not entirely confident with it, so I'll put Poppins in here as the default (because it has normal lower-case a's!).
Semantic HTML and avoiding 'Divitis'
This is about making proper use of the named tags that were launched with HTML5 rather than using 'div' for everything as I usually do! Apparently it's great for SEO. They want a table with tags, so here goes with those I can remember!
| Tag | Name | Description |
|---|---|---|
<header> |
Header | The great thing about these semantic tags if they're pretty self-explanatory. This is where your header stuff goes. I think whether you include your nav in this bit is a judgement call |
<nav> |
Navbar | Usually containing an unordered list of your menu items |
<main> |
Main Content | The bit that has all your main content in. Probably with a container class if you were doing oldschool bootstrap |
<section> |
Section | Marks off specific parts of your content |
<article> |
Article | Usually writing and an image about one specific thing. Not too sure how this is different from section. I suppose it should be more informative? |
<figure> |
Figure | For media bits like images. There's also a figcaption tag that makes image captions nice and neat and is apparently great for readers. It's like a visible alt tag. |
<footer> |
Footer | The bottom bit. Usually appears on every page. |
CSS Specifity
Well, who knew?! Apparently, CSS doesn't just read down the stylesheet (which is properly called cascading). It actually takes the value of the most specific css rule.
As an example, this text has a span id of blueText. I have added rules below the id to style the font colour to green, but above it in the stylesheet is a rule for the id to be blue.
I have also given each section an ID. This section has the id 'specifity'. The css rules are:
#specifity h2{
color: red;
}
h2{
color: brown;
}
As you can see, though the h2 rule comes after the section id rule, the section id rule wins because it is more specific than the h2 rule.
skeuomorphic and flat design styles
I have to keep copying and pasting because there's no way I'm going to remeber how to spell skeuomorphic!
"Skeuomorphic" (skew-o-morph-ic) means using css to try to make your element look like it would in real life.
Flat design is just accepting that this isn't real life, it's a digital screen.
Code Academy Margin Language
Just one that keeps tripping me up... Code Academy like to use the language 'Vertical Margins' and 'Horizontal Margins' and I keep getting confused about which applies to top/bottom and which applies to left/right.
Vertical margins are top/bottom because the value of the margin applies to the vertical gap between two elements.
Horizontal margin refers to the left/right margin because it defines how close an element on the same line is.
Apparently I have to use a table somewhere so here it is:
| Margin Name | Description | Collapsable |
|---|---|---|
| Top | Vertical | This value will overwrite the bottom margin of the element above if the value is larger, or will be asborbed into the bottom margin if it is smaller. |
| Right | Horizontal | Nope, not at all |
| Bottom | Veritical | Yes, this margin merges with the top margin of the element below it. |
| Left | Horizontal | Nope, not at all |