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
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
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, oumargin
para margens. -
Valor: Especifica o valor da propriedade, como
blue
para a cor ou16px
para o tamanho da fonte.
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.