quarta-feira, 26 de agosto de 2009

Como incluir e aplicar CSS em uma página

Tag <style>

Este tutorial é destinado àqueles que não sabem como incluir e aplicar CSS em páginas HTML. São incluídos códigos de exemplo em HTML e CSS e, são citadas as formas possíveis de inclusão e aplicação de folhas de estilo de CSS.

Como incluir CSS em uma página

Há três formas de incluir códigos CSS em uma página:

  • Declarando o arquivo CSS externo (dentro de <head>)
  • Incluindo diretamente no cabeçalho (dentro de <head>)
  • Incluindo diretamente em uma tag (dentro de <body>)

Segue abaixo as três formas, onde "estilo.css" é o nome do arquivo de folha de estilos usado:

Primeira forma: Declarando o arquivo CSS externo (dentro de <head>)

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

Você pode especificar opcionalmente o "tipo de mídia" (chamado "Media Query") para o qual o arquivo CSS se aplica. Por exemplo, você pode querer criar um estilo mais simples que se aplica apenas a páginas impressas, economizando tinta:

<link rel="stylesheet" type="text/css" href="estilo.css" media="print" />

Também, você pode especificar mais de um tipo, separado por vírgula:

<link rel="stylesheet" type="text/css" href="estilo.css" media="print, handheld" />

Existem atualmente 10 tipos de mídia válidos, sendo os 3 primeiros compatíveis com a maioria dos navegadores.

Tipo Descrição
all Todos os dispositivos (é o padrão)
screen Telas de computadores
print Páginas impressas
handheld Dispositivos de mão, como celulares
projection Projetores
tv Televisores
braille Dispositivos táteis de braille
embossed Impressão em relevo de braille
speech Dispositivos sintetizador de voz
tty Teletipos e dispositivos portáteis de capacidade limitada

Alternativamente, pode ser declarado da seguinte maneira (o tipo de mídia é opcinal):

<style type="text/css">
@import url("estilo.css") print, handheld;
</script>

Segunda forma: Incluindo diretamente no cabeçalho (dentro de <head>)

<head>
  <style type="text/css">
  span {
    color: blue;
    background-color: black;
  }
  </style>
</head>
<body>
  <span>Usando uma folha de estilo declarada no cabeçalho.</span>
</body>

Também é possível especificar o tipo de mídia usando essa forma:

<head>
  <style type="text/css">
  @media all {
    span {
      color: blue;
      background-color: black;
    }
  }
  </style>
</head>
<body>
  <span>Usando uma folha de estilo declarada no cabeçalho.</span>
</body>

Terceira forma: Incluindo diretamente em uma tag (dentro de <body>)

<span style="color: blue; background-color: black;">
  Usando uma folha de estilo.
</span>

Como aplicar CSS em uma página

Há três formas de aplicar folhas de estilo CSS a uma página:

  • Aplicando por tag
  • Aplicando por classe
  • Aplicando por id

Primeira forma: Aplicando por tag

Código CSS:

span {
  color: blue;
  background-color: black;
}

Código HTML:

<span>Usando uma folha de estilo por tag.</span>

Segunda forma: Aplicando por classe

Código CSS:

.classe1 {
  color: blue;
  background-color: black;
}

Código HTML:

<span class="classe1">Usando a classe “classe1”.</span>

Terceira forma: Aplicando por id

Código CSS:

#id1 {
  color: blue;
  background-color: black;
}

Código HTML:

<span id="id1">Usando a id “id1”.</span>

Para saber a diferença entre classe e id, veja "Diferença entre class e id".

Ligações externas

Postagens relacionadas

0 comentários:

Postar um comentário