Exercício - Seletores

Concluído

No exercício anterior, você aplicou estilo a elementos como html e h1. Você frequentemente precisa ser um pouco mais estreito na aplicação do estilo.

Neste exercício, você define o estilo para as seções de mídia social e experiência e links na página.

Aplicando estilo a classes e IDs

Você começa definindo o estilo para as seções de mídia social e experiência.

1. Volte à janela vscode.dev que utilizou no exercício anterior.

2. Dentro index.html, observe o section elemento com o ID da mídia social na linha 10, você aplica estilo a esta seção para definir a cor como azul.

3. No final de style.css, adicione o seguinte CSS para definir a cor para o elemento de mídia social:

   #social-media {
       color: blue;
   }
   

4. A página é atualizada, definindo o conteúdo na seção de mídia social como azul.

5. Dentro index.html, observe os dois trechos nas linhas 28 e 32 com a experiência da turma; Você aplica estilo a essas seções para colocar a fonte em itálico.

6. No final do style.css, adicione o seguinte CSS para modificar a fonte dos elementos com a classe de experiência:

   .experience {
       font-style: italic;
   }
   

7. A página é atualizada, definindo a fonte dentro da experiência como itálico.

Usando pseudoclasses para definir o estilo do link

Muitos desenvolvedores da Web alteram a cor e o estilo dos hiperlinks em uma página. Você define a cor dos links como verde e realça os links quando um usuário passa o mouse sobre eles.

1. No final de style.css, adicione o seguinte CSS para definir links para sempre verdes:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. A página é atualizada para mostrar os links como verdes.

3. Adicione o seguinte CSS ao final do style.css para destacar os links à medida que eles passam o mouse:

   a:hover {
       background-color: yellow;
   }
   

4. Passe o cursor sobre os links na página e observe que os links estão realçados.

Rever

A captura de tela a seguir mostra os resultados do CSS aplicado. Você usou classes, IDs e pseudoclasses para aplicar estilos a elementos específicos e grupos lógicos de elementos.