AtoZ CSS

:nth-child is a pseudo class used to select elements by a numeric expression. The syntax is quite different to most other aspects of CSS and can be a bit tricky to get your head around to begin with. In this episode we'll look at the various ways of using :nth-child, the slightly more flexible :nth-of-type selector and their counterparts selectors :nth-last-child and :nth-last-of-type.

The @media rule allows conditional styling of elements. The conditions can be based on the type of media or known characteristics of the device being used. Combining media queries with fluid layout and flexible images, allows us to implement responsive web design.

The CSS `line-height` property acts in a similar way to leading in print design. It allows us to control the spacing between lines in paragraphs, headings and other text elements. Line-height can also be used as a base to create consistent vertical rhythm and spacing throught an entire project.

Animation used to be the realm of JavaScript. Now, in modern browsers, we can animate elements using CSS. The `@keyframes` block and `animation` properties allow us to specify what gets animated and when. In this episode we'll look at the kind of animations that are suited to CSS, the concept of specifying a series of `@keyframes` and finally the way these keyframes are combined with `animation` settings to bring the page to life.

Watch the process of creating an episode of AtoZ CSS as I broadcast my screen in hyper-fast-forward. This is the entire process of writing and researching through sound recording, editing and screen recording and editing to final tweaks and effects; 6 hours work in 5 minutes, just for a bit of fun.

Justify is one available value for the text-align property. It allows the formatting of text in a style often used in newspaper design. In this epsiode, we’ll look at the 12 possible values for text-align, one of which is justify, next we’ll look at using justified text with CSS columns and finally look at how justify can be used to create a floatless responsive grid system with just a few lines of code.

ID is a CSS selector that allows the styling of a single unique element. Their use in CSS is common and often a little controversial. In this video, I will outline some of the reasons why I prefer the class selector over ID, how CSS specificity works.

Hover is a pseudo class and can be used to style state. The hover state is active when a users mouse enters the bounding box of an element and is inactive when the users mouse leaves it. In this episode, we’ll look at the :hover pseudo class on text links and create a CSS dropdown menu triggered by hover and enhanced with jQuery for touch devices.

General sibling is a little known but very useful CSS selector. It allows the styling of an element that is a sibling of another. We’ll look at the syntax, a practical example and then a quick round up of the other child and sibling selectors in CSS.

The float property is most commonly used for page layout. However, the original purpose of float was to allow text to wrap around an object. As float is often not used as originally intended, working with it can be a bit fragile and a bit tricky until you get used to its quirks.