CSS no HTML

Olhe! Estilo e cores

Texto manipulado

Cores Caixas

e mais...

Estilizando o HTML com CSS

CSS foi introduzido junto com HTML 4, para proporcionar uma melhor maneira de estilizar elementos HTML.

CSS pode ser adicionado ao código HTML nas seguintes maneiras:

Em linha - usando o atributo style nos elementos HTML
Interna - usando o <style> elemento na seção <head>
Externo - usando um arquivo CSS externo

A maneira preferida para adicionar CSS para HTML, é colocar sintaxe CSS em arquivos CSS separados.

No entanto, neste tutorial HTML, vamos apresentá-lo a CSS usando o atributo style. Isto é feito para simplificar os exemplos. Também torna mais fácil para você editar o código e experimentar por si só.

Estilos inline

Um estilo alinhado pode ser usada se um único modelo é para ser aplicada a uma única ocorrência de um elemento.

Para usar estilos inline, utilize o atributo de estilo na tag relevante. O atributo de estilo pode conter qualquer propriedade CSS. O exemplo abaixo mostra como mudar a cor do texto ea margem esquerda de um parágrafo:

<p style="color:blue;margin-left:20px;">Isto é um parágrafo.</p>

Exemplo de estilo HTML - Cor de fundo

A propriedade background-color define a cor de fundo para um elemento:

<html>

  <body style="background-color:yellow;">
    <h2 style="background-color:red;">Isto é um cabeçalho</h2>
    <p style="background-color:green;">Isto é um parágrafo.</p>
  </body>

</html>

A propriedade background-color faz o "velho" atributo bgcolor obsoleto.

Exemplo de estilo HTML - fonte, cor e tamanho

As propriedades font-family, color e font-size define o tipo de letra, cor e tamanho do texto em um elemento:

<!DOCTYPE html>
<html>
 <body>
 <h1 style="font-family:verdana;">Um título</h1>
 <p style="font-family:arial;color:red;font-size:20px;">Um parágrafo.</p>
 </body>
</html>

A propriedade font-family faz a "velha" tag <font> obsoleto.

Exemplo de estilo HTML - Alinhamento de texto

A propriedade text-align especifica o alinhamento horizontal do texto em um elemento:


<html>
 <body>
 <h1 style="text-align:center;">Cabeçalho alinhado ao centro</h1>
 <p>Isto é um parágrafo.</p>
 </body>
</html>

A propriedade text-align faz a tag <center> obsoleto.

Folha de estilo interno

Uma folha de estilo interna pode ser usada se um único documento tem um estilo único. Estilos internos são definidos na seção <head> de uma página HTML, usando a tag <style>, como este:

<head>
 <style>
 body {background-color:yellow;}
 p {color:blue;}
 </style>
</head>

Folha de estilo externa

Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando um arquivo. Cada página tem um link para a folha de estilo usando a tag <link>. A tag <link> vai dentro da seção <head>:

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

Tags de estilo no HTML

Tag	Descrição
<style>	Define informações de estilo — CSS — para o documento
<link>	Define uma ligação com um documento externo

Tags e atributos obsoletos

No HTML 4, várias tags e atributos foram utilizados para documentos de estilo. Essas marcas não são compatíveis com versões mais recentes do HTML.

Evite utilizar os elementos: <font>, <center> e <strike> e os atributos: color e bgcolor.

Total de comentários: 0