CSS - O que é e para que serve

Este é o tutorial inicial sobre CSS.
Se está aqui, partimos do pressuposto que você estudou todos os outros tutoriais sobre o 'basicão' HTML 4.

Embora muitas tags e ferramentas do antigo HTML já estejam em desuso, é de total importância que tenha-o estudado e criado, na mão, diversos sites em HTML, escrevendo cada letra de seu código-fonte.

Um estudo bem feito do antigo conceito de HTML fará você entender e evoluir com uma facilidade maior pelos caminhos do belo e útil CSS

Obtenha seu certificado de Webmaster!

De onde veio o CSS

No último artigo de nossa seção sobre frames em HTML, criamos um site 'na unha', com frames no cabeçalho, menu e no rodapé (além do frame onde fica o conteúdo das páginas), veja:
Frames aninhados - Criando um site completo com frames

Embora o uso de frames já reduza bastante o número de linhas de um código HTML, pois temos documentos fixos sendo exibidos, para cada página que vamos exibir temos que definir atributos para alinhar, definir cores, background, tamanho da fonte, tags de cabeçalho (H1, H2, ..., H6) e zilhões de tags e ferramentas que vimos no decorrer do nosso curso de HTML

E o teríamos que fazer caso fosse necessário criar mais 10 páginas?
Repetir boa parte do código, para definir layout, fontes, tamanhos, posicionamento e tudo mais que deve existir em cada página. Sim, tudo de novo, boa parte do código é a mesma.

Imagine repetir isso para o caso de dezenas de milhares de páginas, como é o caso da globo.com ?
Acredite, até há pouco tempo isso era feito. Muito código era repetido e repetido, para deixar todas as páginas com o mesmo estilo, com a mesma 'cara'.

E é aí que entra o CSS. Ele veio pra pôr um fim nessa repetição de código, nesse trabalho maçante e manual que assombrou gerações de webmasters no decorrer das duas décadas passadas.

CSS - O que é um estilo

Como você se veste?
Que tipo de música gosta de ouvir?
Quais ramos e profissões que admira ?
Qual sua posição política?

Ao responder tudo isso, vai estar respondendo uma única pergunta: qual seu estilo?
Ou seja, um estilo nada mais é que um conjunto de características que definem algo, ou alguém.
E é a mesma coisa para HTML, CSS e tudo mais no mundo do desenvolvimento Web.

Sim, os sites também tem seu estilo.
Veja o nosso, temos o nome do site lá em cima, em todas as páginas você sempre vai ver dois menus nas laterais e um rodapé com publicidade.
Os títulos de nossos tutorais tem a mesma fonte e tamanho.
Essa é a nossa cara, nosso estilo.

O Globo.com também tem. Veja que a primeira notícia é sempre maior, tem uma seção sobre novelas, outra sobre famosos, uma parte só falando de esportes.
Lá em cima, no topo do site, tem uma série de links para diversas seções do site.

Resumindo: o estilo é o mesmo, essas características se repetem, fazem parte do site.
Ora, se são constantes, pra que ficar repetindo código, escrevendo de novo a mesma coisa?


Como funciona o CSS

O CSS nada mais é que uma folha de estilo.
Um documento que vai conter todos os detalhes, declarações e código que vão definir como vai ser o estilo, o style de nosso site.

É como se ele fosse um documento que dissesse:
"Hey, navegador, exiba o título das postagens com tamanho 20px e cor azul na home do site.
Caso o usuário clique no tutorial, o nome do título vai ter 25px e cor azul mais escura."

"Os links vão sempre ser azuis, mas se ele clicar, vai ser tornar vermelho ok?
Ah, sempre que ele passar o mouse sobre os botões, mude de cor."

"Browser, dê um espaçamento maior entre os parágrafos. Um espaçamento de dois enters
A largura do artigo é de 600px. Claro, se ele estiver no desktop.
Se for um usuário mobile, diminua para 100px."

Pronto. Criamos um conjunto de regras, de detalhes universais que todas as páginas de meu site obedecem. Essa vai ser minha folha de estilo, minha CSS.

Agora eu posso simplesmente criar o conteúdo do meu site.
Escrevo o texto, boto as imagens, os títulos, faço tudo sem preocupação.
O conteúdo é eu que crio.

Em seguida, temos o grande truque da ideia por trás do CSS.
Seu documento HTML vai ter uma ligação com seu documento CSS.
É como se houvesse uma comunicação entre o HTML e o CSS:
"Hey CSS, meu conteúdo tá pronto. Vem aqui botar o estilo, cores, fontes e detalhes".
E tá feito.





Qual a utilidade do CSS

Depois de estudar, conhecer, usar e abusar do CSS você vai se perguntar:
"Como a humanidade viveu tanto tempo sem CSS ?"
Pois é uma ideia absurdamente simples, genial e que tornou os webmasters bem mais eficientes.

O CSS poupa tempo, nos torna mais flexíveis.
Nos permite fazer coisas que levariam horas e horas de trabalho manual (e isso de fato acontecia, até bem pouco tempo atrás).

Como dissemos, precisamos definir uma única vez nosso estilo e características.
Depois é só criar o conteúdo, sem medo de ser feliz.
O HTML vai se ligar ao CSS, e sua página já sairá prontinha, estilizada do jeito que você quiser.

Vamos dar o exemplo do espaçamento.
Você decidiu que sempre que, no conteúdo, houve um parágrafo, este parágrafo vai ter um tamanho maior, o dobro do convencional.
Ok, faça seu conteúdo com seu parágrafo, que na hora de exibir o conteúdo o CSS vai aumentar essa margem.

Você poderia fazer isso sem CSS, poderia usar dois parágrafos ou dar uma quebra de linha com <br />, sem problemas.
Mas vamos supor que depois de alguns meses você notou que o design de seu site estava horrível, esse espaço estava muito grande, ocupando muito a tela de aparelhos celulares, por exemplo.

O que vai fazer? Reduzir esse espaçamento entre os parágrafos ué.
Se estiver usando CSS, mude apenas esse trecho do estilo (vai mudar somente um número), e TODAS as páginas irão ser exibidas com o espaçamento novo.

E se não tiver usado CSS ?
Diga adeus ao seu final de semana, pois vai ter que mudar cada parágrafo de cada uma de suas páginas.
E se for um site grande, como o da UOL que publica centenas de páginas novas por dia?
Nem queira imaginar o quão sombria era a internet sem o CSS...

6 comentários:

Anônimo disse...

Até que enfim uma perfeita definição do que é e para que serve o CSS! Muito obrigado!

Carol S Guerra disse...

Ótima explicação, muito bom!

Jeferson Nicolau disse...

Excelente texto. Claro, conciso e objetivo.
Obrigado

Jennifer Silva disse...

ÓTIMO TEXTO.

Anônimo disse...

Explicação perfeita!!! Ah se todas fossem com essa clareza! Parabéns ao criador do post.

Info Sertão disse...

Ótimo