Fundamentos do CSS

CSS é a base para estilizar páginas web, proporcionando controle sobre a aparência e o layout dos elementos. Este artigo aborda os fundamentos essenciais do CSS, como seletores, combinadores, e propriedades de dimensionamento e espaçamento.

1. Seletores

Os seletores permitem aplicar estilos a elementos específicos em um documento HTML. Aqui estão os tipos mais comuns:

• Seletor de Tags: Aplica estilos a todas as instâncias de uma tag HTML específica.

    p {
      color: blue;
    }

• Seletor de ID: Aplica estilos a um elemento com um ID único.

    #titulo {
      font-size: 24px;
    }

• Seletor de Classes: Permite aplicar estilos a um grupo de elementos com a mesma classe.

    .botao {
      background-color: green;
    }

• Seletor Universal: Aplica estilos a todos os elementos da página.

    * {
      margin: 0;
      padding: 0;
    }

• Seletor de Atributo: Estiliza elementos com base em seus atributos.

    input[type="text"] {
      border: 1px solid gray;
    }

2. Combinadores

Combinadores definem relações entre seletores, permitindo maior controle sobre a estilização.

• Agrupamento de Seletores: Aplica o mesmo estilo a múltiplos seletores.

    h1, h2, h3 {
      color: navy;
    }

• Combinador Descendente: Estiliza elementos que estão dentro de outros.

    div p {
      font-style: italic;
    }

• Combinador Filho: Aplica estilos apenas aos elementos filhos diretos.

    ul > li {
      list-style-type: none;
    }

• Combinador Irmão:
• Imediato: Estiliza o primeiro elemento irmão imediatamente após o anterior.

    h1 + p {
      margin-top: 10px;
    }

• Geral: Estiliza todos os irmãos posteriores.

    h1 ~ p {
      color: gray;
    }

3. Propriedades de Dimensionamento e Espaço

Essas propriedades controlam o tamanho e o espaçamento dos elementos:

• width e height: Definem a largura e altura de um elemento.

    div {
      width: 200px;
      height: 100px;
    }

• max-width e max-height: Limitam o tamanho máximo.

    img {
      max-width: 100%;
    }

• min-width e min-height: Garantem um tamanho mínimo.

    div {
      min-width: 150px;
    }

• margin: Define o espaçamento externo de um elemento.

    p {
      margin: 10px 20px;
    }

• padding: Define o espaçamento interno de um elemento.

    button {
      padding: 5px 15px;
    }

• box-sizing: Controla como o tamanho total do elemento é calculado.

    div {
      box-sizing: border-box;
    }