Introdução a CSS.
As “Cascading Style Sheets” ou CSS são arquivos de texto simples contendo códigos. Estes códigos são utilizados pelos navegadores para definir como os elementos HTML serão apresentados em uma tela. Dessa forma as CSS ampliam as possibilidades de estilização e criação de Layouts que foram fornecidas nas primeiras versões do HTML.
Acima de tudo marcações HTML não são destinadas a dar forma visual as informações, mas a definir o conteúdo de um documento. Além disso a adição da tag <font> e também dos atributos de cor acabaram por criar um pesadelo de criação e manutenção. Por exemplo, era necessário formatar cada página ou parágrafo individualmente, o trabalho era tedioso, demorado, caro e consequentemente criava muitos erros.
A partir do lançamento dos navegadores que atendiam a versão 4.0 do HTML enfim a formatação visual foi removida e colocada em um arquivo separado, o arquivo CSS. Com esta melhoria o processo de criação e manutenção das telas pode ser otimizado. Então existem três maneiras de inserir formatação CSS em um arquivo HTML:
Atributo STYLE
A primeira forma de inserir código CSS em um arquivo HTML é utilizar um atributo STYLE dentro de uma tag HTML.
<p style="color: #000; font-size: 20px;">
Olá! Sou um exemplo de texto. :))
</p>
Tenha em mente entretanto que a grande vantagens do CSS é manter as regras de estilo fora do HTML. Ao usar o atributo STYLE não estamos fazendo isso, a cada utilização da tag de parágrafo <p> será necessário repetir o código de formatação e como resultado incrementar o tempo de codificação de cada página e consequentemente o trabalho.
Tag STYLE
Utilizando uma tag STYLE no cabeçalho HTML as propriedades CSS devem ser declaradas indicando qual elemento do documento estão fazendo referência. Para realizar tal manobra é necessário então utilizar um seletor CSS, uma forma de procurar e selecionar quais elementos da página receberão os estilos visuais.
Os blocos de declaração CSS contém uma ou mais declarações separadas por ponto e vírgula. As declarações incluem o nome de uma propriedade e logo depois um valor, separados por dois pontos. Confira no exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Custom validator</title>
<style>
h1 {
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<h1>Meu primeiro título formatado por CSS</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
Arquivo Externo
A terceira e igualmente mais adequada forma de aplicarmos os estilos em um documento HTML é através de um arquivo externo com a extensão CSS. Arquivos de estilos devem conter apenas códigos de estilos e comentários, mas nenhuma outra linguagem.
<head>
<title> Target CodeShop( ); </title>
.
.
.
<link href="index.css" rel="stylesheet" />
</head>
