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>