A better question might be: “What can’t CSS do?”

CSS can be used to turn an HTML document into a professional, polished design. Here are a few of the things you can accomplish wish CSS:

• Create a flexible grid for designing fully responsive websites that render beautifully on any device.
• Style everything from typography, to tables, to forms, and more.
• Position elements on a web page relative to one another using properties such as float, position, overflow, flex, and box-sizing.
• Add background images to any element.
• Create shapes, interactions, and animations.

These concepts and techniques go beyond the scope of this introductory guide, but the following resources will help you tackle these more advanced topics.

The Box Model

If you plan to use CSS to build web page layouts, one of the first topics to master is the box model. The box model is a way of visualizing and understanding how each item on a web page is a combination of content, padding, border, and margin.

Understanding how these four pieces fit together is a fundamental concept that must be mastered prior to moving on to other CSS layout topics.

Two great places to learn about the box model include:

• An explanation of the box model from the World Wide Web Consortium.
• An introduction to the CSS box model from the Mozilla Developer Network.

Creating Layouts

There are a number of techniques and strategies used to create layouts with CSS, and understanding the box model is a prerequisite to every strategy. With the box model mastered you’ll be ready to learn how to manipulate boxes of content on a web page.

The Mozilla Developer Network offers a good introduction to CSS layouts. This short read covers the basic concepts behind CSS layouts, and quickly introduces properties such as text-align, float, and position.

A much more extensive an in-depth guide to CSS layouts is available from the W3C: The CSS layout model. This document is a resource for professional developers, so if you’re new to CSS take your time as you review it. This isn’t a quick read. However, everything you need to know about creating CSS layouts is contained in this document.

Grid layouts have been the go-to strategy for designing responsive layouts for several years. CSS grids have been created from scratch for years and there are many different grid-generating websites and development frameworks on the market. However, within a few years, support for grid layouts will be part of the CSS3 specification. You can learn a lot about grids by reading up on the topic at the W3C website. For a lighter and shorter introduction to grid layouts, take a look at this article from Mozilla.

Within a few years, CSS3 Flexible Box, or flexbox, is expected to become the dominant model for designing website layouts. The flexbox specification is not yet entirely complete and finalized, and support for flexbox is not consistent between browsers. However, every budding CSS developer needs to be familiar with flexbox and prepared to implement it in near future. The Mozilla Developer Network is one of the best places to get up to speed on flexbox.

Web Fonts & Typography

There’s a lot that can be done to add personality and improve the readability of the content on a website. Learn more about selecting fonts and typography for the web in our guide to Fonts & Web Typography.