Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Styling boxes

Hello and welcome to Styling CSS boxes — in the last module we looked at the content inside your boxes; in this module we'll look at styling the actual box itself, by manipulating background color and images, borders, and other parts of the box. We'll also look at other topics, from making HTML tables look good to applying advanced effects like filters and blend modes.

Prerequisites

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

Guides

These articles will teach you all you need to style the CSS boxes on your pages in interesting and useful ways.

Box model recap
We looked at the basics of the CSS box model in our Introduction to CSS module. This article will provide a recap, and dive into some further details on the subject.
Backgrounds
In CSS you can do a lot to style the background behind your content. We've already looked at some simple uses, such as basic background colors and images; in this article we'll tell the whole story, and look at some advanced features like multiple background images, and color gradients.
Borders
Again, we've already looked at borders a bit — simple uses like setting border colors and styles. Here we'll give you an idea of what else is available, such as rounded corners and border images.
Styling tables
Styling an HTML table isn't the most glamourous job in the world, but sometimes we have to do it. This article provides a guide to making HTML tables look good, with the tools detailed in the previous articles.
Advanced box effects
This article acts as a box of tricks, providing an introduction to some of the advanced features available for styling boxes that don't fit into the other categories above — like box shadows, blend modes and filters.

Assessments

The following assessments will test your understanding of the box styling techniques covered in the guides above.

Creating fancy letterheaded paper
If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment we'll challenge you to create an online template to achieve such a look.
A cool looking box
Here you'll get some more practice in creating cool-looking boxes, by trying to create an eyecatching box.

See also

Creating fancy boxes
Some more cool box styling ideas.

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, Sebastianz, AaronMcGuire, rolfedh
 Last updated by: chrisdavidmills,