S02 – Atividade de Aprendizagem: Introdução ao CSS

Visão Geral

O CSS (Cascading Style Sheets) é uma linguagem de conjunto de regras que define o estilo e a apresentação de um documento HTML. As regras de CSS selecionam elementos do documento e contêm declarações de estilo e layout.

Preparação

Assista ao seguinte vídeo:

Vídeo: ▶️ O que é CSS?

Sintaxe em CSS

As regras CSS consistem em um seletor e um bloco de declaração { }. O seletor é o elemento (ou elementos) HTML que você deseja estilizar, enquanto o bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula (;). Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois-pontos (:). O bloco de declaração é colocado entre chaves.

Exemplo de Regra CSS

A seguinte regra CSS seleciona todos os elementos <h1> e define quatro propriedades:

a cor de fundo de todos os elementos <h1> para azul-escuro
a cor do texto do conteúdo de todos os elementos <h1> para branco
padding ou espaço ao redor do conteúdo do texto de 16 pixels
o texto é alinhado ao centro do bloco <h1>

h1 {
  background-color: darkblue;
  color: white;
  padding: 16px;
  text-align: center;
}

Termos-chave CSS

Seletor — h1
Bloco de Declaração — { }
Declaração — background-color: darkblue; (Este exemplo contém quatro declarações ao todo.)
Propriedade — background-color
Valor — darkblue
Regra CSS — todo o bloco de código

Veja como um <h1> com esse estilo é renderizado na página:

WDD 130: Fundamentos da Web

Instruções da Atividade

Nesta atividade, você adicionará algumas declarações de estilo à sua página inicial do curso. Atualmente, sua página inicial, index.html, tem o estilo padrão aplicado pelo navegador que renderiza a página. Por exemplo, o elemento <h1> é estilizado para ser maior e ter fonte em negrito. Nesta atividade, aplicaremos um estilo personalizado.

Escreva CSS

Abra o arquivo estilos.css localizado em estilos da sua pasta wdd130.
Adicione as seguintes regras CSS:
```
nav {
  background-color: darkblue;
  padding: 10px;
}
```
Esta regra de CSS nomeia o elemento <nav> como o elemento selecionado para aplicar duas declarações de estilo.
1. A cor de fundo será "azul-escuro", que é uma cor válida e nomeada.
2. O padding, ou preenchimento entre o conteúdo e a borda, é definido como 10 pixels para facilitar a leitura.
```
nav a {
  color: white;
  display: block;
  padding: 20px;
}
```
Esta regra de CSS seleciona todos os elementos <a> (âncora/link) no HTML que são filhos do elemento <nav> e aplica as seguintes declarações:
1. A cor do primeiro plano ou da fonte será branca.
2. A exibição padrão mudará de inline para bloco.
3. Cada tag âncora terá padding de 20px;
```
h1 {
  color: darkblue;
}
```
Esta regra de CSS faz referência ao elemento <h1> (título 1) como o elemento selecionado e aplica a seguinte declaração:
1. A cor da fonte em primeiro plano está definida como azul-escuro.
```
img {
  width: 150px;
  height: auto;
  border: 1px solid black;
  padding: 2px;
  box-shadow: 0 0 30px gray;
}
```
Esta regra de CSS faz referência a todos os elementos <img> (imagem) como o seletor e aplica as seguintes declarações:
1. uma largura definida com uma altura que será ajustada dinamicamente para se adequar à proporção da imagem.
2. Um atalho de borda que nomeia a largura, o tipo de borda e a cor dela.
3. Padding (ou preenchimento) entre a imagem e a borda.
4. Uma sombra de caixa ao redor da borda da imagem com zero de deslocamento e profundidade de 30px em cinza.
```
p {
  padding: 10px;
}
```
Esta regra de CSS seleciona todos os elementos <p> (parágrafo) como seletor e aplica a seguinte declaração:
1. O padding entre o conteúdo do parágrafo e a borda é definido como 10 pixels.
Não se esqueça de salvar as alterações em estilos.css.

Exemplo de captura de tela da página inicial com CSS — Exemplo de página inicial com uso de CSS

Vincule o arquivo CSS à página HTML

Abra o arquivo index.html e adicione a seguinte linha na seção <head> do documento HTML.
```
        <link rel="stylesheet" href="estilos/estilos.css">
        
```
Teste a aplicação do estilo na sua página inicial usando o Live/Five Server. Para fazer isso, clique com o botão direito do mouse no nome do arquivo no painel Explorador do VS Code e selecione Abrir com Live/Five Server.
Faça correções se necessário.

Vídeo: ▶️ Introdução ao CSS - Passo a Passo da Atividade

Renderização e Teste Remoto

Na área Controle do Código-Fonte do VS Code, publique/faça upload do site com essas adições e alterações confirmando com uma mensagem e sincronizando com seu site remoto do wdd130 no GitHub Pages.

Publicar seu trabalho de atividade é uma boa prática e seguir as etapas tornará o processo mais rotineiro para você. Lembre-se de que a mensagem que você escreve com a confirmação (commit) serve para que ela tenha algum contexto e não precisa ser muito detalhada.
Abra o URL renderizado do GitHub Pages para testar a página no navegador.

Recursos Opcionais

CSS - MDN
CSS básico - MDN