Como Usar CSS para Formatar Textos e Cores em HTML

O CSS (Cascading Style Sheets) é utilizado para definir a aparência de uma página HTML, como cores, tamanhos de texto, alinhamento e fundo.

Neste tutorial você aprenderá a:

Alterar cor do texto
Alterar cor de fundo
Formatar textos
Alinhar textos

1. Inserindo CSS no HTML

Uma das formas mais simples de usar CSS é dentro da tag <style> no <head> da página.

Estrutura básica

<html>
<head><title>Exemplo CSS</title><style>body{
    background-color: lightblue;
}</style></head><body><h1>Minha Página</h1></body>
</html>

Explicação

<style> → onde escrevemos o código CSS
body → define estilo para toda a página
background-color → altera a cor de fundo

2. Alterando a Cor do Texto

Usamos a propriedade color.

h1{
    color: red;
}

Exemplo completo

<html>
<head><style>h1{
    color: red;
}</style></head><body><h1>Texto Vermelho</h1></body>
</html>

3. Alterando a Cor de Fundo da Página

Usamos background-color.

body{
    background-color: yellow;
}

Exemplo:

<body><h1>Minha página</h1>
<p>Esta página possui fundo amarelo.</p></body>

4. Alinhamento de Texto

Usamos text-align.

Valores mais comuns:

left → esquerda
center → centro
right → direita

Exemplo

h1{
    text-align: center;
}

Código completo:

<html>
<head><style>h1{
    text-align: center;
}</style></head><body><h1>Título Centralizado</h1></body>
</html>

5. Alterando o Tamanho do Texto

Usamos font-size.

p{
    font-size: 20px;
}

Exemplo:

<p>Este texto está maior.</p>

6. Alterando o Tipo de Fonte

Usamos font-family.

p{
    font-family: Arial;
}

Exemplo:

<p>Texto usando fonte Arial.</p>

7. Deixando o Texto em Negrito ou Itálico

Negrito

p{
    font-weight: bold;
}

Itálico

p{
    font-style: italic;
}

8. Exemplo Completo

<html><head><title>Exemplo CSS</title><style>body{
    background-color: lightgray;
}h1{
    color: blue;
    text-align: center;
}p{
    color: darkgreen;
    font-size: 18px;
    text-align: justify;
}</style></head><body><h1>Minha Página com CSS</h1><p>
Este é um exemplo de página utilizando CSS para alterar cor, tamanho
e alinhamento do texto.
</p></body></html>

9. Principais Propriedades Usadas

Propriedade	Função
color	Cor do texto
background-color	Cor de fundo
text-align	Alinhamento do texto
font-size	Tamanho da fonte
font-family	Tipo de fonte
font-weight	Negrito
font-style	Itálico

✅ Resumo

CSS permite controlar a aparência da página: