Usando HTML com CSS

Inline

Uma das formas de se aplicar CSS a um elemento é usando o atributo style. Por ser feito usando um atributo de um elemento, esse método é chamado de inline.

<div style="padding: 20px;">Lorem ipsum</div>

Veja que é só colocar as propriedades normalmente, como se faz numa regra de CSS. No entanto, esse é o pior método. Ele é muito específico e acoplado ao elemento onde ele é aplicado. Seu uso só se justifica em alguns casos, se esse atributo for definido por meio de programação, e os outros métodos se mostrarem opções menos viáveis.

O uso do atributo style de forma direta na marcação é totalmente desaconselhado, pois esse CSS não pode ser reutilizado em outros elementos e não é escalável. Além disso, esse método usa o HTML para alterar a aparência dos elementos, sendo que o seu propósito não é esse, mas sim definir a estrutura do documento.

Folha de estilo interna

A folha de estilo interna é incorporada no documento usando o elemento <style>:

<style>
  body {
    background-color: #cc0000;
  }

  div.page-content {
    width: 960px;
  }
</style>

Veja que é só colocar as regras de CSS normalmente, como é feito em folhas de estilo externas, que são aquelas que tem arquivo próprio. É possível usar múltiplas folhas de estilo internas num mesmo documento. Basta usar um elemento <style> para cada uma delas.

Essa abordagem é melhor do que a anterior: ela facilita o reaproveitamento do estilo, embora apenas para elementos da mesma página. Porém, não dá pra cachear o CSS de forma separada do HTML.

Folha de estilo externa

A folha de estilo externa é incluída usando o elemento <link>. Esse elemento serve pra linkar recursos externos ao documento.

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

O atributo rel deve ser definido com o valor stylesheet, que informa que o tipo do link é uma folha de estilo. O href contém o caminho do link. O type é opcional, e se refere ao Mime Type do recurso linkado, que no caso é text/css.

Esse método é o melhor dos três. O CSS fica totalmente separado do HTML, em um arquivo próprio, fazendo com que ele possa ser cacheado facilmente. Isso também facilita o reaproveitamento das regras em diversos arquivos, bastando linkar o arquivo CSS que contém as regras que se quer usar.

Você pode usar o atributo media pra especificar a qual tipo de mídia a folha de estilo se aplica. Uma das aplicações mais comuns disso é criar versões para impressão de documentos. Exemplo de uso:

<link rel="stylesheet" href="page.css" media="print">