🎨 CSS A to Z Fun!

🎨 CSS A to Z with Examples

A is for align, to center things right.

A - align (text-align)

p {
  text-align: center;
}

B is for border, bold, thick, or light.

B - border

div {
  border: 2px solid #333;
}

C is for color, red, blue, or green.

C - color

h1 {
  color: blue;
}

D is display, block or none to be seen.

D - display

div {
  display: block;
}

E is for em, scale font with ease.

E - em (font-size)

p {
  font-size: 1.5em;
}

F is for float, to left or right with breeze.

F - float

img {
  float: right;
}

G is for gap, in grid or flex row.

G - gap

.grid {
  display: grid;
  gap: 10px;
}

H is for height, how tall elements go.

H - height

div {
  height: 100px;
}

I is for inherit, styles passed down.

I - inherit

p {
  color: inherit;
}

J is for justify-content, align with style.

J - justify-content

.flex {
  display: flex;
  justify-content: center;
}

K is for @keyframes, animate a file.

K - @keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

L is for letter-spacing, wider text flow.

L - letter-spacing

h2 {
  letter-spacing: 2px;
}

M is for margin, give space to grow.

M - margin

div {
  margin: 20px;
}

N is for none, to hide from the view.

N - display: none

span {
  display: none;
}

O is for opacity, make see-through too.

O - opacity

img {
  opacity: 0.5;
}

P is for padding, inside box so neat.

P - padding

div {
  padding: 15px;
}

Q is for quotes, for styles when you cite.

Q - quotes

q {
  quotes: "“" "”" "‘" "’";
}

R is for rotate, with transform delight.

R - transform: rotate

div {
  transform: rotate(45deg);
}

S is for shadow, to give depth and glow.

S - box-shadow

box {
  box-shadow: 2px 2px 5px #999;
}

T is for transition, smooth as we go.

T - transition

button {
  transition: background 0.3s;
}

U is for underline, or not if you wish.

U - text-decoration

a {
  text-decoration: underline;
}

V is for visibility, hidden or shown.

V - visibility

div {
  visibility: hidden;
}

W is for width, to stretch or condense.

W - width

img {
  width: 100%;
}

X is for overflow-x, scroll makes sense.

X - overflow-x

div {
  overflow-x: scroll;
}

Y is for z-index, though it sounds sly.

Y - z-index (Yes, a stretch! 😄)

.layer {
  z-index: 10;
}

Z is for zoom, to scale and spy.

Z - zoom

div {
  zoom: 120%;
}