TUTORIAL CSS

Tutorial CSS

Folhas de estilos em cascata — Cascading Style Sheets (CSS) — é uma ferramenta fantástica para construção do layout dos seus websites. Permite que você projete websites com uma técnica completamente diferente da convencional e possibilita uma considerável redução de tempo de trabalho. Conhecer CSS é uma necessidade para qualquer um envolvido com o projeto web.

Este tutorial iniciará você nas CSS em algumas poucas horas. É fácil de entender e ensinará a você todas as técnicas sofisticadas.

Aprender CSS é divertido. À medida em que você for progredindo no tututorial não esqueça de dedicar algum tempo para fazer seus experimentos com o que for aprendendo em cada lição.

Para usar CSS é necessário um conhecimento básico de HTML. Se você não está familiarizado com HTML, consulte nosso tutorialHTML antes de começar com CSS.

Quais softwares eu precisarei?

Por favor, evite usar softwares tais como FrontPage, DreamWeaver ou Word para acompanhar este tutorial. Softwares avançados não facilitarão seu aprendizado de CSS. Ao contrário, eles colocarão limites para você e atrasarão seu aprendizado.

Tudo o que você precisa é de um simples e gratuito editor de texto.

Por exemplo, Microsoft Windows vem com um programa chamado Notepad. Normalmente este programa está no diretório Accessories no menu Start => Programs. Alternativamente você pode usar um editor de texto similar, tal como, Pico para Linux ou Simple Text para Macintosh.

Um editor de texto simples é o ideal para o aprendizado de HTML e de CSS porque eles não afetam e nem modificam o código que você digita. Assim os acertos e erros de codificação devem-se exclusivamente a você — não ao software que você utiliza.

Você pode usar qualquer navegador parta acompanhar este tutorial. Nós aconselhamos que você mantenha seu navegador sempre atualizado e utilize a última versão disponível.

Um navegador e um editor de textos simples é tudo o que você precisa.

Vamos começar!

Lição 1: O que é CSS?

Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você saberá o que é e para que serve CSS.

CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata

O que eu posso fazer com CSS?

CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e você verá!

HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais.

Depois de estudar algumas poucas lições deste tutorial, você estará em condições de projetar uma folha de estilos, usando CSS para dar um grande visual ao seu website.

Qual é a diferença entre CSS e HTML?

HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

OK, isto soa um tanto técnico e confuso. Mas, por favor continue lendo. Tudo fará sentido em breve.

Em tempos passados quando a Madonna era virgem e um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto é um cabeçalho " ou "isto é um parágrafo" usando tags HTML tais como <h1> e <p>.

À medida que a Web ganhava popularidade, os designers começavam a sentir a necessidade de encontrar meios de construir layout para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tagsHTML tais como, por exemplo a tag <font> que se diferenciava das tags originais do HTML pelo fato de destinar-se à layout — e não à estrutura.

Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites.

CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo a separação dos estilos de apresentação da marcação dos conteúdos torna a manutenção dos sites bem mais fácil.

Quais são os benefícios do uso de CSS?

CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem:

• controle do layout de vários documentos a partir de uma simples folha de estilos;

• maior precisão no controle do layout;

• aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);

• emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

Na próxima lição veremos com maiores detalhes como funciona CSS e como começar seu estudo.

Lição 2: Como funciona CSS?

Nesta lição você aprenderá a desenvolver sua primeira folha de estilos. Você verá o básico sobre o modelo CSS e que código é necessário para usarCSS em um documento HTML.

Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML. Assim, se você está acostumado a usar HTMLpara layout irá reconhecer muitos dos códigos que usaremos. Vamos dar uma olhada em um exemplo concreto.

A sintaxe básica das CSS

Suponha que desejamos uma cor de fundo vermelha para a página web:

Usando HTML podemos fazer assim:

<body bgcolor="#FF0000">

Com

...