Common CSS Attributes

Every element is a box made of 4 layers: content → padding → border → margin. Understanding the box model is the first prerequisite for laying things out correctly.

css
display: block;        /* takes the whole line, accepts width/height */
display: inline;       /* only as wide as its content, does NOT accept width/height */
display: inline-block; /* inline + accepts width/height */
display: flex;         /* 1D layout — see the Flexbox section */
display: grid;         /* 2D layout — see the Grid section */
display: contents;     /* element disappears, keeps its children */
display: none;         /* removed from flow, takes no space */

css
position: static;     /* default, ignores top/left/... */
position: relative;   /* anchor for absolute children, shifts from its original spot */
position: absolute;   /* leaves the flow, references the nearest relative ancestor */
position: fixed;      /* references the viewport — always pinned */
position: sticky;     /* pins once scrolled past a threshold */

top: 10px;     /* position measured from the top */
bottom: 10px;  /* from the bottom */
left: 10px;    /* from the left */
right: 10px;   /* from the right */
inset: 0;      /* shorthand: top/right/bottom/left = 0 */
z-index: 10;   /* stacking order */

css
/* Truncate a single line with "..." */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

css
background-color: #fff;
background-image: url(bg.jpg);
background-image: linear-gradient(to right, red, orange, yellow);
background-image: -webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%);

background-size: cover;        /* fill 100% of the box, may crop */
background-size: contain;      /* show the whole image, may leave gaps */
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;  /* fixed while scrolling — parallax */
background-clip: text;         /* clip the background image to the text — combine with -webkit-text-fill-color: transparent */

/* Shorthand */
background: #fff url(bg.jpg) no-repeat center/cover fixed;

css
border: 1px solid #ddd;
border-radius: 0.5rem;
border-radius: 50%;             /* circle — apply to a square element */

outline: 2px solid blue;        /* not counted in the box, does not push layout */
outline-offset: 4px;

box-shadow: 2px 2px 7px rgba(0,0,0,.2);
/*           ↑   ↑   ↑     ↑
             x   y  blur  color
             positive x = to the right, positive y = downward */

Enable flex with display: flex or display: inline-flex.

flex-direction — the main axis

flex-wrap — wrap to a new line?

justify-content — horizontal alignment (along the main axis)

align-items — vertical alignment (cross axis)

The outer box needs a height to see the effect.

Item-level

css
.parent {
  display: flex;
  gap: 1rem;
}
.child {
  flex: 1;            /* shorthand: grow shrink basis (1 1 0) */
  flex: 0 0 200px;    /* fixed 200px — neither grows nor shrinks */
  align-self: center; /* override align-items for this item only */
  order: 2;           /* change the order */
}

css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));   /* responsive */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  gap: 1rem;
}
.item {
  grid-area: header;
  grid-column: 1 / 3;       /* span from column 1 up to before column 3 */
  grid-column: span 2;
}

css
/* Transform — change an element's appearance, does NOT re-layout */
transform: translate(-50%, -50%);
transform: rotate(-45deg);
transform: scale(1.1);            /* zoom in */
transform: translate(10px, 0) rotate(45deg) scale(1.1);  /* combine */

/* Transition — animate the change between 2 states */
transition: all 0.3s ease;
transition: transform 0.2s, opacity 0.2s;
transition: 0.4s;                 /* shorthand */

css
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.box {
  /* shorthand: name | duration | timing | delay | count | direction | fill-mode */
  animation: fade-in 0.4s ease 0s 1 normal forwards;
}

css
/* Pseudo-class */
li:nth-child(3)        { ... }   /* the 3rd element */
li:nth-child(odd)      { ... }   /* odd ones */
li:nth-child(2n+1)     { ... }
li:first-child         { ... }
li:last-child          { ... }
a:hover, a:focus       { ... }

/* Pseudo-element */
.box::before { content: ''; }
.box::after  { content: ''; }
p::first-letter { font-size: 2em; }

/* Combinator */
.parent > .child       /* direct child */
.prev   + .next        /* immediately adjacent sibling */
.prev   ~ .siblings    /* all following siblings */

• box-sizing: border-box — set it globally on every element to avoid width headaches.
• margin: 0 auto — horizontally center a block element.
• Hide an element while keeping accessibility: opacity: 0 or the sr-only class, not display: none.
• Absolute centering: position: absolute; inset: 0; margin: auto or use flex/grid with place-items: center.
• float: left/right — an old technique; use flex/grid these days.
• Background gradient + clip text: background-clip: text; -webkit-text-fill-color: transparent.