🪴 Adithya Jayasankar

Search

SearchSearch

CSS

Jan 12, 20255 min read

Fundamentals

  • Selectors
    • Pseudo-classes
      • :hover
      • :focus
      • :checked
      • :first-child, :last-child
      • :first-of-type, :last-of-type
    • Pseudo-elements
      • ::placeholder
      • ::before
      • ::after
    • Combinators
      • >
  • Color
    • Named
    • RGB
    • Hex
    • HSL
  • Units
    • px
    • em
    • rem
    • %
  • Typography
    • font-family
    • Web fonts
    • Formatting
      • Bold
        • font-weight
          • 1 to 1000
          • default = 400
          • bold = 700
      • Italic
        • font-style: italic;
      • Underline
        • links
        • text-decoration
          • underline
          • none
    • Semantics
      • <strong>
      • <em>
      • Screen readers, “copy”
    • Alignment
      • text-align
        • left
        • right
        • center
    • text-transform
      • uppercase
      • capitalize
    • Spacing
      • letter-spacing
      • line-height

Rendering Logic

*, *::before, *::after {
	box-sizing: border-box;
}
  • Flow Layout
      1. Block elements
      • <div>, <header>, …
      • display: block;
      1. Inline elements
      • span, <a>
      • Replaced elements
        • <img />, <video />, <canvas />
    • display: inline-block
    • Width algorithms
      • auto
      • min-content, max-content
      • fit-content
      • min-width, max-width
      • <figure>, <figcaption>
    • Height algorithms
      • height: 100vh;
        • Fallback for older browsers
      • height: 100svh;
  • Margin Collapse
    • Only vertical margins collapse
    • Margins only collapse in Flow layout
    • Only adjacent elements collapse
    • The bigger margin wins
    • Nesting doesn’t prevent collapsing
      • Margins must be touching in order for them to collapse.
    • Margins can collapse in the same direction
    • More than two margins can collapse
    • Negative margins
    • Multiple positive and negative margins
    • Margin considered harmful | Max Stoiber (@mxstbr)

Positioned layout

Modern Component Architecture

Flexbox

  • Flexbox Froggy - A game for learning CSS flexbox

  • CSS Grid - 2D layouts

  • Flexbox - single dimension

  • display: flex

    • parent element will still use Flow layout

  • flex-direction: row; /* row, column */

    • row-reverse
    • column-reverse

  • justify-content: flex-start; /* flex-end, space-between… */

  • align-items: stretch; /* flex-end, baseline… */

    • align-self

  • Growing and Shrinking

    • flex
      • flex-grow
      • flex-shrink
      • flex-basis

  • flex-wrap

  • gap

  • flex-direction

  • Ordering

    • flex-direction
    • order
    • flex-wrap: wrap-reverse

  • An Interactive Guide to Flexbox in CSS

Responsive and Behavioural CSS

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
>

Graph View

Backlinks