Há aproximadamente 3 meses me confrontei com a seguinte situação: Guilherme, ou você aprende CSS, Tableless e Padrões W3C ou está fora da nossa equipe.
Após o choque inicial fiquei pensando: Como vou aprender essa porrada de coisas em apenas uma semana? Fiquei questionando por um dia inteiro minha capacidade até que cheguei a uma conclusão: Vou pro google aprender – Grande pai, Google.
Vasculhei todas as páginas possíveis e imagináveis sobre o assunto, até que passei a entender um pouco melhor. Acho que por essa razão explanando para vocês, ok? Depois deixarei algumas referências de sites para estudos, ao menos àquelas que utilizo até hoje.
Bem, então vamos ao que interessa: Como funciona o CSS?
Quando você constrói uma página utilizando recursos html, o normal é que você defina toda a aparência em meio às linhas de código. Demonstremos um exemplo muito comum disso:
<head>
<title>Exemplo Prático</title>
</head>
<body topmargin=”0″ leftmargin=”0″ background=”tile1a.jpg”>
<p><font face=”Tahoma” size=”2″ color=”#FFFFFF”>Aplicando HTML Simples </font><br>
</body>
Neste trecho de código definimos claramente a aparência do conteúdo que será apresentado: a cor do fundo como #333333, a cor do texto, a margem superior, a margem esquerda, a imagem de fundo, a cor e tipo de fonte, além de outros bláblás.
Seguindo uma lógica, obrigatoriamente utilizaremos esse esquema em todas as páginas, repetindo o código quantas vezes forem necessárias. Imaginem a nossa dificuldade. Puta que pariu.
Se você trabalha dessa maneira, beleza, mas, analise a trabalheira: Se formos construir um portal, com aproximadamente 50 páginas. Para cada página seria necessário digitar ou copiar o mesmo código 50 vezes e para atualizar um elemento (a cor do fundo, por exemplo), seria indispensável abrir 50 páginas diferentes: um verdadeiro saco.
Para agilizar toda essa rotina e facilitar a vida dos webdesigners foi criado o CSS, que nada mais é do que um recurso que permite programar toda a aparência do site sem ter que necessariamente modificar as linhas de código html.
Vamos analisar o exemplo anterior, agora, utilizando o CSS:
<head>
<title>Exemplo Prático</title>
<link href=”css/estilo.css” rel=”stylesheet” type=”text/css” /> <!—Comentário: Chamando o recurso css para a página htmlà
</head>
<body>
<p>Aplicando o CSS numa página HTML</p>
</body>
Fim do Código html
________________________________________________
Agora, vamos criar um arquivo CSS – utilizo o Dream weaver para esse fim:
* {
margin: 0px;
padding: 0px;
}
p {
font: 12px “tahoma”;
color:”#FFFFFF”;
}
body {
background: url(tile1a.jpg);
}
Fim do Código CSS
——————————————————–
Perceberam a diferença? É praticamente a mesma coisa, só muda mesmo o posicionamento das informações. O código fica muito mais organizado porque ao invés de encher as linhas de código com dezenas de informações pertinentes à aparência, com o css você terá a possibilidade de agrupar toda essa informação em apenas um arquivo, compartilhando-o com a quantidade de links necessários (Ao invés de abrir todas as páginas criadas para alterar a imagem de fundo, por exemplo, você só precisará alterá-la uma única vez pelo arquivo css).
Legal, né? Percebeu a facilidade que o css pode trazer para a sua vida? Logicamente, o exemplo apresentado não é o único recurso disponível do CSS, mas meu objetivo com este post é apenas demonstrar como é fácil aprender o css e aplicá-lo, certo? Não tenha medo.
Se quiser aprender mais sobre o assunto, segue abaixo alguns portais que utilizo como referência sobre o assunto.
Qualquer dúvida, é só mandar.
Aquele abraço.
Guilherme Araújo
Referência:
W3C schools – http://www.w3schools.com/css/css_howto.asp
Tableless – http://www.tableless.com.br/
Html.net – http://pt-br.html.net/tutorials/css/lesson2.asp
