Many people contact me asking for CSS tutorials. It’s worth staying up to date.

This article will cover the basics of CSS and provide resources for further reading on key areas in modern CSS. But I will focus on the key areas that will help you understand the rest.

Language Fundamentals

You don’t need to remember values and properties for CSS. 

Selectors, More Than Just Class

A selector does the same thing as it sounds: it selects a section of your document to apply CSS rules. However, many advanced selectors can be used to locate elements in a document based on their position. It could be that they are located in the odd or right after a table.

The Level 3 selectors provide excellent browser support.

Selectors behave like you have applied a particular class to a document. For example, p acts like you have added the first _p elements of a class. These are pseudo-class selectors. They behave as if an element was dynamically added. The pseudoclass selector::firstline behaves the same as if you wrap a span around the first line. If the line’s length changes, it will apply again. If the element was inserted, this is not true. The::first-line selector then selects the element’s first lines. It acts as if a span was placed around them to make them bolder or change their colors.

Inheritance and Cascade

Multiple rules can be applied to an element. The cascade decides which rule will win. It determines which properties will be passed to child elements. Different selectors can have different specificities, which is what determines who wins when there’s more than one selector that can be applied to an element.

NOTE: To better understand these concepts, I recommend The Cascades and Inheritance (MDN Introduction to CSS).

Your browser DevTools may be able to help you if you are having trouble getting CSS to apply on an element. The following example shows how to do it. Let’s take a look at the example.

The Box Model

CSS is all about boxes. Each element on the screen can be described as a box. The Box Model describes how a box size is calculated. It takes into account margins, padding, and borders. This is a way that an element takes up more space than its width.

Recently, we were able to choose an alternative box model which uses the element’s height as the screen width. This makes a lot more sense in many layouts.

Browser DevTools can once again help you understand the box modeling being used. You can also see how padding, border, and width are added to the width I have chosen.

Internet Explorer used an alternative Box Model before IE6. It used padding and borders to set content apart from the defined width. Some users may find it frustrating that browsers do not calculate width differently.

CSS Tricks explains in detail the Box Model and Box Sizing. This article also explains how to use the alternate box model globally within your website.

Normal Flow

A document with HTML markings can be viewed in a browser. It will display as a single line. The HTML markings on words will display as a single sentence separated by one white space. It is aware of all the content and does not overlap.

It will make your life easier to choose to work with this behavior than against it. Your content should be readable because of the stylesheets that browsers use to respect normal flow.

Formatting Contexts

You might want to change the content of a document with normal flow.

There are two types of formatting contexts. The outer is what determines how an element interacts with other elements on the page. The inner determines what children should look like. Display, for example, sets the outer context to block and children the flexibility formatting.

Notice: The Display Specification has changed how display values are displayed. block defines the outer value, and Flex specifies the inner ).

FLOW – IN or OUT

CSS elements can either be “in the flow” (or “out of flow). Elements that are in flow have space. Other elements in flow respect space. You can move an element out of the flow by floating it or positioning it. The space is not available to other elements that are in the flow.

This applies especially to absolute items.

Floated elements can be removed from the flow. The floated components will have their shorter lines wrapped around by the content that follows. However, you can see that the elements have risen by adding a background color to the box of the next element. This will allow you to ignore the area taken up by the floated item.

MDN provides more information on out-of-flow and inner-flow elements. Blockflow layout’s regular rules no longer apply.

Layout

CSS has been used to create layouts since 1995. You can check out my article in Smashing Magazine Getting started CSS Layout.

Flexbox and grid don’t have to be incompatible. You can use flexbox and grid in different ways.

The layout is my specialty. I have written numerous articles in Smashing Magazine, and elsewhere to help you navigate the new Layout landscape. I also have a series about Flexbox. You can start with What Happens When you Create a Flexbox Flex Container. Also, a tutorial video.

Alignment

Alignment was introduced to most people in Flexbox so I have separated Layout and Alignment. These properties can be confusing and apply to all layout types.

You may explore Box Alignment online at MDN to see how it works with Grid, Flexbox, and Multicol. 

Sizing

2018 was a busy one for me. I talked about the Intrinsic and Extrinsic Size specifications and how they relate to Grid and Flexbox.

Responsive Design

Flexbox and Grid are flexible layouts that can adapt to changes in viewport and component size. This makes it possible to use fewer media queries than older methods.

These are the basic guidelines for responsive design. These are the basic guidelines for responsive design.

Fonts and Typography

There have been a lot of changes in the web’s font usage over the past year.

You can also try Variable Fonts in a variety of playgrounds, including, which is a fun demo from Microsoft. Axispraxis is the most popular. The Font Playground is also a favorite of mine.

This MDN guide is very useful once you start working with Variable Fonts. To work with Variable Fonts, you can use the Firefox DevTools Font editor.

Animations and Transforms

CSS Transforms and Animation are a topic that I am interested in. Start with the Using CSS Transformations or Utilizing CSS Animations guides. Zell Liew also has a great article on CSS transitions.

Have a look at Animista to see all the possibilities.

It all comes down to how you approach animations. All of these things can get confusing. Val heads recorded the talk Choose Your Animation Adventure at An Event Apart.

Cheat Sheets should be used as a reminder and not as a learning tool.

Grid and Flexbox resources are often mentioned to me. I get many replies that they can’t do Flexbox without a cheat sheet. I have even published mine. This can make it seem like a problem with the language or confusing that a property is acting differently.

Ask why when CSS does something unexpected.

CSS can do bizarre things. It is possible to understand the basics and navigate to more difficult areas.