Tipos de folhas de estilos CSS

As definições de estilos podem ser feitas por três vias:

Folha de estilos externa — Definem-se estilos que poderão ser adotados por todas as páginas do site criando um arquivo externo que contenha o código CSS. Assim, é possível realizar simultaneamente mudanças na aparência de todas as páginas que estiverem vinculadas a esse arquivo.
Folha de estilos interna — As definições são feitas na própria página e, neste caso, só nela os estilos funcionam.
Folha de estilos inline — Os estilos são definidos em um elemento específico para funcionarem só nele.

Folhas de estilos externas

Uma folha de estilos externa é um arquivo de texto separado do arquivo HTML e deve conter apenas código CSS; nenhum outro texto pode ser inserido, nem tags HTML. O arquivo pode ser salvo com qualquer extensão, mas é interessante atribuirmos a extensão css para que saibamos que se trata de arquivo de folha de estilos.
No documento HTML, o arquivo CSS deverá ser LINKADO ou IMPORTADO de dentro do elemento <head>.
Para LINKAR uma folha de estilos usa-se a seguinte sintaxe geral:

<head>
...

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

...
</head>

Onde:

rel="stylesheet" indica que o link é feito com uma folha de estilos.
type="text/css" indica que é um arquivo de texto que contém código CSS.
href="arquivo.css" indica o nome do arquivo.
Para IMPORTAR uma folha de estilos coloca-se a linha de comando @import url(arquivo.css) entre as tags <style> e </style>. Eis a sintaxe geral:

<head>
...
<style type="text/css">
@import url("arquivo.css");
</style>
...
</head>

Onde:

type="text/css" indica que é um arquivo de texto que contém código CSS.
arquivo.css indica o nome do arquivo.

Folhas de estilos internas

Uma folha de estilos interna — também chamada de folha de estilos incorporada — é o código CSS inserido no próprio documento HTML, entre as tags <style> e </style>, dentro da seção <head>. O que se insere entre essas tags é a mesma coisa que constituiria o conteúdo do arquivo externo, caso quisesse utiliza-lo. Eis a sintaxe geral de uma folha de estilos interna:

<head>
...

<style
type="text/css">

<!--

/* código CSS */
-->
</style>
...
</head>

A aplicação do usuário (browser, por exemplo) lê as regras de estilo entre as tags <style> e </style> e formata o documento de acordo com elas.
Note-se que o código CSS foi colocado entre os símbolos de comentários HTML  (fecha comentário). Por que? Qualquer aplicação de usuártio ignora tags desconhecidas. Isso significa que um browser que não suporte estilos(browser velho) irá ignorar o elemento <style>, mas o conteúdo do elemento será mostrado na tela. Para impedir que um browser velho mostre esse conteúdo, é necessário escondê-lo através do uso da marcação de comentário do HTML.

Folhas de estilos inline

Estilos inline são aqueles que são aplicados a uma única instância de um elemento. São definidos dentro do próprio elemento, só para ele. Na tag que o introduz insere-se o atributo style e, a este, atribui-se um valor que é constituído de código CSS. Pode-se, por exemplo, definir estilos para um cabeçalho específico, para um parágrafo específico, para um link específico, etc.

<elemento style="código CSS">

A maioria dos elementos HTML pode receber o atributo style.
Os estilos inline devem ser utilizados excepcionalmente porque contrariam o propósito principal das CSS que é o de separar o conteúdo da apresentação. Na verdade, não há muita diferença entre usar o atributo style ou um atributo de formatação da linguagem HTML. Mas, de qualquer forma, é um recurso que faz parte da linguagem e muitas vezes se faz necessário o seu uso.
Observação:
Não se deve fazer confusão: o atributo style tratado aqui não tem a ver com o elemento <style> mencionado anteriormente. Apenas a palavra é a mesma.

O efeito em cascata das folhas de estilos

O efeito em cascata permite que se faça múltiplas definições de estilo incidentes sobre o mesmo elemento. Mas como se resolvem os conflitos?
Prevalece a definição mais específica. Ou seja, uma definição feita no próprio documento HTML prevalece sobre a feita no arquivo externo; uma feita para um elemento específico prevalece sobre a do documento; etc. Esta é uma característica de enorme utilidade, porque fazem-se as definições gerais e, conforme as necessidades, estabelecem-se diferenciações.
A aplicação do usuário (browser, p. ex.) faz incidirem as definições de estilo, obedecendo a seguinte ordem (o item 5 tem maior prioridade):

1	folha de estilos default da aplicação do usuário
2	folha de estilos do usuário
3	folha de estilos externa	folhas de estilos do autor
4	folha de estilos interna
5	folha de estilos inline

Dentro de cada folha de estilos, a última definição tem prioridade.

É possível, no entanto, atribuir à definição de estilo a característica especial de "importante", acrescentando a ela a declaração !important. Neste caso, essa definição suplanta as demais que tenham o mesmo alvo, idependentemente da ordem mostrada acima. Havendo conflito de definições de autor e usuário que possuam a declaração !important, prevalecerá a do usuário.

É sobre o efeito em cascata que o autor do documento concentra seu raciocíncio para encadear as folhas de estilos adequadamente.

Páginas