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

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:

  1. 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.

  2. 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:

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

Seletores CSS

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:

Propriedades e Valores CSS

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;
}

Estilização de Elementos, Classes e IDs

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.