.box {
  box-sizing: border-box;   /* width/height include padding + border */
  width: 200px;
  height: 100px;
  min-width: 0;
  max-width: 100%;

  padding: 10px;            /* all sides */
  padding: 10px 20px;       /* vertical horizontal */
  padding: 10px 20px 15px 5px; /* top right bottom left */

  border: 2px solid #333;   /* width style color */
  border-radius: 8px;

  margin: 10px;
  margin: 0 auto;           /* center a block with a fixed width */

  outline: 2px solid dodgerblue; /* doesn't affect layout */
  overflow: hidden;         /* visible | hidden | scroll | auto | clip */
}

p {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;         /* 100–900, or normal/bold */
  font-style: italic;
  line-height: 1.5;         /* unitless = multiplier of font-size */
  letter-spacing: 0.02em;
  text-align: left;         /* left | right | center | justify */
  text-decoration: underline;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

.el {
  color: #1a1a1a;
  color: rgb(26 26 26);
  color: rgba(26, 26, 26, 0.5);
  color: hsl(220 20% 10%);
  color: oklch(0.6 0.15 250);

  background-color: white;
  background-image: url('/bg.png');
  background-image: linear-gradient(to right, red, blue);
  background-size: cover;         /* cover | contain | 100% 50% */
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.8;                   /* fades the WHOLE element */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.el {
  position: relative;   /* static | relative | absolute | fixed | sticky */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;           /* only affects positioned elements */
}

/* Common absolute-inside-relative pattern */
.parent { position: relative; }
.child  { position: absolute; top: 0; right: 0; }

/* Sticky header */
.header { position: sticky; top: 0; }

.el {
  width: 50%;            /* relative to parent */
  width: 20rem;           /* relative to root font-size */
  width: 2em;              /* relative to element's own font-size */
  width: 100vw;             /* relative to viewport width */
  height: 100vh;
  height: 100dvh;           /* dynamic viewport height, mobile-safe */

  width: calc(100% - 40px);
  width: clamp(200px, 50%, 600px); /* min, preferred, max */
  width: min(90vw, 800px);
  width: max(300px, 30%);
}

:root {
  --primary: #2563eb;
  --gap: 16px;
}

.card {
  color: var(--primary);
  padding: var(--gap, 12px); /* fallback if --gap is undefined */
}

/* Custom properties cascade and can be overridden per scope */
.dark-theme {
  --primary: #60a5fa;
}

* { }              /* universal */
div { }            /* type */
.card { }          /* class */
#header { }        /* id */
[type='text'] { }  /* attribute */

div p { }          /* descendant */
div > p { }        /* direct child */
div + p { }        /* adjacent sibling */
div ~ p { }         /* general sibling */

a:hover { }
li:first-child { }
li:nth-child(2n) { }
input:disabled { }
p::before { content: '→ '; }
p::first-line { }