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.