Existem 3 formas básicas de aplicar css em uma página:
Significa realizar alterações diretamente na tag do elemento a ser estilizado no código html, através do atributo chamado style.
<p style="color: #FF0000;">
Oi! A cor deste parágrafo foi mudada inline através
do atributo style na tag <p>.
</p>
Que gera este resultado:
Oi! A cor deste parágrafo foi mudada inline através
do atributo style na tag <p>.
Dentro do código html, é possível inserir uma tag de nome style que será lida apenas pelo navegador e pode conter o css de todos os elementos da página. O ideal é inserir dentro das tags <head></head>
<style type="text/css">
p.exemplo{
border: 1px dashed #00F;
}
</style>
<p class="exemplo">
Oi! A borda deste parágrafo foi mudada através da tag <code>style</code>.
</p>
Que gera o resultado:
Oi! A borda deste parágrafo foi mudada através da tag style.
A forma mais utilizada e recomendada é colocar o css em um arquivo externo que terá que ser importado, através de um link entre arquivos, para a página HTML. Podem ser usados um ou mais arquivos e essa é uma decisão de organização do projeto que deve ser realizada de acordo com a complexidade dele, você pode ter um arquivo CSS para cada tipo de template, por exemplo.
Para inserir o CSS desta maneira, você precisa indicar o caminho de onde está o arquivo. Para isso, utilizamos a elemento link, com os atributos type e rel, que indicam que o conteúdo do arquivo é uma folha de estilo em CSS, e o atributo href para indicar a localização do arquivo:
<link rel="stylesheet" type="text/css" href="caminho/arquivo.css" />
A forma mais recomendada para utilização de CSS é através de importação de arquivos externos pelos seguintes motivos: