# 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.

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](https://mastery.games/post/flexboxzombies2/), 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.