Capítulo 3: Introdução ao CSS - Minicurso HTML

Até agora, aprendemos sobre as tags HTML básicas e como usá-las para criar uma página da web simples. Mas uma página HTML sem estilos pode parecer um pouco sem graça e não muito atraente. É aí que entra o CSS!

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata, em português) e é uma linguagem de estilo usada para estilizar páginas HTML. Com CSS, podemos definir cores, fontes, tamanhos, posicionamento, efeitos visuais e muito mais para nossos elementos HTML.

Adicionando estilos em CSS

Para adicionar estilos CSS em uma página HTML, podemos usar a tag <style> no cabeçalho da página ou em um arquivo externo. Vamos começar com a tag <style> no cabeçalho da página.

<!DOCTYPE html><html>  <head>    <title>Minha página com CSS</title>    <style>      h1 {        color: red;        font-size: 24px;      }      p {        font-family: Arial, sans-serif;      }    </style>  </head>  <body>    <h1>Título da minha página</h1>    <p>Este é um parágrafo de texto.</p>  </body></html>

Neste exemplo, usamos a tag <style> para definir estilos CSS para os elementos <h1> e <p>. O <h1> tem uma cor vermelha e um tamanho de fonte de 24 pixels, enquanto o <p> tem uma família de fontes Arial e sans-serif.

Seletores CSS

Para aplicar estilos CSS a elementos HTML específicos, usamos seletores CSS. Os seletores podem ser baseados em classes, IDs, tipos de elementos e outros atributos.

Seletores de classe

Os seletores de classe são usados para estilizar elementos HTML que têm uma classe atribuída. Para definir uma classe CSS, usamos o ponto (.) antes do nome da classe.

<!DOCTYPE html><html>  <head>    <title>Minha página com CSS</title>    <style>      .destaque {        font-weight: bold;        color: blue;      }    </style>  </head>  <body>    <h1>Título da minha página</h1>    <p>Este é um <span class="destaque">parágrafo de texto destacado</span>.</p>  </body></html>

Neste exemplo, usamos o seletor de classe .destaque para aplicar estilos CSS a um elemento <span> com a classe “destaque”. O <span> fica em negrito e com uma cor azul.

Seletores de ID

Os seletores de ID são usados para estilizar elementos HTML que têm um ID atribuído. Para definir um ID CSS, usamos a hashtag (#) antes do nome do ID.

<!DOCTYPE html><html>  <head>    <title>Minha página com CSS</title>    <style>      #cabecalho {        background-color: yellow;        height: 100px;      }    </style>  </head>  <body>    <div id="cabecalho">

Neste exemplo, usamos o seletor de ID #cabecalho para aplicar estilos CSS a um elemento <div> com o ID “cabecalho”. O <div> tem uma cor de fundo amarela e uma altura de 100 pixels.

Seletores de tipo de elemento

Os seletores de tipo de elemento são usados para estilizar todos os elementos HTML de um determinado tipo. Para definir um seletor de tipo de elemento, usamos apenas o nome do elemento.

<!DOCTYPE html><html>  <head>    <title>Minha página com CSS</title>    <style>      p {        font-size: 18px;      }    </style>  </head>  <body>    <h1>Título da minha página</h1>    <p>Este é um parágrafo de texto com tamanho de fonte de 18 pixels.</p>    <p>Este é outro parágrafo de texto com tamanho de fonte de 18 pixels.</p>  </body></html>

Neste exemplo, usamos o seletor de tipo de elemento p para aplicar um tamanho de fonte de 18 pixels a todos os elementos <p> da página.

Propriedades CSS

As propriedades CSS definem como um elemento HTML deve ser exibido. Existem muitas propriedades CSS disponíveis, incluindo cores, tamanhos de fonte, posicionamento, margens, bordas e muito mais. Aqui estão algumas das propriedades CSS mais comuns:

color: define a cor do texto
background-color: define a cor de fundo
font-size: define o tamanho da fonte
font-family: define a família de fontes
font-weight: define o peso da fonte (normal, negrito, etc.)
text-align: define o alinhamento do texto
margin: define a margem ao redor de um elemento
padding: define o preenchimento dentro de um elemento
border: define a borda ao redor de um elemento

Conclusão

Neste capítulo, aprendemos o básico do CSS e como usá-lo para estilizar elementos HTML. Vimos como usar a tag <style> para adicionar estilos CSS em uma página HTML e como usar seletores CSS para aplicar estilos a elementos HTML específicos.

Também vimos algumas propriedades CSS comuns para definir cores, tamanhos de fonte, posicionamento e muito mais.

No próximo capítulo, veremos como criar layouts com CSS usando caixas e posicionamento.