An A to Z of CSS

This is inspired by me walking into a room to find my parents and nephew trying to do an A to Z of cars.

A accessibility

What a lot of people forget, but I think is just as important as responsiveness.

B block

Perpendicular to the writing direction.

C calc

Doing calculations in CSS. Very handy.

D display

block, inline, inline-block, flex, inline-flex, grid, inline-grid, none, etc

E :empty

A useful pseudo-class for styling elements with no children. As long as they don't have any white space within them.

F flexbox

When I first started CSS I learnt by looking at the Inspector and playing with things. And then I copied someone who did their layouts with floats. And it was so hard to position things. Learning about flexbox made all the difference.

G grid

What still feels to me like flexbox's more complicated and more powerful sibling.

H height

How much space something takes up horizontally.

I inline

The writing direction. Really useful for centering, where you can use margin-inline: auto.

J justify

In Flexbox Zombies, you use your justify laser to target zombies in the direction you're firing.

K @keyframes

Animation steps.

L line-height

Can make text look totally unreadable if it's too big or too small.

M margin

Space around an element that doesn't make the element bigger.

N none

Useful to stop displaying something or removing borders.

O object-fit

Although it seems like this has been around forever, I came across something a while back that was relatively. It included some JavaScript someone had written to cope with object-fit being new and not working in all browsers yet.

P padding

Spacing around the element that makes the element bigger. Negative padding is not a thing like negative margin is.

Q queries

Media queries and container queries, used for responsive design and accessibility.

R responsiveness

Important for making sure your site fits on all screens. Seems pretty basic, but there are plenty of sites which don't fit properly at some sizes.

S specificity

This becomes a pain when trying to override styles from a third party. Although recently I have seen some CMS plugins using :where, which helps a lot.

T text

Sometimes used for font styling. And sometimes you use font. Except if you want to change the colour of the text, in which case it's neither.

U units

The most used of these are %, px, em and rem. Also fr in grids and s and ms in transitions and animations.

V visibility

Interesting, the opposite of visible is hidden. Which is not what you'd logically think it would be.

W width

How much space something takes up horizontally.

X overflow-x

A bit of a cheat for x, but there's nothing beginning with x. This controls the horizontal overflow. x is also used with Tailwind where eg mx is the horizontal margin.

Y overflow-y

As with x, this controls the vertical overflow. And y is generally to denote vertical in Tailwind.

Z z-index

The highest/lowest z-index you can use is (-)2,147,483,647. Or infinity will give you the same thing. But typing a load of 9s and then wondering why it isn't working is a much simpler method.