Principais propriedades do CSS - 1

Principais propriedades do CSS

O CSS (Cascading Style Sheets) oferece uma ampla variedade de propriedades que permitem controlar o estilo e a apresentação dos elementos HTML em uma página web. Abaixo, estão algumas das principais propriedades CSS e suas descrições:

1. color: Define a cor do texto dentro de um elemento.

   p {
       color: blue;
   }

2. font-family: Especifica a família de fontes a ser usada para o texto.

   body {
       font-family: Arial, sans-serif; /* Fontes preferenciais */
   }

3. font-size: Controla o tamanho da fonte do texto.

   h2 {
       font-size: 24px; /* Tamanho da fonte de 24 pixels */
   }

4. font-weight: Define a espessura da fonte, como "normal," "negrito" ou valores numéricos.

   strong {
       font-weight: bold; /* Texto em negrito */
   }

5. text-align: Alinha o texto horizontalmente (esquerda, direita, centralizado, justificado).

   div {
       text-align: center; /* Alinha o texto ao centro */
   }

6. text-decoration: Controla a decoração do texto, como sublinhado ou tachado.

   a {
       text-decoration: underline; /* Sublinha links */
   }

7. line-height: Define a altura da linha, afetando o espaço entre as linhas de texto.

   p {
       line-height: 1.5; /* Espaço entre linhas 1,5 vezes a altura da fonte */
   }

8. background-color: Especifica a cor de fundo de um elemento.

   .destaque {
       background-color: #FFFF00; /* Fundo amarelo para elementos destacados */
   }

9. border: Controla as propriedades da borda de um elemento, como largura, estilo e cor.

   .caixa {
       border: 2px dashed #000; /* Borda de 2 pixels, estilo tracejado, cor preta */
   }

10. margin: Define a margem externa de um elemento, afetando o espaço ao seu redor.

    .margem-superior {
        margin-top: 20px; /* Margem superior de 20 pixels */
    }

11. padding: Controla o preenchimento interno de um elemento, afetando o espaço entre seu conteúdo e sua borda.

    .preenchimento-interno {
        padding: 10px; /* Preenchimento de 10 pixels em todas as direções */
    }

12. width e height: Estabelecem a largura e altura de um elemento.

    .caixa {
        width: 300px;
        height: 200px;
    }

13. display: Define como um elemento é exibido, como "block" (bloco) ou "inline" (em linha).

    .botao {
        display: inline-block; /* Exibe o elemento como um bloco em linha */
    }

14. position: Controla a posição de um elemento na página, com opções como "relative" (relativa) ou "absolute (absoluta).

    .elemento-absoluto {
        position: absolute;
        top: 20px;
        left: 30px;
    }