Como estilizar elementos

Texto vermelho

. Útil para ajustes rápidos, mas dificulta a manutenção e reutilização."> Texto vermelho

. Útil para ajustes rápidos, mas dificulta a manutenção e reutilização.">

Inline: Estilos aplicados diretamente nos elementos HTML usando o atributo style. Por exemplo: <p style="color: red;">Texto vermelho</p>. Útil para ajustes rápidos, mas dificulta a manutenção e reutilização.
Internal (ou Embedded): Estilos definidos dentro de um bloco <style> no <head> do documento. Por exemplo:
```
<style>
p {
    color: blue;
}
</style>
```
Bom para estilos específicos de uma única página.
External: Estilos definidos em arquivos CSS externos. Essa é a abordagem recomendada, pois promove reutilização e separação de conteúdo e apresentação. Incluído com <link> no <head>. Por exemplo: <link rel="stylesheet" href="styles.css">.

Seletores e Propriedades

Seletores básicos:

Elemento: Seleciona todos os elementos de um tipo específico. Exemplo: p { color: black; }.
ID: Seleciona um elemento único com o ID especificado. Exemplo: #header { background-color: gray; }.
Classe: Seleciona todos os elementos que têm a classe especificada. Exemplo: .highlight { font-weight: bold; }.

Propriedades comuns:

color: Define a cor do texto. Exemplo: color: red;.
font-size: Define o tamanho da fonte. Exemplo: font-size: 20px;.
background: Define o plano de fundo. Exemplo: background: yellow;.
margin: Define o espaço ao redor dos elementos. Exemplo: margin: 10px;.
padding: Define o espaço entre o conteúdo do elemento e sua borda. Exemplo: padding: 20px;.

Box Model

Todos os elementos HTML podem ser considerados como caixas. No CSS, o Box Model é um conceito que inclui margin, border, padding, e o content:

content: Onde o texto e as imagens aparecem.
padding: Espaço entre o conteúdo e a borda.
border: Circunda o padding (se houver) e o conteúdo.