Estilização CSS: Vincule uma Folha de Estilos Externa ao HTML

Introdução

Bem-vindo ao seu primeiro laboratório de CSS! CSS, que significa Cascading Style Sheets (Folhas de Estilo em Cascata), é a linguagem que usamos para estilizar um documento HTML. Ela descreve como os elementos HTML devem ser exibidos na tela, no papel ou em outras mídias.

Existem três maneiras de incluir CSS em um documento HTML: inline (em linha), internal (interno) e external (externo). O método mais comum e recomendado é usar uma folha de estilo externa. Essa abordagem separa seu conteúdo (HTML) da sua apresentação (CSS), tornando seu código mais limpo, fácil de manter e reutilizável em várias páginas.

Neste laboratório, você aprenderá o processo fundamental de estilizar uma página da web usando uma folha de estilo externa. Você irá:

Criar um novo arquivo CSS.
Vincular esse arquivo CSS a um documento HTML existente.
Escrever uma regra CSS básica para alterar a fonte de toda a página.
Visualizar suas alterações em um navegador web em tempo real.

Vamos começar!

Crie um arquivo CSS externo chamado styles.css

Nesta etapa, você criará um arquivo dedicado para conter todas as suas regras CSS. Isso é conhecido como uma folha de estilo externa. O script de configuração já criou um arquivo index.html para você. Agora, você precisa criar o arquivo CSS que o estilizará.

Usando o explorador de arquivos no painel esquerdo do WebIDE:

Clique com o botão direito do mouse no espaço vazio dentro da área da pasta project.
Selecione "New File" (Novo Arquivo) no menu de contexto.
Uma nova caixa de entrada aparecerá. Digite styles.css e pressione Enter.

Agora você deve ver um novo arquivo vazio chamado styles.css em seu explorador de arquivos. É aqui que você escreverá seu código CSS nas próximas etapas.

Vincule o arquivo CSS a um documento HTML usando a tag link

Nesta etapa, você conectará seu arquivo styles.css ao seu arquivo index.html. Simplesmente criar o arquivo CSS não é suficiente; você deve dizer explicitamente ao documento HTML para usá-lo. Isso é feito usando a tag <link>.

A tag <link> é colocada dentro da seção <head> do seu documento HTML. Ela requer dois atributos importantes:

rel="stylesheet": Isso informa ao navegador que o arquivo vinculado é uma folha de estilo.
href="styles.css": Isso especifica o caminho para o arquivo CSS.

Agora, vamos adicioná-lo ao seu HTML.

Abra o arquivo index.html no explorador de arquivos.
Dentro da seção <head>, adicione a seguinte linha:

<link rel="stylesheet" href="styles.css" />

Após adicionar a linha, seu arquivo index.html deverá ficar assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph. We will style this page with CSS.</p>
  </body>
</html>

Certifique-se de salvar o arquivo (Ctrl+S ou File > Save).

Adicione um seletor básico para o elemento body

Nesta etapa, você escreverá sua primeira regra CSS. Uma regra CSS consiste em um seletor e um bloco de declaração. O seletor aponta para o elemento HTML que você deseja estilizar. O bloco de declaração (dentro de chaves {}) contém uma ou mais declarações, que são os estilos reais a serem aplicados.

Começaremos visando o elemento <body>. Estilizar o <body> é uma prática comum para definir estilos padrão, como cor de fundo e fonte, para a página inteira.

Abra seu arquivo styles.css. Ele ainda deve estar vazio.
Digite o seguinte código para criar uma regra para o elemento body:

body {
}

Este código seleciona o elemento <body> e prepara um bloco de declaração vazio (as chaves) onde adicionaremos propriedades de estilo na próxima etapa.

Defina a propriedade font-family no seletor body

Nesta etapa, você adicionará uma declaração de estilo à sua regra body. Uma declaração é um par propriedade-valor (por exemplo, property: value;) que define um estilo específico.

Usaremos a propriedade font-family para alterar a fonte do texto na página. Ao aplicá-la ao body, todos os elementos de texto dentro do body (como <h1> e <p>) herdarão essa fonte. É uma boa prática fornecer uma "pilha de fontes" (font stack) — uma lista de fontes separadas por vírgulas. O navegador tentará a primeira fonte e, se não estiver disponível, tentará a próxima, e assim por diante.

Certifique-se de que seu arquivo styles.css esteja aberto.
Dentro das chaves do seletor body, adicione a propriedade font-family.

font-family: Arial, sans-serif;

Seu arquivo styles.css completo deverá agora parecer com isto:

body {
  font-family: Arial, sans-serif;
}

Esta regra informa ao navegador para renderizar todo o texto dentro do <body> usando a fonte Arial. Se a Arial não estiver instalada no sistema do usuário, ele recorrerá à fonte sans-serif padrão do sistema.

Salve os arquivos e atualize o navegador para ver as alterações

Nesta etapa final, você verá o resultado do seu trabalho. Após escrever o código, você precisa salvar seus arquivos e, em seguida, visualizar as alterações no navegador.

Certifique-se de que tanto index.html quanto styles.css estejam salvos. Você pode usar o atalho de teclado Ctrl+S ou ir em File > Save no menu.
Navegue até a aba Web 8080 localizada no topo da interface do LabEx. Esta aba exibe a saída do servidor web em execução em seu ambiente.
Pode ser necessário atualizar a aba do navegador para ver as alterações mais recentes.

Observe o texto na página. Ele agora deve ser exibido na fonte Arial (ou uma fonte sans-serif semelhante), que é diferente da fonte serif padrão (como Times New Roman) que os navegadores geralmente usam. A mudança pode ser sutil, mas confirma que sua folha de estilo externa está corretamente vinculada e aplicada.

Sinta-se à vontade para experimentar! Tente mudar Arial para Verdana ou Georgia em seu arquivo styles.css, salve-o e atualize a aba Web 8080 para ver a mudança de fonte instantaneamente.

Resumo

Parabéns! Você completou com sucesso este laboratório e deu seu primeiro passo no mundo do CSS.

Neste laboratório, você aprendeu o método fundamental e mais importante para estilizar páginas web:

Como criar um arquivo CSS externo (styles.css).
Como vincular o arquivo CSS a um documento HTML usando a tag <link> na seção <head>.
Como escrever uma regra CSS básica usando um seletor de elemento (body).
Como aplicar um estilo usando uma propriedade e valor (font-family: Arial, sans-serif;).

Esta base de separação de estrutura (HTML) de apresentação (CSS) é um princípio central do desenvolvimento web moderno. Agora você está pronto para explorar seletores CSS mais avançados, propriedades e conceitos como o box model, layout e design responsivo.

Introdução e Vinculação de CSS