CSS

/* Element, class, ID */
p { color: red; }
.highlight { background: yellow; }
#header { font-size: 2rem; }

/* Attribute */
input[type="text"] { border: 1px solid #ccc; }

/* Pseudo-classes */
a:hover { color: blue; }
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f0f0f0; }
p:not(.special) { color: gray; }

/* Pseudo-elements */
p::first-line { font-variant: small-caps; }
p::before { content: "→ "; }
p::after  { content: " ←"; }

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

.box {
  width: 200px;
  height: 100px;

  /* Padding (inside border) */
  padding: 10px;                    /* all sides */
  padding: 10px 20px;               /* top/bottom  left/right */
  padding: 5px 10px 15px 20px;      /* top right bottom left */

  /* Border */
  border: 2px solid #333;
  border-radius: 8px;
  border-top: 3px dashed red;

  /* Margin (outside border) */
  margin: 20px auto;                /* center horizontally */

  /* Include padding+border in width */
  box-sizing: border-box;
}

/* Universal reset */
*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;        /* row | column | row-reverse | column-reverse */
  justify-content: center;    /* main axis: flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;        /* cross axis: flex-start | flex-end | center | stretch | baseline */
  flex-wrap: wrap;            /* allow wrapping */
  gap: 1rem;                  /* space between items */
}

.item {
  flex: 1;                    /* grow and shrink equally */
  flex-grow: 1;               /* how much to grow */
  flex-shrink: 0;             /* don't shrink */
  flex-basis: 200px;          /* initial size */
  align-self: flex-end;       /* override align-items for this item */
  order: 2;                   /* change visual order */
}

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;

  /* Repeat shorthand */
  grid-template-columns: repeat(3, 1fr);

  /* Responsive auto-fit */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.item {
  grid-column: 1 / 3;         /* span columns 1-2 */
  grid-row: 1 / 2;
  grid-column: span 2;        /* span 2 columns */
}

/* Named template areas */
.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }

/* Define in :root for global scope */
:root {
  --primary: #3498db;
  --secondary: #2ecc71;
  --font-base: 16px;
  --spacing: 1rem;
  --radius: 8px;
  --shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Use variables */
.button {
  background: var(--primary);
  font-size: var(--font-base);
  padding: var(--spacing);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Fallback value */
color: var(--text-color, black);

/* Override in component scope */
.dark-theme {
  --primary: #1a1a2e;
  --text-color: #ffffff;
}

/* Transition */
.button {
  background: blue;
  transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
  background: darkblue;
  transform: translateY(-2px);
}

/* Keyframe Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.element {
  animation: fadeIn 0.5s ease forwards;
  animation-delay: 0.2s;
}

/* Shorthand */
animation: spin 1s linear infinite;

/* Static — normal flow (default) */
.static { position: static; }

/* Relative — offset from normal position */
.relative { position: relative; top: 10px; left: 20px; }

/* Absolute — relative to nearest positioned ancestor */
.absolute { position: absolute; top: 0; right: 0; }

/* Fixed — relative to viewport */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

/* Sticky — relative until scroll threshold */
.sticky { position: sticky; top: 0; }

/* Center with absolute */
.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Mobile-first base styles */
.container { width: 100%; padding: 1rem; }

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container { max-width: 768px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container { max-width: 1200px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #fff; }
}

/* Print */
@media print { .navbar, .footer { display: none; } }

/* Fluid typography */
font-size: clamp(1rem, 2.5vw, 2rem);

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;        /* 100–900 */
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #333;
}

/* Text overflow */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line clamp */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 2D Transforms */
.el {
  transform: translateX(50px);
  transform: translate(50px, -20px);
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: scale(1.2, 0.8);   /* x, y */
  transform: skew(10deg, 5deg);
  /* Multiple */
  transform: rotate(45deg) scale(1.2) translateX(10px);
  transform-origin: top left;
}

/* 3D */
.card {
  transform: perspective(500px) rotateY(30deg);
  transform-style: preserve-3d;
}

/* Filters */
img {
  filter: blur(4px);
  filter: brightness(1.2);
  filter: contrast(150%);
  filter: grayscale(100%);
  filter: sepia(50%);
  filter: drop-shadow(2px 4px 6px black);
  filter: blur(2px) brightness(0.8); /* combine */
}