Fundamentos de Seletores CSS

Introdução

Bem-vindo ao laboratório de Fundamentos de Seletores CSS! Cascading Style Sheets (CSS) é uma tecnologia fundamental da World Wide Web, usada para descrever a apresentação de um documento escrito em uma linguagem de marcação como HTML.

Seletores CSS são padrões usados para selecionar e estilizar os elementos HTML que você deseja. Dominar seletores é uma habilidade fundamental para qualquer desenvolvedor web. Neste laboratório, você aprenderá a usar os tipos mais comuns de seletores CSS para estilizar uma página web simples.

Você praticará:

• Seletor de Elemento: Seleciona elementos pelo nome da sua tag.
• Seletor de Classe: Seleciona elementos com um atributo class específico.
• Seletor de ID: Seleciona um único elemento com um atributo id específico.
• Seletor de Agrupamento: Aplica os mesmos estilos a múltiplos seletores.
• Seletor Descendente: Seleciona elementos que são descendentes de outro elemento.

O ambiente do laboratório foi pré-configurado com um arquivo index.html. Sua tarefa é escrever código CSS no arquivo styles.css para estilizar a página. Você pode pré-visualizar suas alterações em tempo real alternando para a aba Web 8080 no canto superior esquerdo da interface.

Use o seletor de elemento para a tag p

Nesta etapa, você usará um seletor de elemento para aplicar um estilo a todos os elementos <p> (parágrafo) na página. Seletores de elemento são o tipo mais básico de seletor; eles selecionam elementos HTML com base no nome da sua tag.

Primeiro, localize o arquivo styles.css no explorador de arquivos no lado esquerdo do seu WebIDE. Clique nele para abri-lo no editor.

Agora, adicione o seguinte código CSS ao arquivo styles.css. Esta regra selecionará todos os elementos <p> e mudará a cor do texto deles para azul.

p {
  color: blue;
}

Após adicionar o código, salve o arquivo (você pode usar Ctrl+S ou Cmd+S). Para ver o efeito, clique na aba Web 8080. Você deverá ver que o texto de todos os três parágrafos na página ficou azul.

Aplique o seletor de classe com .nomedaclasse

Nesta etapa, você aprenderá a usar um seletor de classe. Seletores de classe são mais específicos do que seletores de elemento. Eles selecionam elementos com base no valor do seu atributo class. Um seletor de classe é escrito com um ponto (.) seguido pelo nome da classe.

No seu arquivo index.html, um dos parágrafos tem o atributo class="highlight". Vamos selecionar este parágrafo específico.

Adicione a seguinte regra CSS ao seu arquivo styles.css. Isso selecionará qualquer elemento com a classe highlight e lhe dará um fundo amarelo.

.highlight {
  background-color: yellow;
}

Salve o arquivo styles.css e alterne para a aba Web 8080 para ver suas alterações. Você notará que apenas o parágrafo com o texto "This is a special paragraph with a class" agora tem um fundo amarelo, enquanto os outros parágrafos não são afetados.

Implemente o seletor de ID com #nomedoID

Nesta etapa, usaremos um seletor de ID. Seletores de ID são ainda mais específicos do que seletores de classe. Eles são usados para selecionar um único elemento exclusivo com um atributo id específico. Um seletor de ID é escrito com um caractere de cerquilha (#) seguido pelo ID do elemento. Lembre-se, um ID deve ser exclusivo em uma única página HTML.

O elemento <h1> em index.html tem um id="main-title". Vamos estilizar.

Adicione a seguinte regra CSS ao seu arquivo styles.css. Esta regra aumentará o tamanho da fonte do título principal e adicionará uma linha sólida preta abaixo dele.

#main-title {
  font-size: 32px;
  border-bottom: 2px solid black;
}

Salve o arquivo e verifique a aba Web 8080. Você deverá ver que o título principal "Welcome to Our Page" agora é maior e tem uma linha abaixo dele. Este estilo se aplica apenas ao elemento com o ID main-title.

Combine seletores usando vírgula para agrupar

Nesta etapa, você aprenderá como aplicar os mesmos estilos a múltiplos seletores sem repetir o código. O seletor de agrupamento permite que você faça isso separando cada seletor com uma vírgula.

Digamos que queremos aplicar a mesma fonte aos elementos <h1> e <h2> em nossa página. Em vez de escrever duas regras separadas, podemos agrupá-las.

Adicione a seguinte regra CSS ao seu arquivo styles.css.

h1,
h2 {
  font-family: Arial, sans-serif;
}

Esta regra diz ao navegador para aplicar a font-family especificada a todos os elementos <h1> E a todos os elementos <h2>.

Salve o arquivo e atualize a aba Web 8080. Observe como a fonte de "Welcome to Our Page" e "About CSS" mudou.

Adicione seletor descendente como div p

Nesta etapa, você usará um seletor descendente. Este seletor corresponde a todos os elementos que são descendentes de um elemento especificado. Um seletor descendente é criado listando dois ou mais seletores separados por um espaço.

Nosso index.html tem um elemento <p> dentro de um <div>. Queremos estilizar apenas este parágrafo específico, não os outros parágrafos na página.

Adicione a seguinte regra CSS ao seu arquivo styles.css. O seletor div p selecionará qualquer elemento <p> que esteja localizado em qualquer lugar dentro de um elemento <div>.

div p {
  font-style: italic;
}

Após salvar o arquivo, vá para a aba Web 8080. Você verá que apenas o parágrafo "This paragraph is inside a div..." está agora em itálico. Os outros dois parágrafos permanecem inalterados porque não são descendentes de um <div>.

Resumo

Parabéns por completar o laboratório! Você aprendeu e aplicou com sucesso os seletores CSS fundamentais para estilizar uma página web.

Neste laboratório, você praticou:

• Seletor de Elemento (p): Para estilizar todos os elementos de um determinado tipo.
• Seletor de Classe (.highlight): Para estilizar elementos específicos que compartilham uma classe.
• Seletor de ID (#main-title): Para estilizar um único elemento, exclusivo.
• Seletor de Agrupamento (h1, h2): Para aplicar os mesmos estilos a múltiplos elementos de forma eficiente.
• Seletor Descendente (div p): Para estilizar elementos com base em sua posição dentro de outro elemento.

Esses seletores são os blocos de construção para criar layouts de página web complexos e bonitos. Agora você pode usá-los para controlar precisamente a aparência de seus documentos HTML.