Interactive CSS Cheatsheet - VCA Hashtag Cyberstar

Flexbox

Click the property values to see how flex containers arrange their children.

flex-direction

justify-content

align-items

flex-wrap

gap 10px

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}

Grid

Experiment with CSS Grid column and row configurations.

columns

rows

gap 5px

items

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

Box Model

Adjust margin, border, and padding to see how the box model works.

margin 20px

border 5px

padding 20px

content 100px

margin

border

padding

content

.element {
  margin: 20px;
  border: 5px solid #333;
  padding: 20px;
  width: 100px;
  box-sizing: content-box;
}

Typography

Adjust font properties and see the text change in real-time.

font-size 24px

font-weight

line-height 1.4

letter-spacing 0px

text-align

text-transform

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

.text {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0px;
  text-align: left;
  text-transform: none;
}

Position

See how different position values affect element placement.

position

top 20px

left 20px

REF

BOX

.element {
  position: static;
  /* top and left have no effect on static */
}

Transforms

Adjust transform properties to rotate, scale, and move elements.

rotate 0deg

scale 1

translateX 0px

translateY 0px

skewX 0deg

BOX

.element {
  transform: rotate(0deg) scale(1) translateX(0px) translateY(0px) skewX(0deg);
}

Animations

Select an animation to see it in action, then copy the keyframes.

animation

duration 1s

timing

/* No animation selected */

Colours

Pick a colour and see it in different CSS formats.

pick colour

hex #aa66ee

rgb rgb(170, 102, 238)

hsl hsl(270, 80%, 67%)

Preview

.element {
  background-color: #aa66ee;
  /* or: rgb(170, 102, 238) */
  /* or: hsl(270, 80%, 67%) */
}

Units Comparison

See how different CSS units compare at the same numeric value.

value 50

50px

50%

50em (capped)

50rem (capped)

50vw (capped)