Utilizando CSS no HTML

Neste capítulo, vamos explorar como aplicar estilos CSS a elementos HTML e como você pode controlar a apresentação de suas páginas web. Aprenderemos como vincular arquivos CSS externos, criar seletores, definir propriedades e valores, e, finalmente, como estilizar eficazmente seu conteúdo HTML.

Vinculando Arquivos CSS
Seletores CSS
Propriedades e Valores CSS
Estilização de Elementos, Classes e IDs

Vinculando Arquivos CSS

Vinculando Arquivos CSS a uma Página HTML

Para aplicar estilos CSS a uma página HTML, é fundamental vincular um arquivo CSS externo. Esse arquivo contém todas as regras de estilo que serão aplicadas à página. Aqui estão os passos básicos para fazer isso:

Crie um arquivo CSS: Comece criando um arquivo de texto com a extensão .css, por exemplo, "estilos.css". Este arquivo conterá todas as regras de estilo.
Vincule o arquivo CSS à sua página HTML: No elemento <head> do seu documento HTML, adicione o seguinte código para vincular o arquivo CSS externo:

<head>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>

Agora, todas as regras de estilo definidas no arquivo "estilos.css" serão aplicadas aos elementos HTML da página.

Seletores CSS

Os seletores são a parte central do CSS, permitindo que você especifique quais elementos HTML deseja estilizar. Existem vários tipos de seletores, incluindo:

Seletores de tipo: Estilizam todos os elementos de um determinado tipo, como <h1>, <p>, ou <a>.
Seletores de classe: Permitem que você estilize elementos com base em suas classes. Por exemplo, <p class="destaque">.
Seletores de ID: Estilizam elementos com base em seus IDs exclusivos. Por exemplo, <div id="cabecalho">.
Seletores universais: Estilizam todos os elementos na página, utilizando o asterisco (*).

Propriedades e Valores CSS

As propriedades definem quais aspectos do elemento serão estilizados, enquanto os valores determinam como essas propriedades serão aplicadas. Aqui estão alguns exemplos:

seletor {
    propriedade: valor;
}

Propriedade: Define o que será estilizado, como color para a cor do texto, font-size para o tamanho da fonte, ou margin para margens.
Valor: Especifica o valor da propriedade, como blue para a cor ou 16px para o tamanho da fonte.

Estilização de Elementos, Classes e IDs

Vamos dar uma olhada em exemplos de como estilizar elementos, classes e IDs:

/* Estilizando um elemento */
p {
    font-size: 18px;
    color: #333;
}

/* Estilizando uma classe */
.destaque {
    background-color: yellow;
    font-weight: bold;
}

/* Estilizando um ID */
#cabecalho {
    font-size: 24px;
    text-align: center;
}

Estes são apenas exemplos iniciais para ilustrar como aplicar estilos usando seletores, propriedades e valores. Você pode criar estilos complexos e personalizados para se adequar ao design desejado de suas páginas web.

No próximo capítulo, você aprenderá a criar uma página web completa, aplicando os conceitos de HTML e CSS que exploramos até agora.