CSS: explorando seletores e utilizando variáveis

Hierarquia de estilos - Apresentação

Se você já sabe como usar o CSS em seus projetos, mas não conseguimos avançar além dos seletores básicos, como seletores de classe e de tag de elementos, você está no lugar certo. Neste curso, vamos aprender a elevar o nível do nosso CSS.

Quem nos acompanhará será Neilton Senguins, instrutor na Escola de FrontEnd.

Audiodescrição: Neilton se descreve como um homem de pele negra. Tem cabelos pretos, curtos e encaracolados. Tem olhos castanhos e usa óculos com armação retangular. Está com uma camiseta azul-escura com a logotipo da Alura. Ao fundo, estúdio da Alura, com uma parede com iluminação roxa, e uma estante à direita com plantas e objetos decorativos.

O que vamos desenvolver?

Recebemos a tarefa de estilizar um projeto do zero a partir de uma estrutura. Nosso desafio é inserir os estilos, como apresentados na página do Figma do projeto. O resultado final será a página estilizada e publicada de um petshop chamado Petpark.

Durante o curso, aprenderemos como trabalhar com variáveis CSS. Portanto, vamos receber o guia de estilos no Figma e transportar isso para nosso código. Também vamos entender sobre precedência de estilos para saber qual estilo aplicar e como eles se sobrepõem de acordo com determinada prioridade.

Além disso, aprenderemos a criar animações incríveis utilizando pseudo-classes e pseudo-elementos. Essas animações vão surgir ao interagir com determinados elementos na tela, como, por exemplo, passando o mouse sobre as opções do menu de navegação e da seção de serviços.

Por fim, vamos aprender a estilizar elementos como campos de input e checkboxes, que são mais desafiadores de se trabalhar.

Pré-requisitos

Para acompanhar este curso, é necessário saber o básico de HTML e CSS, pois queremos elevar o seu nível de CSS.

Até a próxima aula!

Hierarquia de estilos - Preparando a aplicação

Recebemos a divertida tarefa de estilizar a página do Petpark. Vamos conferir essa aplicação no navegador do Google Chrome.

Executando a aplicação

Para isso, precisamos executar a aplicação. Basta abrir o projeto no Visual Studio Code e acessar a aba de extensões na lateral esquerda (atalho "Ctrl + Shift + X") para instalar a extensão chamada Live Server.

Em seguida, podemos voltar a aba de exploração de arquivos (atalho "Ctrl + Shift + E") e clicar com o botão direito no arquivo index.html e selecionar a opção "Open with Live Server" (atalho "Alt + L, Alt + O"). Isso abrirá a página no navegador.

Inicialmente, a aplicação do Petpark não possui estilo CSS. Os elementos estão desalinhados e sem cores - apenas com textos e imagens. Nosso objetivo é dar vida a esse projeto. É como se tivéssemos uma tela de esboço onde devemos aplicar a arte, que é o CSS.

Explorando o projeto

Para estilizar a aplicação, vamos conferir a ideação do projeto no Figma.

No Figma, podemos visualizar que o projeto do Petpark possui uma identidade visual definida com cores coral, bege e verde. Os elementos são mais arredondados e estão alinhados de várias formas diferentes. Além disso, são definidas algumas animações com as quais trabalharemos durante o curso.

Nesta fase do projeto, surgem dúvidas sobre por onde começar. Por enquanto, no projeto no Visual Studio Code, temos apenas um arquivo index.html com a estrutura básica e algumas classes nas tags.

Confira o arquivo index.html completo do projeto base.

Essas classes não seguem um padrão específico, mas isso não é um problema, pois podemos trabalhar com elas mesmo assim. Isso já facilita o nosso trabalho, pois precisaremos apenas estilizar a aplicação.

Normalizando e resetando estilos

Primeiramente, podemos começar normalizando e resetando alguns estilos para que a aplicação funcione de forma consistente em diferentes navegadores.

Para isso, vamos abrir uma nova aba no navegador para pesquisar por normalize.css no site do jsDelivr. Nessa biblioteca, encontraremos o link de importação do arquivo de normalização que devemos utilizar no HTML da nossa aplicação.

Esse arquivo, que está hospedado na nuvem do CDN, vai padronizar os estilos e noramizar o código para que a aplicação seja exibida da mesma maneira em todos os navegadores.

Basta copiar o código HTML que já possui a tag <link> e o atributo href com a URL do normalize.min.css. Essa extensão indica que esse é um arquivo de CSS minificado.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">

Voltando ao HTML no Visual Studio Code, vamos colar esse trecho dentro da tag <head>, logo abaixo da importação do favicon.

index.html:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
  <title>Petpark</title>
</head>

Em seguida, também vamos pesquisar por reset.css no site do jsDelivr. Esse arquivo irá resetar os estilos, removendo espaçamentos e estilos de links e botões presentes por padrão em alguns navegadores.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">

Copiamos o HTML correspondente para importação do arquivo reset.min.css e colamos dentro da tag <haed> do HTML.

index.html:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
  <title>Petpark</title>
</head>

Após importar ambos CSS minificados, verificamos no navegador se houve alguma mudança na aplicação. Notamos que os espaçamentos e os pontos das listas foram removidos, indicando que o normalize e o reset já foram aplicados.

Aplicando fontes

No Figma do projeto, também podemos encontrar o guia de estilos da Petpark. A aplicação utiliza fontes específicas, como Sigmar e Poppins.

Para obter essas fontes, acessamos o site do Google Fonts em uma nova aba do navegador. No campo de busca da barra superior, pesquisamos por "Sigma" e selecionamos a fonte de mesmo nome.

Na página da fonte, vamos clicar no botão "Get Font" no canto superior direito e, em seguida, no botão "Get Embed Code". Desse modo, teremos acesso ao modo de importação da fonte Sigmar com peso 400 - tanto para Web, Android, iOS e Flutter.

No nosso caso, utilizaremos a versão Web e deixaremos marcado a opção de importação usando a tag <link>.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sigmar&display=swap" rel="stylesheet">

Após copiar o código, vamos colar esse trecho abaixo da importação do normalize e do reset, também dentro da tag <head> no HTML.

index.html:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sigmar&display=swap" rel="stylesheet">
  <title>Petpark</title>
</head>

Agora, repetimos o processo para a fonte Poppins. No site do Google Fonts, buscamos por "Poppins" e selecionamos a fonte com esse nome. Depois de clicar em "Get Font" e "Get Embed Code", podemos selecionar apenas os pesos de fonte necessários para o projeto, clicando no botão "Change styles".

Nesse caso, vamos selecionar apenas Regular 400 e Medium 500 e copiar o código de importação da web com as tags <link>.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">

Ainda na tag <head> do HTML, vamos colar o trecho copiado.

index.html:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sigmar&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
  <title>Petpark</title>
</head>

Assim, já fizemos a importação de todas as fontes que utilizaremos no projeto.

Criando arquivo CSS

Por fim, vamos criar um arquivo de estilos que devemos, posteriormente, importar dentro do HTML.

No painel à esquerda do VS Code, vamos clicar no botão "New Folder" para criar uma pasta chamada "css" dentro da pasta raiz da aplicação. Ainda na pasta raiz, vamos clicar no botão "New File" para criar um arquivo chamado estilos.css, onde definiremos os estilos globais para a aplicação.

Primeiramente, vamos chamar o seletor da tag body seguido de abre e fecha chaves. Nela, vamos definir alguns estilos do corpo da aplicação, dentre eles, a fonte. Para isso, vamos usar a propriedade font-family com o valor Poppins, entre aspas, e o tipo sans-serif.

Também vamos definir uma cor de texto através da propriedade color com o valor #444444, que é um cinza-escuro. Esse código hexadecimal foi estipulado no guia de estilos presente no Figma, dentre as cores neutras.

Além disso, vamos declarar um tamanho de página de 100% de largura e altura, usando as propriedades width e height. Assim, a aplicação se estenderá por toda a tela.

Depois, definimos o box-sizing como border-box e o background-color como #ffffff, ou seja, um fundo branco.

Finalmente, vamos definir uma classe chamada .container para alinhar itens no centro da página, com um tamanho fixo de 1200px de largura. Essa classe aparece em várias seções do index.html, como no <nav> e na seção de banner.

estilos.css:

body {
    font-family: 'Poppins', sans-serif;
    color: #444444;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #ffffff;

    .container {
        width: 1200px;
    }
}

Após salvar o arquivo CSS, vamos retornar ao index.html. Dentro da tag <head>, vamos importar o estilos.css.

Basta digitar "link", que a abreviação Emmet para criar a tag <link> já com os atributos rel e href. No href, vamos importar o arquivo desde ./estilos.css.

index.html:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sigmar&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./estilos.css">
  <title>Petpark</title>
</head>

Conclusão

Com isso, resetamos e normalizamos a aplicação para diferentes navegadores, removemos estilos padrões do HTML e importamos as fontes Poppins e Sigmar. Além disso, criamos um arquivo CSS para definir a fonte do corpo da aplicação e outras propriedades importantes, como cor de fundo, largura e altura da página.

Hierarquia de estilos - Criando o cabeçalho

Partindo do Figma da aplicação, nosso objetivo é aplicar todos esses estilos na nossa página do Petpark. Por enquanto, a aplicação está bem simples, pois apenas normalizamos e importamos as fontes que iremos utilizar.

Nesta etapa, podem surgir dúvidas sobre como organizar o CSS da aplicação. A resposta padrão é: depende. Existem diferentes casos. No nosso caso, começamos criando uma pasta chamada "CSS" e um arquivo de estilos.css no Visual Studio Code.

É possível criar todos os CSS da aplicação em um único arquivo, o que pode funcionar bem para aplicações pequenas, permitindo alterações manuais no futuro. No entanto, se a aplicação crescer, é interessante que os estilos sejam organizados de alguma forma.

A forma que escolhemos é dividir cada seção em um arquivo de estilo diferente. No Figma, podemos conferir cada uma desas seções:

• Cabeçalho;
• Destaque (ou banner);
• Serviços;
• Planos mensais;
• Super ofertas;
• Marcas parceiras;
• Inscrição na newsletter;
• Rodapé.

Criando arquivo de estilo para o cabeçalho

No Visual Studio Code, dentro da pasta "css", criaremos um arquivo de estilo para a primeira seção da aplicação, chamado cabecalho.css.

Em seguida, vamos importar esse arquivo cabecalho.css no arquivo de estilos.css. Antes do body, vamos escrever @import url(), passando o caminho do arquivo entre aspas simples, que será ./css/cabecalho.css.

estilos.css:

@import url('./css/cabecalho.css');

Agora, os estilos do cabeçalho serão aplicados assim que os escrevemos no arquivo cabecalho.css.

No index.html, o cabeçalho é a tag <header>, que contém a classe cabecalho. Dentro dele, há uma div com as classes alinhamento-cabecalho e container. Esse contêiner contém a logotipo do Petpark, o campo de busca, que possui uma label com a classe label-busca, e o botão de login com a classe botao-login.

index.html:

<header class="cabecalho">
    <div class="alinhamento-cabecalho container">
        <img src="./assets/logo.png" alt="Logotipo do Petpark" />
        <label class="label-busca" for="campo-busca">
            <input
                class="input-busca"
                type="text"
                name="campo-busca"
                placeholder="O que você procura?"
            />
            <div class="icone-busca">
                <div></div>
            </div>
        </label>
        <button class="botao-login">
            <img
                class="icone-login"
                src="./assets/icones/login.png"
                alt="ícone de login"
            />
            Login/Cadastro
        </button>
    </div>
    <!-- Código omitido... --> 
</header>

Agora, vamos começar a criar os estilos do cabeçalho aos poucos.

Estilizando o cabeçalho

Em cabecalho.css, vamos chamar o seletor da classe .cabecalho. Dentro das chaves, vamos usar a propriedade display: flex.

Como o objetivo é criar o CSS da página inteira, não vamos nos aprofundar em assuntos específicos como flexbox. Se você ainda não trabalhou com esse conteúdo, pode consultar os outros cursos dessa formação.

Também vamos adicionar a propriedade flex-direction: column para alinhar os elementos como colunas. Além disso, alinharemos os elementos ao centro através do align-items: center.

E, com a propriedade gap, vamos definir espaçamento entre elementos de 1rem. Por fim, aplicamos um padding-bottom de 2rem para ter uma certa distância até a borda abaixo do cabeçalho.

cabecalho.css:

.cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-bottom: 2rem;
}

Continuamos com a estilização da classe .alinhamento-cabecalho, que serve para alinhar elementos. Novamente, vamos usar o display: flex, mas também colocaremos o justify-content que serve para justificar o espaçamento entre os elementos.

Nesse caso, como a direção do flex é row, que é o padrão, ele vai alinhar o conteúdo na orientação horizontal. Para os elementos ficarem o mais afastados possível entre eles, vamos colocar o valor space-between nessa propriedade.

E aí, também daremos um align-items: center que serve para centralizar os elementos com relação ao eixo vertical, quando a direção do flex é row. Por último, vamos definir um padding-top de 24px.

.alinhamento-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
}

Estilizando campo de busca

A próxima classe que estilizaremos será .label-busca. Entre as chaves, vamos escrever primeiramente um display: flex - iremos usar o flexbox frequentemente durante o curso.

Depois, vamos aplicar a propriedade flex-grow, pois faz com que os elementos cresçam por igual e ocupem o mesmo tamanho dentro de um contêiner com o display: flex. Nesse caso, vamos passar um valor de 0.5. Também utilizaremos um justify-content: space-between e align-items: center.

Além disso, vamos definir uma borda sólida cinza-escura, que é a cor padrão dos textos, através da propriedade border com o valor de 1px solid #444444. Podemos encontrar os códigos hexadecimais das cores neutras no guia de estilos no Figma do projeto.

Por fim, vamos acrescentar um padding. Para capturar os valores padding do texto dentro do campo de input em relação às bordas, vamos acessar a página inicial do Petpark no Figma, selecionar o campo de busca e posicionar o mouse acima do elemento que queremos verificar apertando a tecla "Alt".

Assim, descobrimos que existe um espaçamento de 8px para cima e para baixo e de 16px para à esquerda e à direita. Por isso, definimos o padding como 8px na primeira posição e 16px na segunda posição.

A próxima propriedade que vamos adicionar será o border-radius de 2rem. Para saber esse valor, você precisa selecionar o elemento no Figma e conferir o painel de propriedades localizado na lateral direita do Figma. Na seção "Layout", encontramos a informação de radius como 32px, que convertendo para unidades relativas é aproximadamente 2rem.

Dica: 1rem é aproximadamente 16px.

.label-busca {
    display: flex;
    flex-grow: 0.5;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #444444;
    padding: 8px 16px;
    border-radius: 2rem;
}

Finalmente, vamos estilizar o input, que é o que está dentro do campo de busca, como, por exemplo, um placeholder. Para isso, faremos um tipo de seleção de elemento mais específico, utilizando o nome da classe .label-busca e também o nome da tag input.

Entre chaves, vamos definir o estilo de background-color como transparent e border como none. Desse modo, o input não terá borda ou cor de fundo.

Também colocaremos as propriedades display: flex e align-items: center. Por fim, aplicaremos um gap de 0.5rem para ter um pequeno espaçamento entre os elementos.

.label-busca input {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

Após salvar o arquivo, verificamos a aplicação do Petpark no navegador. Já conseguimos definir o tamanho do contêiner no cabeçalho, criando alinhamento e espaçamento entre o logotipo, o campo de input e o botão de cadastro. Porém, ainda falta estilizar esse botão.

Conclusão

Por que escolhemos fazer a estilização usando o nome da classe e depois o nome do elemento HTML? No index.html, o input está dentro do label com a classe label-busca. Esse tipo de seleção de elementos é mais específico, dando precedência aos estilos.

A ordem de prioridade dos estilos é a seguinte, do mais prioritário para o menos prioritário:

1. CSS inline: CSS escrito no HTML por meio do atributo style;
2. ID: seletores de #id;
3. Classe: seletores de .classe;
4. Elemento: seletores de elementos HTML, como div, input, footer, entre outros;

Já fizemos boa parte dos estilos do cabeçalho, mas ainda falta estilizar o botão e o menu. Vamos abordar isso em um próximo vídeo. Até lá!

Sobre o curso CSS: explorando seletores e utilizando variáveis

O curso CSS: explorando seletores e utilizando variáveis possui 178 minutos de vídeos, em um total de 57 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Hierarquia de estilos
• Variáveis CSS
• Avançando nos estilos
• Estilizando a seção de newsletter
• Avançando nos estilos