CSS Seletores e Propriedades

 

Os seletores e propriedades são fundamentais para o CSS, pois permitem que você selecione os elementos HTML que deseja estilizar e aplique propriedades visuais a eles. Vamos ver alguns exemplos:

Seletores

• Tipo de elemento: seleciona um elemento HTML pelo seu tipo, como h1, p, a, div, etc.

  Exemplo:

  css
  h1 {
    color: red;
  }

• Classe: seleciona um ou vários elementos HTML que têm a mesma classe atribuída.

  Exemplo:

  html
  <div class="destaque">...</div>
  <div class="destaque">...</div>

  css
  .destaque {
    background-color: yellow;
  }

• ID: seleciona um único elemento HTML com o ID específico.

  Exemplo:

  html
  <div id="banner">...</div>

  css
  #banner {
    height: 200px;
  }

• Descendente: seleciona um elemento HTML que é filho de outro elemento HTML.

  Exemplo:

  html
  <div class="pai">
    <div class="filho">...</div>
  </div>

  css
  .pai .filho {
    border: 1px solid black;
  }

Propriedades

• Cor: define a cor do texto ou do fundo.

  Exemplo:

  css
  body {
    color: black;
    background-color: white;
  }

• Fonte: define a fonte do texto.

  Exemplo:

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

• Tamanho: define o tamanho do texto.

  Exemplo:

  css
  p {
    font-size: 14px;
  }

• Margem: define a margem externa do elemento.

  Exemplo:

  css
  div {
    margin: 10px;
  }

• Preenchimento: define o espaço entre o conteúdo e a borda do elemento.

  Exemplo:

  css
  div {
    padding: 5px;
  }

• Borda: define a aparência da borda do elemento.

  Exemplo:

  css
  div {
    border: 1px solid black;
  }

Esses são apenas alguns exemplos de seletores e propriedades disponíveis no CSS. Há muitos outros que podem ser explorados para criar estilos incríveis para o seu site.