Aura Dev

CSS Cheatsheet

CSS selectors, properties, and flexbox/grid.

Selectors

Basic Selectors

* { margin: 0; }           /* Universal */
div { color: red; }        /* Element */
.class { color: blue; }    /* Class */
#id { color: green; }      /* ID */

Combinators

div p { ... }      /* Descendant */
div > p { ... }    /* Direct child */
div + p { ... }    /* Adjacent sibling */
div ~ p { ... }    /* General sibling */

Flexbox

Container Properties

.container {
  display: flex;
  flex-direction: row | column;
  justify-content: center | space-between;
  align-items: center | stretch;
  flex-wrap: wrap | nowrap;
}

Item Properties

.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
  /* Shorthand: flex: 1 0 200px; */
  align-self: center;
}

Grid

Container Properties

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
  gap: 16px;
}

Item Properties

.item {
  grid-column: 1 / 3; /* Start at 1, end at 3 */
  grid-row: 2 / span 2; /* Start at 2, span 2 */
}

Positioning & Box Model

Position

position: static;   /* Default */
position: relative; /* Relative to itself */
position: absolute; /* Relative to nearest positioned ancestor */
position: fixed;    /* Relative to viewport */
position: sticky;   /* Relative to scroll container */

Box Sizing

box-sizing: content-box; /* Default */
box-sizing: border-box;  /* Includes padding & border in width */

What is CSS?

CSS (Cascading Style Sheets) is the language used to style and layout web pages.

This cheatsheet covers essential CSS selectors, properties, Flexbox, and Grid layouts to help developers build responsive designs quickly.

Sponsored LinkAdvertisement Space (728x90)