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:

color: Define a cor do texto dentro de um elemento.
```
p {
    color: blue;
}
```

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

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

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

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

font-weight: Define a espessura da fonte, como "normal," "negrito" ou valores numéricos.
```
strong {
    font-weight: bold; /* Texto em negrito */
}
```
text-align: Alinha o texto horizontalmente (esquerda, direita, centralizado, justificado).
```
div {
    text-align: center; /* Alinha o texto ao centro */
}
```
text-decoration: Controla a decoração do texto, como sublinhado ou tachado.
```
a {
    text-decoration: underline; /* Sublinha links */
}
```
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 */
}
```

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

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

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 */
}

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 */
}
```
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 */
}
```
width e height: Estabelecem a largura e altura de um elemento.
```
.caixa {
    width: 300px;
    height: 200px;
}
```
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 */
}
```
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;
}
```