This article is currently in the process of being translated into Portuguese (~99% done).
Linking CSS to HTML
Como já foi explicado, o CSS contém informação sobre como sua marcação (normalmente HTML) deve ser apresentada para o usuário final. Isso significa que as duas linguagens devem ser lincadas junto - o navegador precisa saber que você quer combinar um pedaço de marcação em HTML com um pedaço de código em CSS. Para obter o maior nível de flexibilidade, há muitas maneiras de se realizar isso.
Aplicando CSS em uma linha específica com o atributo Style
Quase toda tag de HTML inclui o atributo "Style" e, usando esse atibuto, você pode especificar o código em CSS diretamente para o elemento. Isso acaba com uma das principais vantagens do CSS, a reusabilidade, uma vez que o código CSS aplicado desta maneira só funciona para um único elemento e não pode ser reusado em outros elementos.
Contudo, isso é uma ótima maneira de testar as coisas ou especificar regras que você não espera reusar. Aqui está como isso pode ser feito:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!</span>Note que eu posso definir muitas propriedades para o mesmo elemento, neste caso as regras para cor de texto bem como de decoração do texto. Isso é de longe a maneira mais fácil de usar o CSS, porque não envolve tags extras ou arquivos - somente CSS definido localmente. Contudo, pelas razões já citadas, esta não é a forma preferida de usar o CSS.
Outra desvantagem é o fato de que o código de estilo terá que ser baixado a cada vez que a página for requisitada. Isso não é realmente um problema para um único elemento com poucas regras de estilo, mas se você tiver um loop que vai gerar várias linhas de código com os mesmos atributos de estilo, isso vai encher seu documento de marcação sem necessidade, e ao invés de o navegador gerar um cache e só baixar o conteúdo do código uma vez por visitante, o código será baixado várias e várias vezes.
Aplicando CSS ao documento todo com blocos de estilo
A segunda forma mais fácil de aplicar CSS aos elementos no seu documento é através do uso de um bloco de estilo. O HTML inclui uma tag chamada "style", a qual pode conter código em CSS. Aqui você pode definir regras que podem então ser usadas em todo o documento. Segue um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Note como agora eu posso definir a regra em um lugar e reusar várias vezes no documento. Você pode definir múltiplos blocos de estilo, se você quiser, e colocá-los em qualquer lugar do documento que você preferir. Contudo colocar o conteúdo no início do documento, dentro da seção "head", é considerada a melhor prática.
CSS global através de documentos CSS externos
Usando o bloco de estilo, como descrito acima, você pode reusar seu código CSS em todo o documento, mas você ainda terá que incluí-lo em todas as páginas do seu website, o que requer que o navegador baixe ele em cada requisição ao invés de só baixar um arquivo CSS externo e então colocar ele em cache.
Um arquivo CSS é simplesmente um arquivo de texto simples salvo com uma extensão .css e então referenciado no(s) arquivo(s) em que você quer aplicar as regras. Se nós reusarmos o exemplo da parte do bloco de estilo, nós podemos mover a regra "highlight" para um novo arquivo (sem a parte em HTML) e salvar com um nome apropriado, por exemplo: style.css
.highlight {
color: Blue;
text-decoration: underline;
}Nós podemos referenciar ele no nosso documento HTML, usando o elemento "link".
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Este exemplo requer que os arquivos HTML e CSS estejam no mesmo diretório - se não estiverem, você precisa atualizar o atributo href para mostrar o caminho.
Agora nós definimos todo nosso código CSS no seu próprio arquivo e então referenciamos ele dentro das nossas subpáginas para tirar vantagem das regras definidas! Se você quiser, você pode dividir seu código CSS em muitos arquivos externos e só incluir aqueles que você precisar - tudo depende de quão grande é seu site e como você prefere organizar seu código.
Resumo
Neste capítulo nós falamos sobre as diferentes formas que sua página pode usar para consumir o código CSS.
A primeira abordagem foi o atributo style que é um atributo inline (na própria linha do HTML). Sua maior vantagem é o fato de ser muito fácil de usar, mas como desvantagem tira de você uma das maiores vantagens do CSS: a reusabilidade do código e a habilidade de fazer mudanças de layout em um único lugar e elas serem aplicadas em todo seu site.
A segunda abordagem usa o bloco style. É só um pouco menos incômodo de usar do que o atributo "inline style", e permite reusar seu código CSS. A maior desvantagem é que o código em um bloco "style" é global em toda a página, mas não em múltiplas páginas, o que significa que você terá que incluir em cada subpágina do seu site.
A terceira abordagem é aquele que é mais comumente vista nos sites: Arquivo de CSS externo. Só tem a desvantagem de ser um pouco mais difícel de trabalhar com ela, porque você precisa colocar o CSS em um arquivo separado que você terá que abrir para fazer as modificações - um pequeno preço a pagar pela habilidade de reusar seu CSS em todo seu site.
Por favor, esteja atento que, ao longo deste tutorial, eu vou usar principalmente a segunda e a primeira abordagem, mas só porque os exemplos mostrados neste tutorial são todos pequenos, entidades separadas e não um site grande. É simplemente muito mais fácil demonstrar as várias propriedades CSS dessa forma. Você é livre para usar a abordagem que preferir, mas se não for para pequenos exemplos e sites muito simples, a terceira abordagem é comumente a melhor forma.