🎨 Estilizando Textos e Cores com CSS

Olá, futuro(a) desenvolvedor(a) web! 👋 Nesta aula prática, vamos mergulhar no mundo vibrante do CSS para aprender como estilizar textos e aplicar cores aos elementos da sua página. A tipografia e o esquema de cores são cruciais para a usabilidade e a estética de qualquer site, então prepare-se para dar vida às suas criações!

Ao final desta aula, você será capaz de:

Modificar a fonte, tamanho, peso e alinhamento do texto.
Aplicar decorações e transformações em textos.
Definir cores para textos, fundos e bordas usando diferentes formatos.
Criar combinações de estilos para textos e cores que melhoram a experiência do usuário.

Vamos começar a colorir e dar forma às suas palavras! 🚀

1. Estilizando Textos com CSS

O CSS oferece uma vasta gama de propriedades para controlar a aparência do texto. Vamos explorar as mais comuns e poderosas.

1.1. `font-family` (Família da Fonte)

A propriedade font-family define a fonte a ser usada para um elemento. É uma boa prática listar várias fontes, pois se a primeira não estiver disponível no sistema do usuário, o navegador tentará a próxima. Sempre termine com uma fonte genérica (como serif, sans-serif, monospace) para garantir que o navegador tenha uma opção padrão.

Sintaxe:

font-family: "Nome da Fonte 1", "Nome da Fonte 2", tipo-generico;

Exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando Fontes</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Fonte padrão para o corpo */
        }
        h1 {
            font-family: "Georgia", serif; /* Fonte com serifa para o título */
            color: #333;
        }
        p {
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Outra fonte sem serifa */
            color: #555;
        }
    </style>
</head>
<body>
    <h1>Título Principal</h1>
    <p>Este é um parágrafo com uma fonte personalizada. A escolha da fonte é crucial para a legibilidade.</p>
    <p>Se a primeira fonte não estiver disponível, o navegador tentará a próxima da lista.</p>
</body>
</html>

Documentação Oficial (MDN): font-family

1.2. `font-size` (Tamanho da Fonte)

A propriedade font-size controla o tamanho do texto. Você pode usar várias unidades:

px (pixels): Tamanho fixo.
em: Relativo ao tamanho da fonte do elemento pai.
rem: Relativo ao tamanho da fonte do elemento raiz (<html>).
%: Relativo ao tamanho da fonte do elemento pai.
vw (viewport width), vh (viewport height): Relativo à largura/altura da viewport.

Sintaxe:

font-size: 16px;
font-size: 1.2em;
font-size: 1.5rem;

Exemplo:

/* No seu arquivo CSS ou bloco <style> */
h1 {
    font-size: 3em; /* 3 vezes o tamanho da fonte padrão do pai */
}
p {
    font-size: 1.1rem; /* 1.1 vezes o tamanho da fonte padrão do HTML */
}
.pequeno {
    font-size: 12px; /* Tamanho fixo em pixels */
}

Documentação Oficial (MDN): font-size

1.3. `font-weight` (Peso da Fonte)

Define a espessura (negrito/claro) dos caracteres.

normal (equivalente a 400)
bold (equivalente a 700)
Valores numéricos de 100 a 900 (em múltiplos de 100). Nem todas as fontes suportam todos os pesos.

Exemplo:

h1 {
    font-weight: bold; /* Negrito */
}
p {
    font-weight: normal; /* Padrão */
}
.destaque {
    font-weight: 600; /* Mais espesso que o normal, mas não totalmente bold */
}

Documentação Oficial (MDN): font-weight

1.4. `font-style` (Estilo da Fonte)

Define se o texto deve ser normal, itálico ou oblíquo.

normal
italic (itálico verdadeiro, se disponível na fonte)
oblique (versão "falsa" de itálico, inclinando o texto normal)

Exemplo:

em {
    font-style: italic; /* Geralmente já é padrão para <em> */
}
.citacao {
    font-style: oblique; /* Texto inclinado */
}

Documentação Oficial (MDN): font-style

1.5. `text-align` (Alinhamento do Texto)

Alinha o conteúdo do texto dentro de um elemento.

left
right
center
justify (alinha ambas as margens, distribuindo o espaço entre as palavras)

Exemplo:

h1 {
    text-align: center; /* Título centralizado */
}
p.introducao {
    text-align: justify; /* Parágrafo justificado */
}

Documentação Oficial (MDN): text-align

1.6. `text-decoration` (Decoração do Texto)

Adiciona ou remove linhas decorativas no texto.

none (remove qualquer decoração, útil para links)
underline (sublinhado)
overline (linha acima)
line-through (riscado)

Você também pode estilizar a linha com text-decoration-line, text-decoration-color, text-decoration-style e text-decoration-thickness.

Exemplo:

a {
    text-decoration: none; /* Remove o sublinhado padrão dos links */
}
.concluido {
    text-decoration: line-through red wavy 2px; /* Riscado vermelho ondulado */
}

Documentação Oficial (MDN): text-decoration

1.7. `line-height` (Altura da Linha)

Define a altura de cada linha de texto, afetando o espaçamento vertical entre as linhas. É recomendado usar valores sem unidade para melhor adaptabilidade.

Exemplo:

p {
    line-height: 1.6; /* 1.6 vezes o tamanho da fonte do próprio elemento */
}
h2 {
    line-height: 1.2; /* Títulos geralmente têm menos espaçamento */
}

Documentação Oficial (MDN): line-height

1.8. `letter-spacing` e `word-spacing` (Espaçamento)

letter-spacing: Adiciona ou subtrai espaço entre os caracteres.
word-spacing: Adiciona ou subtrai espaço entre as palavras.

Exemplo:

h1 {
    letter-spacing: 2px; /* Aumenta o espaçamento entre letras */
}
.slogan {
    word-spacing: 5px; /* Aumenta o espaçamento entre palavras */
}

Documentação Oficial (MDN): letter-spacing, word-spacing

1.9. `text-transform` (Transformação de Texto)

Converte o texto para maiúsculas, minúsculas ou capitaliza a primeira letra de cada palavra.

none
uppercase
lowercase
capitalize

Exemplo:

h2 {
    text-transform: uppercase; /* Todo o texto em maiúsculas */
}
.nome {
    text-transform: capitalize; /* Primeira letra de cada palavra em maiúscula */
}

Documentação Oficial (MDN): text-transform

1.10. `text-shadow` (Sombra do Texto)

Adiciona uma sombra ao texto. Aceita múltiplos valores separados por vírgula para criar várias sombras.

offset-x: Deslocamento horizontal da sombra.
offset-y: Deslocamento vertical da sombra.
blur-radius (opcional): Raio do desfoque da sombra.
color (opcional): Cor da sombra.

Exemplo:

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra preta levemente desfocada */
}
.efeito-3d {
    color: white;
    text-shadow: 1px 1px 0px black,
                 2px 2px 0px #333,
                 3px 3px 0px #666; /* Múltiplas sombras para efeito 3D */
}

Documentação Oficial (MDN): text-shadow

Exemplo Combinado de Estilos de Texto

Vamos ver como aplicar várias dessas propriedades em um único exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Texto Estilizado</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
 
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
 
        h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            font-weight: 700;
            text-align: center;
            text-transform: capitalize;
            letter-spacing: 1px;
            color: #2c3e50;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
        }
 
        p {
            font-size: 1.1rem;
            line-height: 1.7;
            text-align: justify;
            margin-bottom: 15px;
            word-spacing: 1px;
            color: #555;
        }
 
        .destaque {
            font-weight: bold;
            font-style: italic;
            color: #e74c3c;
            text-decoration: underline wavy #e74c3c;
        }
 
        .subtitulo {
            font-size: 1.8rem;
            font-weight: 400;
            text-align: left;
            margin-top: 30px;
            margin-bottom: 15px;
            color: #34495e;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>A Arte de Estilizar Textos</h1>
        <p>
            Em design web, a <span class="destaque">tipografia</span> não é apenas sobre escolher uma fonte bonita. É sobre garantir legibilidade, hierarquia visual e expressar a personalidade da marca. Com o CSS, temos controle total sobre cada aspecto do texto.
        </p>
        <h2 class="subtitulo">A Importância da Leitura</h2>
        <p>
            Um bom <span class="destaque">line-height</span> e <span class="destaque">font-size</span> são essenciais para que o usuário possa ler o conteúdo confortavelmente. Textos muito pequenos ou com linhas muito próximas podem causar fadiga visual.
        </p>
        <p>
            Além disso, o <span class="destaque">text-align</span> pode mudar drasticamente a percepção de um bloco de texto. O alinhamento justificado, por exemplo, é comum em livros, mas deve ser usado com cautela na web para evitar "rios" de espaço em branco.
        </p>
    </div>
</body>
</html>

Nota: Para usar fontes do Google Fonts (Roboto, Playfair Display), você precisa importá-las no <head> do seu HTML, como mostrado no exemplo.

2. Estilizando Cores com CSS

As cores são um dos elementos mais impactantes no design de uma página. Elas podem evocar emoções, destacar informações e guiar o olhar do usuário. O CSS nos permite definir cores para o texto, o fundo e as bordas dos elementos.

2.1. `color` (Cor do Texto)

Define a cor do texto de um elemento.

Exemplo:

p {
    color: blue; /* Cor azul para o texto */
}
h1 {
    color: #FF4500; /* Laranja avermelhado */
}

Documentação Oficial (MDN): color

2.2. `background-color` (Cor de Fundo)

Define a cor de fundo de um elemento.

Exemplo:

body {
    background-color: lightgray; /* Fundo cinza claro para a página */
}
.card {
    background-color: #f0f8ff; /* Fundo azul claro para um card */
}

Documentação Oficial (MDN): background-color

2.3. `border-color` (Cor da Borda)

Define a cor das bordas de um elemento. Geralmente usado em conjunto com border-width e border-style.

Exemplo:

div {
    border: 2px solid; /* Borda de 2px sólida */
    border-color: green; /* Cor da borda verde */
}
.alerta {
    border: 1px dashed #e74c3c; /* Borda tracejada vermelha */
}

Documentação Oficial (MDN): border-color

2.4. Formatos de Cores no CSS

O CSS suporta diversos formatos para especificar cores:

a) Nomes de Cores

Cores predefinidas como red, blue, green, white, black, lightgray, gold, etc. São fáceis de usar, mas limitadas.

Exemplo:

.box-red { color: red; }
.box-blue { background-color: blue; }

Documentação Oficial (MDN): CSS color keywords

b) HEX (Hexadecimal)

Representa cores usando valores hexadecimais para vermelho, verde e azul (#RRGGBB). Cada par de dígitos varia de 00 a FF. Também pode ser abreviado para #RGB se cada par for repetido (ex: #FF00CC pode ser #F0C).

Exemplo:

.header { background-color: #3498db; } /* Azul */
.text-dark { color: #333333; } /* Cinza escuro */
.text-light { color: #FFF; } /* Branco */

Documentação Oficial (MDN): Hexadecimal colors

c) RGB (Red, Green, Blue)

Define cores usando a intensidade de vermelho, verde e azul, cada uma variando de 0 a 255.

Sintaxe: rgb(red, green, blue)

Exemplo:

.primary { color: rgb(255, 99, 71); } /* Tomato */
.secondary { background-color: rgb(100, 149, 237); } /* Cornflower Blue */

Documentação Oficial (MDN): RGB colors

d) RGBA (Red, Green, Blue, Alpha)

Similar ao RGB, mas inclui um canal alfa (A) para transparência. O valor alfa varia de 0 (totalmente transparente) a 1 (totalmente opaco).

Sintaxe: rgba(red, green, blue, alpha)

Exemplo:

.overlay { background-color: rgba(0, 0, 0, 0.5); } /* Preto com 50% de transparência */
.text-translucent { color: rgba(255, 255, 255, 0.8); } /* Branco com 80% de opacidade */

Documentação Oficial (MDN): RGBA colors

e) HSL (Hue, Saturation, Lightness)

Define cores usando matiz (Hue), saturação (Saturation) e luminosidade (Lightness).

Hue (Matiz): Um grau no círculo de cores (0-360). 0=vermelho, 120=verde, 240=azul.
Saturation (Saturação): A intensidade da cor (0-100%). 0% é cinza, 100% é a cor pura.
Lightness (Luminosidade): O brilho da cor (0-100%). 0% é preto, 100% é branco, 50% é a cor "normal".

Sintaxe: hsl(hue, saturation%, lightness%)

Exemplo:

.happy { background-color: hsl(60, 100%, 50%); } /* Amarelo puro */
.calm { color: hsl(200, 50%, 40%); } /* Azul acinzentado */

Documentação Oficial (MDN): HSL colors

f) HSLA (Hue, Saturation, Lightness, Alpha)

Similar ao HSL, mas inclui um canal alfa para transparência.

Sintaxe: hsla(hue, saturation%, lightness%, alpha)

Exemplo:

.semi-transparent-green { background-color: hsla(120, 70%, 50%, 0.7); } /* Verde com 70% de opacidade */

Documentação Oficial (MDN): HSLA colors

Exemplo Combinado de Estilos de Cores

Vamos aplicar diferentes formatos de cores em um exemplo prático:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cores no CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f8f8f8; /* HEX */
            color: #333;
        }
 
        .caixa {
            width: 200px;
            height: 100px;
            margin: 15px;
            padding: 10px;
            display: inline-block;
            text-align: center;
            line-height: 100px; /* Centraliza o texto verticalmente */
            font-weight: bold;
            border-radius: 5px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }
 
        .caixa-nome {
            background-color: lightcoral; /* Nome de cor */
            color: white;
            border: 2px solid darkred; /* Nome de cor */
        }
 
        .caixa-hex {
            background-color: #2ecc71; /* HEX */
            color: #ecf0f1; /* HEX */
            border: 2px solid #27ae60; /* HEX */
        }
 
        .caixa-rgb {
            background-color: rgb(52, 152, 219); /* RGB */
            color: rgb(240, 248, 255); /* RGB */
            border: 2px solid rgb(41, 128, 185); /* RGB */
        }
 
        .caixa-rgba {
            background-color: rgba(155, 89, 182, 0.7); /* RGBA com transparência */
            color: white;
            border: 2px solid rgba(142, 68, 173, 0.9); /* RGBA */
        }
 
        .caixa-hsl {
            background-color: hsl(30, 100%, 50%); /* HSL */
            color: black;
            border: 2px solid hsl(30, 100%, 40%); /* HSL */
        }
 
        .caixa-hsla {
            background-color: hsla(200, 70%, 60%, 0.6); /* HSLA com transparência */
            color: #333;
            border: 2px solid hsla(200, 70%, 50%, 0.8); /* HSLA */
        }
    </style>
</head>
<body>
    <div class="caixa caixa-nome">Nome</div>
    <div class="caixa caixa-hex">HEX</div>
    <div class="caixa caixa-rgb">RGB</div>
    <div class="caixa caixa-rgba">RGBA</div>
    <div class="caixa caixa-hsl">HSL</div>
    <div class="caixa caixa-hsla">HSLA</div>
</body>
</html>

3. Exercícios Práticos: Crie sua Página Estilizada! 💻

Agora é a sua vez de colocar a mão na massa! Crie um arquivo index.html e um arquivo style.css (linkado no HTML) e complete as tarefas abaixo.

Estrutura básica para começar:

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Página Estilizada</title>
    <link rel="stylesheet" href="style.css">
    <!-- Opcional: Importe fontes do Google Fonts aqui, se desejar -->
    <!-- <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> -->
</head>
<body>
    <header>
        <h1>Bem-vindo à Minha Página!</h1>
        <p>Um lugar para explorar estilos.</p>
    </header>
 
    <main>
        <section class="secao-texto">
            <h2>Sobre Estilização</h2>
            <p>
                A estilização é o que torna uma página web visualmente atraente e funcional. Com CSS, podemos controlar cada detalhe, desde a fonte do texto até o esquema de cores. É uma ferramenta poderosa para criar experiências de usuário memoráveis.
            </p>
            <p class="destaque">
                Este é um parágrafo de destaque. Preste atenção à sua aparência!
            </p>
            <ul>
                <li>Item um</li>
                <li>Item dois</li>
                <li>Item três</li>
            </ul>
        </section>
 
        <section class="secao-cores">
            <h2>Explorando Cores</h2>
            <div class="caixa cor-primaria">Cor Primária</div>
            <div class="caixa cor-secundaria">Cor Secundária</div>
            <div class="caixa cor-terciaria">Cor Terciária</div>
            <div class="caixa cor-transparente">Cor Transparente</div>
        </section>
 
        <section class="secao-links">
            <h2>Links Úteis</h2>
            <p>Visite a <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS" target="_blank">Documentação MDN sobre CSS</a> para mais informações.</p>
            <p>Ou o <a href="https://www.w3.org/Style/CSS/" target="_blank">Site Oficial do W3C CSS</a>.</p>
        </section>
    </main>
 
    <footer>
        <p>&copy; 2023 Minha Página. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

/* style.css */
/* Reset básico para começar */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* Estilos gerais */
body {
    font-family: Arial, sans-serif; /* Altere esta fonte */
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
}
 
header {
    background-color: #34495e;
    color: white;
    padding: 20px 0;
    text-align: center;
}
 
main {
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
 
section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
 
section:last-child {
    border-bottom: none;
}
 
h1, h2 {
    color: #2c3e50;
    margin-top: 0;
}
 
p {
    margin-bottom: 10px;
}
 
ul {
    list-style-type: disc;
    margin-left: 20px;
}
 
.caixa {
    width: 120px;
    height: 60px;
    margin: 10px;
    padding: 5px;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    color: white; /* Cor do texto padrão para as caixas */
}
 
footer {
    text-align: center;
    padding: 20px;
    background-color: #34495e;
    color: white;
    margin-top: 30px;
}
 
/* Estilos para links */
a {
    color: #3498db;
    text-decoration: none;
}
 
a:hover {
    text-decoration: underline;
}

Tarefas de Estilização 🎯

Crie e modifique as regras CSS no seu arquivo style.css para alcançar os seguintes objetivos:

Estilização de Textos:

body:
- Altere a font-family para uma fonte sem serifa de sua escolha (ex: 'Open Sans', 'Roboto', 'Lato', sans-serif). Lembre-se de importar do Google Fonts se for uma fonte externa!
- Defina um line-height de 1.7 para melhorar a legibilidade.
header h1:
- Aumente o font-size para 3.2rem.
- Defina text-align: center;.
- Adicione um text-shadow de 2px 2px 4px rgba(0, 0, 0, 0.3);.
- Altere o font-family para uma fonte com serifa ou display (ex: 'Playfair Display', 'Merriweather', serif).
header p:
- Altere o font-style para italic;.
- Aumente o font-size para 1.2em;.
- Defina letter-spacing: 1px;.
main h2:
- Defina text-transform: uppercase;.
- Aumente o letter-spacing para 0.5px;.
- Adicione uma border-bottom: 2px solid #ccc; e um padding-bottom: 5px;.
.secao-texto p (parágrafos dentro da primeira seção):
- Defina text-align: justify;.
- Ajuste o word-spacing para 2px;.
.destaque:
- Defina font-weight: bold;.
- Altere a color para um tom de vermelho ou laranja.
- Adicione text-decoration: underline wavy;.
footer p:
- Defina font-size: 0.9em;.
- Altere text-transform: capitalize;.

Estilização de Cores:

Após completar todas as tarefas, abra o index.html no seu navegador para ver suas criações! 🥳

Resumo e Próximos Passos 🌟

Nesta aula, você explorou as propriedades CSS mais importantes para estilizar textos e aplicar cores. Você aprendeu a:

Controlar a font-family, font-size, font-weight, font-style e line-height para criar tipografias legíveis e atraentes.
Alinhar (text-align), decorar (text-decoration), transformar (text-transform) e adicionar sombras (text-shadow) ao texto.
Definir color para texto, background-color para fundos e border-color para bordas.
Utilizar diferentes formatos de cores: nomes, HEX, RGB, RGBA, HSL e HSLA.

Dominar esses conceitos é fundamental para qualquer projeto web, pois eles formam a base da identidade visual de um site.

O que vem a seguir? No próximo módulo, continuaremos a explorar o CSS, aprendendo sobre:

Modelo de Caixa (Box Model): Entender como margin, border, padding e content afetam o layout dos elementos.
Seletores CSS Avançados: Como selecionar elementos de forma mais específica e eficiente.
Unidades de Medida Relativas: Aprofundar no uso de em, rem, vw, vh para layouts responsivos.

Continue praticando e experimentando com os estilos! A criatividade é o limite. Se tiver dúvidas, revise a documentação oficial ou consulte os materiais do curso. Até a próxima! 👋

Fundamentos da Web com HTML e CSS

Estilizando Textos e Cores

🎨 Estilizando Textos e Cores com CSS

1. Estilizando Textos com CSS

1.1. font-family (Família da Fonte)

1.2. font-size (Tamanho da Fonte)

1.3. font-weight (Peso da Fonte)

1.4. font-style (Estilo da Fonte)

1.5. text-align (Alinhamento do Texto)

1.6. text-decoration (Decoração do Texto)

1.7. line-height (Altura da Linha)

1.8. letter-spacing e word-spacing (Espaçamento)

1.9. text-transform (Transformação de Texto)

1.10. text-shadow (Sombra do Texto)

Exemplo Combinado de Estilos de Texto

2. Estilizando Cores com CSS

2.1. color (Cor do Texto)

2.2. background-color (Cor de Fundo)

2.3. border-color (Cor da Borda)

2.4. Formatos de Cores no CSS

a) Nomes de Cores

b) HEX (Hexadecimal)

c) RGB (Red, Green, Blue)

d) RGBA (Red, Green, Blue, Alpha)

e) HSL (Hue, Saturation, Lightness)

f) HSLA (Hue, Saturation, Lightness, Alpha)

Exemplo Combinado de Estilos de Cores

3. Exercícios Práticos: Crie sua Página Estilizada! 💻

Tarefas de Estilização 🎯

Estilização de Textos:

Estilização de Cores:

Resumo e Próximos Passos 🌟

1.1. `font-family` (Família da Fonte)

1.2. `font-size` (Tamanho da Fonte)

1.3. `font-weight` (Peso da Fonte)

1.4. `font-style` (Estilo da Fonte)

1.5. `text-align` (Alinhamento do Texto)

1.6. `text-decoration` (Decoração do Texto)

1.7. `line-height` (Altura da Linha)

1.8. `letter-spacing` e `word-spacing` (Espaçamento)

1.9. `text-transform` (Transformação de Texto)

1.10. `text-shadow` (Sombra do Texto)

2.1. `color` (Cor do Texto)

2.2. `background-color` (Cor de Fundo)

2.3. `border-color` (Cor da Borda)