Como incluir CSS no HTML: Guia com exemplos
A aparência de um site é tão importante quanto o seu conteúdo. A linguagem CSS (Cascading style sheet) é geralmente usada para formatar elementos escritos em HTML, ou seja, ela define atributos como o layout, as cores e as formas desses elementos. Instruções de design CSS existem de forma independente do HTML e também devem ser integradas ao documento eletrônico.
Hospedagem web com consultor pessoal
Rápido e escalável, confie na hospedagem da IONOS, que inclui domínio grátis no primeiro ano e endereço de e-mail!
Métodos para incluir CSS no HTML
É possível incluir CSS no HTML usando style sheets internas ou externas. Nas style sheets internas, as instruções CSS estão localizadas dentro do documento HTML. Então, você pode integrar a CSS no início de um arquivo HTML ou colocá-la no código-fonte. Nesse método, ter conhecimentos básicos sobre HTML e sobre sua sintaxe é uma grande vantagem. O jeito mais comum e simples de desenvolver sites é usando style sheets de CSS externos: o CSS é integrado por meio da “linkagem” do documento HTML a um arquivo CSS externo. A seguir especificaremos os três métodos:
- Estilo inline, diretamente no código-fonte
- No início do documento HTML
- Terceirizado a um arquivo CSS interno
O Website Builder da IONOS disponibiliza uma grande variedade de templates para que você crie um site com aspecto profissional.
Incluir CSS no HTML com estilo inline
Nesse método, as instruções de design são integradas diretamente ao código-fonte, por meio da tag style. As propriedades desejadas são atribuídas a um único elemento, assim, designs diferentes podem ser utilizados ao longo do documento HTML. No exemplo abaixo, o título h1 será exibido na cor azul, com fonte tamanho 14:
<h1 style="color:blue; font-size:14px;">Digite aqui o título</h1>
O CSS perde muitas de suas vantagens com esse tipo de integração. Por exemplo, a opção de definir um único comando para ser aplicado a múltiplos elementos do documento HTML não é suportada. Em alguns casos, esforços de manutenção tendem a ser maiores, já que intervenções diretas no código HTML fazem parte do processo.
Adicionar CSS no início do HTML
Nesse método, você insere o CSS no cabeçalho do seu documento HTML. A tag style se torna parte do elemento head e aplica-se a todo o arquivo. As instruções de design são contidas pelo documento, mas permanecem separadas do código HTML. No exemplo abaixo, usamos o mesmo comando aplicado anteriormente. No entanto, desta vez, todos os títulos h1 do arquivo serão formatados de acordo com essa instrução.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1>Digite aqui o título</h1>
<p>Digite aqui o parágrafo</p>
</body>
</html>
Incluir CSS no HTML com um arquivo externo
Provavelmente, este é o melhor método para incluir CSS no HTML. Normalmente, um site é composto por várias páginas. Por isso, faz sentido salvar as instruções de design em um arquivo separado. Uma separação clara entre o conteúdo e o design de um site facilita a manutenção. O arquivo exportado só precisa ser linkado ao documento HTML. Salve a style sheet externa com a extensão .css e use a tag link para inclui-la no seu arquivo HTML. No exemplo a seguir, o arquivo CSS é nomeado stylesheet.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Digite aqui o título</h1>
<p>Digite aqui o parágrafo</p>
</body>
</html>
O atributo rel define o tipo de relação lógica enquanto o atributo href se refere ao arquivo CSS a ser inserido. Observe que o elemento link também pode assumir outros atributos. Por exemplo, ao inserir o atributo media = “print” você especifica que a stylesheet só deve ser usada para visualizar a impressão. Uma stylesheet externa não contém nenhuma tag HTML, somente o respectivo seletor e as chaves com as declarações, conforme observado no exemplo abaixo:
h1 {
color: blue;
font-size:14px;
}
Descubra os melhores truques de CSS para otimizar o design do seu projeto web ou confie seu site ao MyWebsite Design Service da IONOS para obter resultados profissionais.