Aula 2: Seletores e Propriedades

Nesta palestra, nos aprofundaremos nos blocos de construção do CSS: seletores e propriedades. Esses são conceitos essenciais que permitem direcionar elementos específicos em sua página da web e estilizá-los de maneira eficaz.

O que são seletores CSS?

Seletores CSS são padrões usados ​​para selecionar os elementos HTML que você deseja estilizar. Diferentes tipos de seletores permitem aplicar estilos a vários elementos com base em sua tag, classe, ID, atributos e muito mais.

Tipos de seletores

1. Seletor de elemento (tipo):

   • Segura todos os elementos de um tipo específico.
   • Exemplo:

    p {
      color: green;
    }
   

   Isso mudará a cor de todos os elementos

   para verde.

2. Seletor de classe:

   • Segura elementos com um atributo de classe específico.
   • Exemplo:

    .highlight {
      background-color: yellow;
    }
   

   No seu HTML, qualquer elemento com class="highlight" terá um fundo amarelo.
   

    
   This is highlighted text.
   

3. Seletor de ID:

   • Segura um único elemento com um atributo de ID exclusivo.
   • Exemplo:

    #header {
      font-size: 24px;
    }
   

   Apenas o elemento com id="header" terá um tamanho de fonte de 24px.
   

    
   Welcome to My Website
   

4. Seletor de grupo:

   • Aplica o mesmo estilo a vários seletores.
   • Exemplo:

    h1, h2, h3 {
      color: blue;
    }
   

   Esta regra tornará todos os elementos

   ,

   e

   azuis.

5. Seletor de descendentes:

   • Tem como alvo elementos que estão dentro (descendentes de) outros elementos.
   • Exemplo:

    div p {
      font-style: italic;
    }
   

   Isso deixará todos os elementos

   dentro de um

   em itálico.
   

    
   
      
   This text is italicized because it's inside a div.
    
   

   Compreendendo as propriedades CSS

   As propriedades CSS definem quais aspectos dos elementos selecionados você deseja estilizar. Cada propriedade é seguida por um valor que especifica o resultado desejado.

   Propriedades de exemplo:

   • Cor:

     • Define a cor do texto.
     • Exemplo:

     h1 {
       color: red;
     }
     

   • Cor de fundo:

     • Define a cor de fundo.
     • Exemplo:

     body {
       background-color: #f0f0f0;
     }
     

   • Tamanho da fonte:

     • Define o tamanho do texto.
     • Exemplo:

     p {
       font-size: 16px;
     }
     

   • Margem:

     • Define o espaço fora de um elemento.
     • Exemplo:

     .box {
       margin: 20px;
     }
     

   • Preenchimento:

     • Define o espaço dentro de um elemento, entre o conteúdo e a borda.
     • Exemplo:

     .content {
       padding: 10px;
     }
     

   Exemplos práticos:

   Vamos combinar o que aprendemos com um exemplo simples.

   HTML:
   

   
     
   Welcome to CSS Basics
     
   This is an introduction to CSS selectors and properties.
     
   Selectors help you target elements, and properties allow you to style them.
   
   

   CSS:
   

   /* ID Selector */
   #container {
     border: 2px solid black;
     padding: 10px;
   }
   
   /* Element Selector */
   h1 {
     color: purple;
   }
   
   /* Class Selector */
   .intro {
     background-color: lightblue;
     font-size: 18px;
   }
   
   /* Group Selector */
   h1, p {
     font-family: Arial, sans-serif;
   }
   
   /* Descendant Selector */
   #container p {
     margin-bottom: 15px;
   }
   

   Neste exemplo:

   • O #container div é estilizado com uma borda preta e preenchimento.
   • O título

     é roxo.

   • O parágrafo com a introdução da aula tem fundo azul claro e fonte maior.
   • Ambos os elementos

     e

     usam a fonte Arial.

   • Todos os parágrafos dentro de #container têm uma margem inferior para espaçamento.

   Praticar Exercício

   1. Crie um arquivo HTML simples com títulos, parágrafos e divs.
   2. Experimente diferentes seletores e propriedades para estilizar seu conteúdo.
   3. Tente usar o seletor descendente para estilizar elementos aninhados.
   4. Brinque com o seletor de agrupamento para aplicar os mesmos estilos a vários elementos.

   ---

   Próximo: Na próxima aula, exploraremos o CSS Box Model e aprenderemos como margens, bordas, preenchimento e conteúdo se unem para definir o layout do seu elementos da web. Vejo você lá!

   Siga-me -

   LinkedIn - Ridoy Hasan

   -