Sintaxe Básica do CSS

3.1 Regras (Rules)

Os elementos principais do CSS incluem regras (rules), propriedades (properties) e valores (values). Entender a sintaxe básica do CSS é a chave para criar páginas web atraentes e funcionais.

Elementos principais do CSS:

• Regras (Rules)
• Seletores (Selectors)
• Propriedades (Properties)
• Valores (Values)

Regras (Rules)

As regras do CSS consistem em um seletor e um bloco de declarações. O seletor indica a quais elementos do HTML os estilos serão aplicados, e o bloco de declarações contém uma ou mais propriedades e seus valores. Normalmente, ele consiste em uma ou mais propriedades e valores, encerrados em chaves {}.

Exemplo:

    
      seletor {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo para o título:

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

Neste exemplo, h1 é o seletor, color e font-size são propriedades, e blue e 24px são os valores dessas propriedades.

3.2 Propriedades e valores

CSS oferece um conjunto abrangente de propriedades que podem ser usadas para controlar a aparência dos elementos. Cada propriedade tem um ou mais valores que determinam como essa propriedade será aplicada.

Propriedades principais e seus valores:

Cor e fundo:

• color: define a cor do texto
• background-color: define a cor de fundo do elemento

Exemplo:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Fonte:

• font-family: define a família de fontes
• font-size: define o tamanho da fonte
• font-weight: define a espessura da fonte

Exemplo:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Texto:

• text-align: alinha o texto dentro do elemento
• text-decoration: adiciona efeitos ao texto, como sublinhado

Exemplo:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Espaçamentos e bordas:

• margin: define as margens externas ao redor do elemento
• padding: define os espaçamentos internos dentro do elemento
• border: define a borda do elemento

Exemplo:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Tamanhos e posição:

• width e height: definem a largura e a altura do elemento
• position: define o modo de posicionamento do elemento

Exemplo:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Você precisa:

• lembrar as propriedades padrão dos elementos
• lembrar os valores padrão dessas propriedades
• lembrar as propriedades únicas de diferentes elementos
• lembrar como essas propriedades funcionam na prática
• lembrar como essas propriedades afetam umas às outras.

A melhor maneira de fazer isso é por meio da prática – escrever muito CSS e ver como ele funciona.