CSS Reset
We usually want to ensure a consistent UI across browsers without having to constantly overwrite default styles. We can …
- … manually set the most important rules
- … use a pre-made «Reset CSS» file to fully strip all styles
- … use Normalize.css which ensures consistent default styles without resetting everything
- … use Sanitize.css which take an opinionated approach to include developer preferences (such as border-box)
Precedence of Rules
We already saw that inline styles overrule other styles. We've also seen, that we can apply multiple rules to the same element.
This begs the question:
What are the rules to resolve conflicting styles?
Specificity
Specificity is the means by which browsers decide which CSS property value will be applied. It's a weight determined by the used selector.
Selector Types
Different selector types ordered by increasing weight:
- Types (h1) and pseudo-elements (::before)
- Classes (.red), attributes ([type=radio]), pseudo-classes (:hover)
- IDs (#title)
Calculate Weight
The weight can be represented in this format: id-class-tag.
div.banner li /* 0-1-2 */#upload > button /* 1-0-1 */form [type="password"] /* 0-1-1 */:root #myApp input:required /* 1-2-1 */Comparison
Weights get compared from left to right. Which means:
.banner /* 0-1-0 */beats
body section div ul li /* 0-0-5 */Tools
IntelliJ shows specificity in CSS if you hover over the selector.
Otherwise, these websites (among many) could help you analyse/calculate the specificity of your selector:
Inheritance
Inheritance controls what value is applied if none is explicitly specified for the property of an element.
There's two type of properties:
- inherited properties: by default use value of parent element
- non-inherited properties: by default use initial value
Inherited Properties
When specified, these properties' values are applied as default for all child elements.
Typical examples are text related properties like:
- color
- font-family, font-size, …
- line-height
- text-align
Non-inherited Properties
Specifying values for these properties will only apply them to the targeted elements.
Typical examples are layout related properties like:
- margin, padding
- height, width
- border
- flex, grid
- position
It's boxes all the way down
- Every HTML element is represented as a rectangular box.
- CSS determines the size, position, and other properties (e.g. color) of these boxes.
- Each box is divided into 4 areas.
What's in the box?
Content: The actual content of the box, in which text, images and other child elements appear. Child elements are bound by this area.
Padding: Clears an area around the content, separating content and border. The padding is transparent.
Border: A border that goes around the padding and content. Backgrounds extend to the edge of this area/box. The border can be colored.
Margin: Clears an area outside the border to separate the element from its neighbors. The margin is transparent.
Box Sizing
There are 2 ways to determine the size of a box from height and width values:
Content Box
Default behaviour. The element's size (height, width) corresponds with the content box size. Padding and border add to the rendered width.
Border Box
Includes padding and border into the values for an element's height and width. Increasing padding or border sizes will shrink the content box. Generally easier to use.
box-sizing: content-box | border-box;
Box Sizing
.parent {
width: 250px;
background: lightskyblue;
}
.content-box {
box-sizing: content-box;
width: 100%;
padding: 5px;
border: solid #666 10px;
}
.border-box {
box-sizing: border-box;
width: 100%;
padding: 5px;
border: solid #666 10px;
}
Positioning
The position property determines where the element is rendered:
- static: default, rendered in page flow
- relative: can be offset from its parent, original space will remain occupied
- absolute: removes element from the page flow, allows positioning in relation to the closest parent not static
- fixed: like absolute but in relation to the window
- sticky: hybrid of relative and fixed
Margin Collapsing
Vertical margins (top and bottom) of blocks are collapsed in 3 cases.
1. Adjacent siblings
2. Nothing separating parent & descendants
When there's no border, padding or content between outer and inner margin.
3. Empty blocks
Top and bottom margin collapses on blocks with zero height and no border or padding.
Margin Collapsing
How can we avoid collapsing issues?
- Use margins in only one direction, e.g. only bottom and right margins
- Generally don't overuse margins, many problems can be solved with padding
Margin vs. Padding
When should I use which one?
-
Use margin for spacing between neighbouring elements
control whitespace -
Use padding to position child elements and text content
control box - Note: padding is included in the background colour/image and click region (e.g. for links or buttons)
- Margin can be set to auto or negative numbers
A little mnemonic
