What Can CSS Do?

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 floatpositionoverflowflex, 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.

A visual representation of the box model. Content is surrounded by padding, which is surrounded by the border and then the margin is applied.
CSS Box Model by Mozilla ContributorsCC-BY-SA 2.5.

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:

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-alignfloat, 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.

Related Posts

Beginner’s Guide to Sass

Have you ever wondered what SASS stands for? Or perhaps you already know what it is but haven’t taken the time to study and use it. Whether…

Create a Consistent Cross-Browser Experience

Every browser interprets the HTML specification a little differently. As a result, when identical code is rendered in two different browsers, there are often minor differences in…


The second rule that determines which rules are applied to each HTML element is the rule of specificity. CSS rules with more specific selectors will overrule CSS rules with less…

Cascading Inheritance

Why are CSS styles called cascading? When multiple rules are written that conflict with each other, the last rule written will be implemented. In this way, styles cascade…

How CSS Works

When writing CSS, there are many times that rules are written that conflict with each other. For example, when styling headers, all of the following rules may…

Best Practices for Preparing Your Markup for Styling

Now that you know how classes, IDs, and element tags can be used as hooks for CSS rulesets, how can you best implement this knowledge to write…