01 — CSS Fundamentals

┌─────────────────────────────────────┐
│           Margin (transparent)       │
│   ┌─────────────────────────────┐   │
│   │         Border               │   │
│   │   ┌─────────────────────┐   │   │
│   │   │      Padding        │   │   │
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │   Content    │   │   │   │
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

.element {
  width: 300px;        /* Content width */
  height: 200px;
  padding: 20px;       /* Inside spacing */
  border: 2px solid #333;
  margin: 10px;        /* Outside spacing */
  box-sizing: border-box;  /* Include padding+border in width */
}

/* Type */
div { }
 
/* Class */
.btn { }
 
/* ID */
#header { }
 
/* Attribute */
input[type="text"] { }
 
/* Pseudo-class */
a:hover { }
li:nth-child(odd) { }
button:focus { }
 
/* Pseudo-element */
p::first-line { }
div::before { }
 
/* Combinators */
nav ul { }        /* Descendant */
.parent > .child { }  /* Direct child */
h1 + p { }        /* Adjacent sibling */
h1 ~ p { }        /* General sibling */

Inline styles:    1000
ID selectors:     0100
Class/attribute:  0010
Type selectors:   0001
 
/* Examples */
#nav .link:hover    → 0111
.menu a            → 0011
body div ul li a   → 0004

/* Display */
div { display: block; }      /* Full width, new line */
span { display: inline; }    /* Flows with text */
div { display: inline-block; } /* Inline but sized */
 
/* Position */
.static { position: static; }    /* Default */
.relative { position: relative; top: 10px; }  /* Offset from normal position */
.absolute { position: absolute; top: 0; left: 0; }  /* Relative to nearest positioned ancestor */
.fixed { position: fixed; top: 0; left: 0; }  /* Relative to viewport */
.sticky { position: sticky; top: 20px; }  /* Scrolls then sticks */

.container {
  display: flex;
  flex-direction: row;        /* row | column */
  justify-content: center;    /* Main axis */
  align-items: center;        /* Cross axis */
  gap: 10px;                  /* Space between items */
  flex-wrap: wrap;            /* Allow wrapping */
}
 
.item {
  flex: 1;                    /* Grow/shrink factor */
  align-self: flex-start;     /* Override align-items */
}

/* Center both axes */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
/* Space between */
.space-between {
  display: flex;
  justify-content: space-between;
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* Fractional units */
  grid-template-rows: 100px auto;
  gap: 20px;                  /* Gap between cells */
}
 
.item {
  grid-column: 1 / 3;        /* Start / end line */
  grid-row: 1 / span 2;
}
 
/* Named areas */
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
 
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Mobile first */
.container { padding: 10px; }
 
/* Tablet */
@media (min-width: 768px) {
  .container { padding: 20px; }
}
 
/* Desktop */
@media (min-width: 1024px) {
  .container { padding: 40px; }
}
 
/* Print */
@media print {
  .no-print { display: none; }
}