Full Notes on Notion.


Tutorial by Dave Gray

Free YouTube Tutorial.

"Keep striving for progress, not perfection. And a little progress every day goes a very long way." - Dave Gray

Getting Started

CSS, mainly used for HTML although possible to use for XML.

Apply Styles

Three ways to apply style:

  • External - <link rel="stylesheet" href="/css/style.css">
  • Internal - <style></style> in head, syntax exactly same as external.
  • Inline - <p style="color: blue">, better to prevent this for separation of concern.

Final defined styles will override the previous one.
The previous one will only be persisted when specified as `!important`, which should be prevented most of the time, as the code should have designed properly without overrules.

CSS Validation

Validation can be done on w3c website by uploading the CSS files.

01 - Selectors

Three common levels of selector:

Use <span class="..."> inline, for special inline styles.


body {
  border: 1px solid #111;
  font-size: 20px;

All the child of body inherits the font-size but not the border, the behaviours are by default.
Use the Inheritance to make sure the codes are DRY (Don't Repeat Yourself).

02 - Colours

Four main ways to set colours (especially for <color> and <background>):

Make sure colour contrasts are good through coolors.co.

03 - Units and Sizes

Absolute Length - px
Not ideal for font as it does not respect user browser font size settings. Commonly used for `border`.
Percentage - %
Not ideal for font. Commonly used for `width`.
Relative Length - rem or em
`rem`, ideal for font size, relative to root. `em`, relative to parent.
Character Count - ch
Can be used to set `width`, limit by character count.
Viewport - vw or vh
`vw`, viewport width, `vh`, viewport height. Similar to `%`, but viewport ignores the scrollbar makes it less ideal. Viewport height is often used for setting `min-height` of a block.

04 - Box Model

Everything in CSS is a box.

All elements are built from 4 parts:

Every element can be inspected (F12), and the 4 parts will be shown under computed.
Every part can have their top, right, bottom and left values set seperately, e.g.:
margin: top, right, bottom, left;

Many elements have some default `em` margins and paddings, if want to get rid of all those to take full control, a CSS reset can be used:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

05 - Typography

The way a text is arranged and presented (font).

Remember `rem` is the preferable way to set font size.
Some elements do not inherit parent's font settings by default, it can be set through `font: inherit;`.

07 - List Styles

Important attributes:

: (Pseudo-Class) and :: (Pseudo-Element)

li:nth-child(even) {
ul li::marker {
  content: "Prefix... ";

08 - Display

Display Types:

Such as paragraph. By default, 100% width within the given space.
Such as span. Attribute like height is constrained within parent block, adding padding to it can sometimes cause it to overlap another element as the parent block does not change with it.
Hybrid, stay in line while not limited to parent height.
Hide the element, but not the ideal way as it completely hides the element from the page and unable to read by assistive reader.