Fala, Dev! Beleza? No artigo anterior aprendemos sobre as bases da estilização com CSS. Agora chegou o momento de dar um salto na apresentação visual das suas páginas: vamos aprender como formatar, alinhar e estilizar imagens de forma profissional. Neste tutorial completo do nosso Curso de CSS, você vai dominar o uso de bordas, espaçamentos (padding e margin), alinhamento com float e a estruturação semântica moderna com as tags <figure> e <figcaption>.
Tutorial de Imagens em CSS: Como Formatar, Alinhar e Criar Legendas
Estilizar imagens no CSS não exige propriedades complexas exclusivas. Na verdade, aplicamos os conceitos fundamentais do Box Model (como bordas, margens e espaçamentos internos) sobre o elemento gráfico para criar molduras, alinhar figuras ao lado de blocos de texto e incluir legendas explicativas elegantes.
🛠️ A Evolução do Layout: O Antes vs. O Depois
Antigamente (HTML4): Usava-se o atributo align="left" direto na tag <img> e tabelas engessadas para prender legendas abaixo das fotos. O resultado era um código poluído, difícil de manter e sem adaptação responsiva.
Hoje (HTML5 + CSS3): Agrupamos a imagem dentro do elemento semântico <figure>, vinculamos a legenda nativa com <figcaption> e controlamos todo o alinhamento, espaçamento e responsividade via CSS limpo.
1. As Propriedades Indispensáveis para Estilizar Imagens
Para transformar uma figura bruta em um elemento visual integrado ao design do site, utilizamos um conjunto de quatro propriedades essenciais do CSS:
- border: Define a borda ao redor da imagem (espessura, estilo e cor).
- padding: Cria um respiro interno entre a imagem e a sua borda, gerando um efeito de moldura ou foto estilo Polaroid.
- margin: Garante o afastamento externo, impedindo que o texto fique grudado nas laterais da figura.
- float: Faz a imagem "flutuar" para a esquerda ou direita, permitindo que o texto flua suavemente ao redor dela.
2. O Jeito Moderno: Usando <figure> e <figcaption>
Em vez de envolver suas imagens em tags <div> genéricas, a especificação do HTML5 introduziu tags semânticas próprias para ilustrações, diagramas e fotos acompanhadas de texto explicativo:
<figure>: O container principal que isola a imagem e todo o seu conteúdo relacionado dentro do documento.<figcaption>: A legenda oficial associada à imagem, interpretada corretamente pelos motores de busca (SEO) e leitores de tela.
Exemplo Prático: Alinhando Imagem e Texto com Legenda
Abaixo, confira como estruturar o código HTML semântico e a folha de estilo CSS para criar um card de imagem alinhado à esquerda com o texto contornando o elemento.
O Código HTML Semântico (index.html)
<!-- Container da Figura com Legenda -->
<figure class="card-foto">
<img src="css.png" alt="Tutorial de CSS Progressivo" title="Logo Oficial do CSS3" width="150" height="150" />
<figcaption>Figura 1: Logotipo do CSS3.</figcaption>
</figure>
<p>
CSS significa Cascading Style Sheets e é uma linguagem de estilos usada para estilizar páginas web.
A grande vantagem do CSS é a capacidade de separar a estrutura do conteúdo do seu design visual.
</p>
<p>
Ao utilizar a propriedade float combinada com margens adequadas, conseguimos um alinhamento harmonioso
entre o bloco de texto e os elementos gráficos do artigo.
</p>O Código CSS Otimizado (estilo.css)
/* Estilização do Container Figure */
.card-foto {
/* Flutuação e alinhamento */
float: left;
/* Espaçamento externo para afastar o texto envolvente */
margin: 0 20px 15px 0;
/* Moldura estilo Polaroid */
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 10px;
/* Largura fixa ajustada ao container */
max-width: 180px;
}
/* Responsividade da Imagem */
.card-foto img {
display: block;
height: auto;
max-width: 100%;
border-radius: 4px;
}
/* Estilização da Legenda (caption) */
.card-foto figcaption {
color: #64748b;
font-size: 0.85rem;
font-style: italic;
margin-top: 8px;
text-align: center;
}🛠️ Resultado Visual Renderizado no Navegador:
Quer dominar o Front-End de verdade e sem anúncios?
Leve o curso completo para onde quiser! Estude offline, acelere seu aprendizado com exercícios práticos e garanta seu material de consulta permanente.
⚠️ SEO e Acessibilidade: Dicas de Ouro para Imagens
Atributo alt obrigatorio: Sempre preencha o alt="descrição da imagem" com um texto claro. Além de ser essencial para leitores de tela usados por pessoas com deficiência visual, é o principal fator de indexação no Google Imagens (SEO).
Imagens Responsivas: Nunca esqueça de declarar max-width: 100%; height: auto; no CSS global do seu site para evitar que imagens grandes "quebrem" a tela em smartphones.
Perguntas Frequentes (FAQ)
Como fazer o texto contornar uma imagem no CSS?
Para o texto flutuar ao redor da figura, aplique a propriedade float: left; ou float: right; na imagem ou no container <figure>. Lembre-se de adicionar margin no lado em que o texto encosta para criar um espaçamento visual agradável.
Qual a vantagem de usar <figure> em vez de <div>?
A tag <figure> traz semântica ao HTML5, informando aos motores de busca e leitores de acessibilidade que aquele bloco é uma unidade ilustrativa completa, associando diretamente a legenda <figcaption> ao elemento visual.
O que estudar a seguir?
Aprofunde seus conhecimentos no desenvolvimento web acompanhando as próximas etapas:
- Passo 1: Trabalhando com Pseudo-classes e Pseudo-elementos no CSS
- Passo 2: Entendendo a Propriedade Position (relative, absolute e fixed)
- Passo 3: Como Criar Layouts Modernos e Flexíveis com Flexbox
