The following are basic notes re: CSS, written primarily for my own benefit.

When two CSS rules conflict: * The more specific one wins. * …and if they both have equal specifity: then the one which is defined later, wins out.

The order in which the CSS rules applies are as follow - the later ones overrule the earlier ones:

1. Source order
2. Specificity
3. Importance

The specificity of a css element is calculated, depending on the Ids, classes and selectors etc. used

The !importance selector overrules everything.

Inheritance

All css properties accept the following:

• inherit
• initial - the value defined by the standards.
• unset - (i) for inherited property types, it will inherit, but for (ii) non-inherited property types - it will use the initial value. We can unset all the properties at once if we want to.

.messages *{ 
    all: unset;
}

Box Models

There are two types of boxes:

• block and
• inline

The display css property type allows you to toggle whether you want something to behave as a block or as an inline element.

Inner and outer display types

• The outer display type of an element will either be: box or inline.
• The inner display type can vary viz.: (i) normal flow, (ii) flexbox, (iii) grid.

Issues to watch out for:

• Standard box model: the total width of an element is: (i) it’s width, plus padding, plus it’s border. (Margins are not considered part of an element’s width.)

• Margin collapsing. An element may have a bottom margin of: 40, and the element before it may have a bottom margin of 40. But the actual margin between them should remain 40, rather than 80 - this is because the two margins will have collapsed.

• display: inline-block - use this if you want inline items to respect width, height, and padding as well as margin and border - without going onto a new line.