CSS e HTML juntinhos!
Ok, agora que já sei como criar meu HTML e como funciona o CSS, como juntar os dois?
As 3 maneiras de inserir CSS no HTML
Folha de estilo externa
Com uma folha de estilo externa, é possível alterar a aparência de um site inteiro, alterando apenas um arquivo! O arquivo de folha de estilo externo deve ser salvo com uma extensão .css
Cada página HTML deve incluir uma referência para o arquivo de folha de estilo externa no interior do elemento <link>
. O elemento <link>
vai dentro da seção <head>
(logo acima do body):
<head>
<link rel="stylesheet" href="site.css" type="text/css">
</head>
<body>
...
Folha de estilo interna
Uma folha de estilo interna pode ser usada se uma única página e tem um estilo único.
Estilos internos são definidos dentro do elemento <style>
, dentro da seção <head>
de uma página HTML:
<head>
<style>
elemento { propriedade: valor; }
</style>
</head>
<body>
...
Estilo em linha
Um estilo em linha pode ser usado para aplicar um modelo exclusivo em um único elemento.
Para usar estilos inline, adicione o atributo de estilo style="valor"
ao elemento relevante. O atributo de estilo pode conter qualquer propriedade CSS.
Este estilo não é muito recomendado, pois pode causar re-trabalho e códigos confusos.
<h1 style="color:blue;margin-left:30px;">Título</h1>