Exercício – Aplicar estilos ao HTML com CSS

  • 10 minutos

CSS (folhas de estilos em cascata) permitem que você especifique qual deve ser a aparência de 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 de CSS definem a aparência desse conteúdo.

Por exemplo, você pode aplicar cantos arredondados ou adicionar um fundo em gradiente a um elemento, ou usar as CSS para especificar a aparência dos hiperlinks e como eles reagem 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, a todos os elementos de um tipo específico ou usar classes para especificar os estilos de vários elementos diferentes.

Neste exercício, você aplicará estilos CSS a elementos da página HTML e adicionará algum código CSS para definir seus temas claros e escuros. Depois, você verificará os resultados nas ferramentas de desenvolvedor do navegador.

CSS externo

Na unidade anterior sobre HTML, você vinculou um arquivo CSS externo por meio 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 em 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 é chamado de separação de interesses.

Como descrito anteriormente, você também pode escrever o CSS diretamente em HTML, o que é chamado de CSS interno. Mesmo para um site básico, há tantas regras de CSS que a página HTML poderá se tornar desorganizada com rapidez. Com mais de uma página, o mesmo CSS seria repetido com frequência e se tornaria difícil de gerenciar.

Regras de CSS

As regras CSS são como você aplica estilos a elementos HTML. As regras de 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 arquivo main.css e insira o seguinte:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Esse snippet 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 quais elementos os estilos serão aplicado.
  • Um símbolo de abre-chaves ({).
  • Uma lista de declarações de estilo que determinam como os elementos selecionados devem ser.
  • Um símbolo de fecha-chaves (}).

Por exemplo, o seletor ul seleciona o elemento HTML <ul> na página para aplicar os estilos a ele. 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ê verá a seguir, é possível definir seus próprios nomes personalizados para elementos.

Seletores

ID e seletores de classe permitem que você aplique estilos a nomes de atributos personalizados no seu HTML. Você usa uma ID para estilizar um único elemento, enquanto usa classes para estilizar vários elementos.

  1. Copie o código a seguir e adicione-o ao arquivo CSS. Cole-o após a chave de fechamento do seletor ul que você adicionou antes.

    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 atributo class definido como list herdará os estilos que são definidos nesse seletor.

    • #msg é um seletor de ID. O elemento HTML cujo atributo id é definido como msg herdará os estilos que são definidos nesse seletor.

    Os nomes usados para seus seletores podem ser arbitrários, desde que eles correspondam ao que você definiu no HTML.

  2. Salve o arquivo selecionando Control+S no Windows ou Command+S no macOS.

Exibir no navegador

  1. Para visualizar no Visual Studio Code, clique com o botão direito no arquivo index.html no Explorer e selecione Abrir no Navegador Padrão.

    Importante

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

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

    Captura de tela do site com os estilos de fonte aplicados.

Os estilos de fonte são aquilo que você esperava ver? É interessante como os estilos aplicados ao elemento <body> são herdados no elemento <h1>. Não definimos nada para <h1>, mas ele ainda tem a fonte que foi definida em <body>. Esse mecanismo de herança de elementos pai para seus descendentes é um dos principais aspectos do CSS. No entanto, os elementos <li> têm uma fonte diferente. O estilo dos elementos <li> substitui o estilo definido para <body> porque o elemento <li> é descendente do elemento <ul> para o 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 em Windows ou Linux e Command+R no Mac.

Adicionar um tema claro

Em seguida, adicione suporte para temas de cores em seu site. Comece definindo um tema com cores claras usando códigos de cor hexadecimais.

  1. No arquio CSS (main.css), adicione o código a seguir no final do arquivo.

    .light-theme {
  color: #000000;
  background: #00FF00;
}

    Neste exemplo, #000000 especifica preto como a cor da fonte e #00FF00 especifica verde para a cor da tela de fundo.

  2. No arquivo HTML (index.html), atualize o elemento <body> com o nome da classe light-theme. Agora, o seletor de classe para o tema claro aplica os estilos corretamente.

    <body class="light-theme">

Exibir no navegador

  • Para visualizar no Visual Studio Code, clique com o botão direito do mouse em index.html e selecione Abrir no Navegador Padrão ou recarregar a guia anterior pressionando F5.

    Observe que o tema claro que usa uma tela de fundo verde é exibido.

    Captura de tela do site com o tema claro aplicado.

Exibir CSS aplicado

  1. Na exibição do navegador, abra Ferramentas para Desenvolvedores.

    Clique com o botão direito do mouse na página e selecione Inspecionar ou selecione o atalho F12 ou Ctrl+Shift+I.

  2. Selecione a aba Elementos e, depois, a aba Estilos dentro da aba Elementos (ela já deve estar selecionada por padrão).

  3. Passe o mouse sobre os vários elementos HTML e, ao selecionar alguns elementos, observe como as ferramentas de desenvolvedor indicam quais estilos estão aplicados neles na guia Estilos.

  4. Selecione o elemento <body>. Observe o light-theme aplicado.

  5. Selecione o elemento <ul> na lista não ordenada. Observe o font-family: helvetica; de estilo personalizado, que substitui o estilo do elemento <body>.

Captura de tela do site com o tema claro aplicado e as Ferramentas para Desenvolvedores ao lado dele mostrando o painel elementos com o código HTML e CSS.

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

Adicionar um tema escuro

Para o tema escuro, defina a infraestrutura como preparação para a próxima unidade, na qual você habilitará a alternância de temas na página da Web.

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

  1. 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 seletor de :root representa o elemento <html> na página HTML. Para esse tipo de tarefa, uma melhor prática é definir um conjunto de variáveis CSS globais em uma regra CSS com o seletor :root. Neste exemplo, você definiu três variáveis coloridas. Agora você pode usar essas variáveis em outras regras CSS.

  2. No final do arquivo CSS, substitua a regra light-theme pelo código a seguir para atualizá-lo e adicionar o seletor dark-theme.

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

    No código anterior, você definiu duas variáveis novas, bg e fontColor, para especificar a cor da tela de fundo e a cor da fonte. Essas variáveis usam a palavra-chave var para definir seus valores de propriedade para as variáveis especificadas anteriormente no seletor :root.

  3. Em seguida, no arquivo CSS, substitua o seletor body atual pelo código a seguir.

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

    Neste exemplo, você usa o seletor body para definir as propriedades background e color, como os elementos visíveis na página da Web estão todos dentro do elemento <body>, eles herdam as cores definidas em <body>.

  4. No arquivo CSS, remova as regras com os seletores #msg e ul para que elas também herdem a mesma fonte de <body>.

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

    O arquivo CSS (main.css) deve ser parecido 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);
}

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

    Captura de tela do site com seu tema escuro aplicado e as Ferramentas para Desenvolvedores ao lado dele.

  7. Edite o atributo de classe <body> para alternar o padrão de volta para o tema claro.

Na próxima unidade, você usará o JavaScript para fornecer interatividade e suporte à alternância de temas.

Usar o GitHub Copilot para adicionar um tema

Você pode usar o GitHub Copilot em seu IDE para gerar CSS para adicionar um novo tema. Você pode personalizar o prompt para especificar propriedades para definir os estilos de 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 pela IA, portanto, surpresas e erros são possíveis. Para obter mais informações, consulte Perguntas frequentes sobre o Copilot.

Saiba mais sobre o GitHub Copilot no Visual Studio Code.