Exercício - Estilize seu HTML com CSS

10 minutos

As folhas de estilo em cascata (CSS) permitem-lhe especificar o aspeto da sua página. A ideia básica é definir qual deve ser o estilo para os elementos que você usa em suas páginas HTML. Enquanto os elementos HTML definem seu conteúdo, os estilos CSS definem a aparência desse conteúdo.

Por exemplo, você pode aplicar cantos arredondados ou dar um plano de fundo gradiente a um elemento, ou pode usar CSS para especificar a aparência dos hiperlinks e responder quando você interage com eles. Você também pode executar layouts de página sofisticados e efeitos de animação.

Você pode aplicar estilos a elementos específicos, todos os elementos de um tipo específico ou usar classes para estilizar muitos elementos diferentes.

Neste exercício, você aplica estilos CSS a elementos de página HTML e adiciona algum código CSS para definir seus temas claros e escuros. Em seguida, verifique os resultados nas ferramentas de desenvolvedor do seu navegador.

CSS externo

Na unidade anterior sobre HTML, você vinculou a um arquivo CSS externo de HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Um benefício do CSS externo é que várias páginas HTML podem ser vinculadas ao mesmo arquivo CSS. Se você fizer uma alteração no CSS, seu estilo será atualizado para cada página. Quando você usa um arquivo HTML para o conteúdo da página, um arquivo CSS para estilo e um arquivo JavaScript para interação, isso é chamado de separação de preocupações.

Como descrito anteriormente, você também pode escrever CSS diretamente em HTML, que é chamado de CSS interno. Mesmo para um site básico, há tantas regras CSS que a página HTML pode ficar desordenada rapidamente. Com mais de uma página, o mesmo CSS seria frequentemente repetido e difícil de gerenciar.

Regras CSS

As regras CSS são como você aplica estilos a elementos HTML. As regras CSS têm um seletor, que é usado para expressar o elemento (ou elementos) ao qual os estilos devem ser aplicados.

No Visual Studio Code, abra o main.css arquivo e digite o seguinte:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Este trecho de código contém duas regras. Cada regra tem:

Um seletor. body e ul são os seletores das duas regras, e são usados para selecionar a que elemento(s) os estilos se aplicam.
Uma cinta de abertura encaracolado ({).
Uma lista de declarações de estilo que determinam a aparência do(s) elemento(s) selecionado(s).
Uma cinta de fecho encaracolado (}).

Por exemplo, o ul seletor seleciona o <ul> elemento HTML na página para aplicar estilos a ela. A declaração é font-family: helvetica, e determina qual deve ser o estilo. O nome da propriedade é font-family, e o valor é helvetica.

Como você vê a seguir, você pode definir seus próprios nomes personalizados para elementos.

Seletores

Os seletores de ID e classe permitem aplicar estilos a nomes de atributos personalizados em seu HTML. Você usa uma ID para estilizar um elemento, enquanto usa classes para estilizar vários elementos.

Copie o código a seguir e adicione-o ao seu arquivo CSS. Cole após a chave de fechamento para o ul seletor que você adicionou anteriormente.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
O código anterior contém três regras CSS, com as duas últimas regras usando atributos personalizados para selecionar elementos: .list e #msg.
- .listé um seletor de classe. Cada elemento HTML que contém um class atributo definido para list obtém os estilos definidos neste seletor.
- #msgé um seletor de ID. O elemento HTML que tem seu id atributo definido para msg obter os estilos definidos dentro desse seletor.
Os nomes que você usa para seus seletores podem ser arbitrários, desde que correspondam ao que você definiu no HTML.
Salve seu trabalho selecionando Control+S no Windows ou Command+S no macOS.

Ver no browser

Para visualizar usando o Visual Studio Code, clique com o botão direito do index.html mouse no arquivo no Explorer e selecione Abrir no navegador padrão.

Importante

Mesmo que você estivesse apenas editando o main.css arquivo, para visualizar as alterações, você deve selecionar o index.html arquivo.

A página da Web é aberta no navegador padrão.

Os estilos de fonte são o que você esperava ver? É interessante como os estilos aplicados ao <body> são herdados no <h1> elemento. Nós não definimos nada para <h1>, mas ele ainda tem a fonte que foi definida em <body>. Este mecanismo de herança de elementos pais para seus descendentes é um dos principais aspetos do CSS. No entanto, os <li> elementos têm uma fonte diferente. O estilo dos <li> elementos substitui o conjunto de estilos porque <body> o <li> elemento é um descendente do elemento para o <ul> qual você definiu um estilo.

Quando você usa Abrir no navegador padrão no Visual Studio Code, ele abre uma nova guia no navegador toda vez. Para evitar abrir uma nova guia, você pode recarregar a guia que já contém seu site.

Para recarregar a guia, pressione F5, que é o atalho de teclado de atualização, ou pressione Ctrl+R no Windows ou Linux e Command+R em um Mac.

Adicionar um tema leve

Em seguida, adicione suporte para um tema de cores para o seu site. Comece definindo um tema de cor clara usando códigos de cores hexadecimais.

No arquivo CSS (main.css), adicione o seguinte código no final do arquivo.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
Neste exemplo, #000000 especifica preto para a cor da fonte e #00FF00 especifica verde para a cor do plano de fundo.
No arquivo HTML (index.html), atualize o <body> elemento com o nome light-themeda classe . Agora, o seletor de classe para tema leve aplica os estilos corretamente.
```
<body class="light-theme">
```

Ver no browser

Para visualizar usando o Visual Studio Code, clique com o botão direito do mouse e index.htmlselecione Abrir no navegador padrão ou recarregue a guia anterior pressionando F5.

Observe que o tema de luz usando um fundo verde aparece.

Ver CSS aplicado

Na visualização do navegador, abra Ferramentas de Desenvolvedor.

Clique com o botão direito do mouse na página e selecione Inspecionar ou selecione o atalho F12 ou Ctrl+Shift+I.
Selecione a guia Elementos e selecione a guia Estilos dentro da guia Elementos (ela já deve estar selecionada por padrão).
Passe o cursor sobre os vários elementos HTML e, ao selecionar alguns elementos, observe como as ferramentas de desenvolvedor exibem quais estilos são aplicados a eles na guia Estilos .
Selecione o <body> elemento . Observe o light-theme aplicado.
Selecione o elemento de lista <ul> não ordenada. Observe o estilo font-family: helvetica;personalizado , que substitui o estilo do <body> elemento.

Para saber mais sobre como visualizar estilos CSS nas Ferramentas de Desenvolvedor, confira o artigo Introdução à visualização e alteração de CSS .

Adicionar um tema escuro

Para o tema escuro, você configurará a infraestrutura em preparação para a próxima unidade, na qual você ativará a troca de tema na página da Web.

Para adicionar suporte para um tema escuro ao seu CSS, use as etapas a seguir.

No arquivo CSS (main.css), adicione algumas constantes à raiz da página no início do arquivo.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
O :root seletor representa o <html> elemento na página HTML. Para esse tipo de tarefa, uma prática recomendada é definir um conjunto de variáveis CSS globais em uma regra CSS com o :root seletor. Neste exemplo, você definiu três variáveis de cor. Agora, você pode usar essas variáveis em outras regras CSS.
No final do arquivo CSS, substitua a light-theme regra pelo código a seguir para atualizá-la e adicionar o dark-theme seletor.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
No código anterior, você definiu duas novas variáveis bg e fontColor, que especificam um plano de fundo e uma cor da fonte. Essas variáveis usam a var palavra-chave para definir seus valores de propriedade para as variáveis especificadas anteriormente no seletor :root .
Em seguida, no arquivo CSS, substitua o seletor atual body pelo código a seguir.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
Neste exemplo, você usa o body seletor para definir as background propriedades e color e, como os elementos visíveis na página da Web estão todos dentro do <body> elemento , eles herdam as cores definidas em <body>.
No arquivo CSS, remova as regras com os #msg seletores e ul para que eles também herdem a mesma fonte do <body>.

Lembre-se de salvar seu arquivo selecionando Control+S ou Command+S.

Seu arquivo CSS (main.css) agora deve se parecer com este exemplo:

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

Para exibir o tema escuro, abra o arquivo index.html e edite manualmente o tema padrão no <body> atributo class para tema escuro (dark-theme). Salve o arquivo e recarregue a página no navegador.
Edite o <body> atributo class para alternar o padrão de volta para o tema light.

Na próxima unidade, você usa JavaScript para fornecer interatividade e suportar a troca de temas.

Use o GitHub Copilot para adicionar um tema

Você pode usar o Copilot do GitHub em seu IDE para gerar CSS para adicionar um novo tema. Você pode personalizar o prompt para especificar propriedades para definir os estilos para elementos HTML de acordo com seus requisitos.

O texto a seguir mostra um exemplo de prompt para o Copilot Chat:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

O GitHub Copilot é alimentado por IA, então surpresas e erros são possíveis. Para obter mais informações, consulte Copilot FAQs.

Saiba mais sobre o GitHub Copilot no Visual Studio Code.

Feedback

Esta página foi útil?