Bem-vindo ao terceiro módulo da nossa série sobre desenvolvimento web. Neste módulo, vamos nos concentrar no CSS (Cascading Style Sheets), uma ferramenta fundamental para dar estilo e aparência aos seus documentos HTML. Vamos explorar como você pode usar o CSS para definir cores, alterar fontes e aplicar outros estilos visuais para tornar suas páginas mais atraentes e funcionais.

O que é CSS e por que ele é importante?

O CSS é a linguagem usada para descrever a apresentação visual de uma página HTML. Ele permite que você separe o conteúdo (HTML) da apresentação (CSS), melhorando a estrutura do código e facilitando futuras manutenções. Um documento HTML por si só define a estrutura e o conteúdo da página, enquanto o CSS cuida de aspectos como cores, tamanhos de fonte, alinhamentos, margens, entre outros.

Vantagens do uso de CSS

  • Separação de conteúdo e estilo: Com o CSS, você pode manter o conteúdo HTML separado do design, tornando mais fácil alterar o visual sem tocar no HTML.
  • Consistência: Você pode aplicar o mesmo estilo a várias páginas, garantindo uma aparência uniforme em todo o site.
  • Facilidade de manutenção: Alterar o estilo de uma página pode ser feito rapidamente ao modificar um único arquivo CSS, sem precisar alterar cada página individualmente.

Três maneiras de incluir CSS em um documento HTML

Existem três maneiras principais de aplicar CSS em documentos HTML. Cada uma tem suas vantagens e desvantagens, dependendo do contexto:

1. CSS Inline

O CSS inline é usado diretamente no elemento HTML com o atributo style. Isso pode ser útil para alterações rápidas e específicas, mas não é recomendado para grandes projetos, pois dificulta a manutenção.

<p style="color: blue;">Este é um parágrafo azul</p>

2. CSS Interno

O CSS interno é definido dentro da tag <style>, que vai dentro do cabeçalho <head> da página. Ele é útil quando você deseja estilizar uma única página, mas, como o CSS fica misturado ao HTML, isso também pode prejudicar a organização do código.

<head>
    <style>
        p {
            color: green;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p>Este é um parágrafo verde</p>
</body>

3. CSS Externo

O CSS externo é a maneira mais comum e recomendada de incluir estilos. Você cria um arquivo separado com a extensão .css e o vincula ao seu documento HTML usando a tag <link>. Isso facilita a reutilização de estilos em várias páginas.

<head>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <p>Este é um parágrafo estilizado com um arquivo CSS externo</p>
</body>

Definindo cores e fontes com CSS

O CSS oferece uma vasta gama de opções para estilizar elementos com cores e fontes. Você pode definir cores usando nomes pré-definidos (como "blue" ou "red"), códigos hexadecimais (como #ff0000), ou valores RGB.

Alterando a cor do texto

p {
    color: #ff0000; /* cor vermelha */
}

Definindo fontes personalizadas

Além de cores, você pode personalizar as fontes. É possível especificar uma lista de fontes para garantir que, caso a primeira opção não esteja disponível no dispositivo do usuário, uma fonte alternativa será usada.

p {
    font-family: 'Arial', sans-serif;
    font-size: 18px;
}

Posicionamento e layout com CSS

O CSS também oferece ferramentas poderosas para definir o layout de uma página. Vamos explorar brevemente algumas propriedades importantes:

Box Model (Modelo de Caixa)

Cada elemento HTML pode ser considerado uma caixa, e o modelo de caixa define como essa caixa é estruturada em termos de conteúdo, padding, borda e margem.

Exemplo

Exemplo de uso do Box Model

div {
    width: 200px;
    padding: 10px;
    border: 1px solid black;
    margin: 20px;
}

Flexbox

O Flexbox é uma das ferramentas mais poderosas do CSS para criar layouts flexíveis e responsivos. Ele permite alinhar e distribuir elementos dentro de um contêiner de forma eficiente.

.container {
    display: flex;
    justify-content: space-around;
}

Conclusão

O CSS é essencial para transformar documentos HTML em páginas visualmente atraentes e funcionais. Neste módulo, você aprendeu o básico sobre como incluir CSS em suas páginas, como definir cores, fontes e como o modelo de caixa funciona. Nos próximos módulos, exploraremos mais sobre layouts avançados com Flexbox e Grid, além de outros recursos avançados do CSS.