Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Olá e bem vindo às Caixas de Estilo CSS - No último módulo nós vimos o conteúdo dentro das caixas; neste módulo, nós veremos o estilo da própria caixa, manipulando a cor e as imagens de fundo, as bordas e outras partes da caixa. Também veremos outros tópicos, desde criar tabelas HTML até aplicar efeitos avançados, como filtros e modos de mesclagem.

Pré-requisitos

Antes de iniciar este módulo, você já deve ter uma familiaridade básica com HTML, como discutido no módulo Introdução ao HTML, e estar confortável com os fundamentos de CSS, como discutido na Introdução ao CSS.

Nota: Se você estiver trabalhando em um computador/tablet/outro dispositivo que não tenha a capacidade de criar seus próprios arquivos, expereimente os exemplos de código (a maioria deles) em um programa de codificação on-line como o JSBin ou Thimble.

Guias

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.
Bordas
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 glamorous 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 eye-catching box.

See also

Creating fancy boxes
Some more cool box styling ideas.

Etiquetas do documento e colaboradores

Colaboradores desta página: efraimsilva
Última atualização por: efraimsilva,