Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 05 - Identificando e Estilizando elementos

Seletores CSS

Seletores de classes

As classes permitem criar uma categoria de elementos HTML que devem possuir o mesmo estilo. Veja no trecho de código abaixo como criar uma classe no HTML e selecionar esses elementos no CSS.

<html>
  <head>
     <style>
       ul.list-1 {
          list-style-type: disc;
          background: coral;
      }
    </style>
  </head>
<body>
  <ul class="list-1">
      <li>Café</li>
      <li>Chá</li>
      <li>Leite</li>
  </ul>
  <ul>
    <li>Chocolate</li>
    <li>Pipoca</li>
    <li>Pão</li>
  </ul>
</body>
</html>

No exemplo acima, apenas a primeira lista receberá um estilo.

Os elementos HTML podem pertencer a mais de uma classe, recebendo assim a composição de estilo das classes a que pertencem. Para indicar mais de uma classe a um elemento HTML, basta colocar as classes separadas por espaço, conforme o exemplo abaixo:

<ul class="list-1 importante">
    <li>Café</li>
    <li>Chá</li>
    <li>Leite</li>
</ul>

Nos exemplos acima, utilizamos o seletor de classe atrelado a um elemento html (ul.list-1). Essa forma de selecionar garante que apenas os elementos de lista que contenham a classe list-1, sejam selecionados.

No entanto, é possível também selecionar todos os elementos que tenham determinada classe, independentemente do elemento HTML a que pertencem. Veja no exemplo:

.grande {
    font-size: 30px;
}

No exemplo acima, todos os elementos que tiverem a classe "grande", independentemente do elemento HTML, serão selecionados e terão seus estilos alterados.

Seletores de Identificadores

No HTML é possível fornecer um identificador a um elemento HTML. Uma vez que um elemento HTML possui um identificador, é possível selecioná-lo pelo CSS para aplicar um estilo.

#secao1{
  font-size: 10px;
}
 <h1 id="secao1">Instituto Metrópole Digital</h1>

O id deve ser utilizado quando se deseja selecionar um elemento em específico. Os ids são identificadores únicos dos elementos no documento HTML e por isso não é uma boa prática possuir vários elementos com o mesmo identificador.


Versão 5.3 - Todos os Direitos reservados