Aulas
Disciplinas

Cursos / Informática para Internet / Autoria Web / Aula

arrow_back Aula 01 - Linguagens e Ferramentas para o Desenvolvimento Web

Uma visão geral de CSS

CSS significa Folhas de Estilo em Cascata (Cascading Style Sheets). Tais estilos são escritos em um arquivo com extensão CSS e definem como mostrar os elementos HTML. Eles foram adicionados ao HTML 4.0 para separar a estrutura do conteúdo de sua forma de apresentação, por exemplo, um CSS indicaria o tipo de fonte, tamanho e cor do texto, enquanto o HTML indicaria o texto em si.

Sendo assim, CSS é usado em conjunto com (X)HTML. (X)HTML para estruturar o conteúdo e CSS para apresentar tal conteúdo. Mas você deve estar se perguntando: “Por que separar estrutura e apresentação? Por que ter que aprender mais uma linguagem?”

Basicamente, por dois motivos principais, descritos a seguir.

  1. O conteúdo de uma página deve ser atualizado continuamente, ou se tornará defasado ou desinteressante rapidamente. Com a separação de conteúdo e apresentação, quem mantém o site pode se dedicar inteiramente à geração de conteúdo e não perder tempo com a formatação.
  2. Porque, geralmente, o mesmo conteúdo deve ser mostrado de maneiras diferentes. Ou seja, um mesmo conteúdo pode ser apresentado em diferentes estilos. Vamos ver um exemplo? As figuras abaixo utilizam layouts bem diferentes, mas apresentam o mesmo conteúdo. Este site trata sobre CSS e estilos disponíveis para download <http://www.csszengarden.com/>.

Visite o site <http://www.mezzoblue.com/zengarden/alldesigns/> e navegue pelos diversos layouts diferentes. Ao final desta disciplina, você será capaz de desenvolver páginas com esse nível de qualidade.

Interface do browser apresentando estilos.

Assim, a utilização de CSS pode diminuir a quantidade de trabalho em atualização de um website, já que é necessário modificar apenas o HTML, se você deseja modificar o conteúdo. Se você deseja modificar a aparência dos elementos, você tem que modificar apenas o CSS que define aquele estilo. Atualmente, todos os browsers dão suporte a CSS.

Na Figura 9, ilustramos um exemplo bem simples de código CSS. Nesse exemplo, o código foi inserido no próprio arquivo html, dentro da tag de cabeçalho, <head> e </head>, e entre as tags <style> e </style>. Nesse código CSS, há formatação para as tags <body>, <h1> e <p>. Você pode identificá-las antes das 3 chaves abrindo “{”. Para a tag <body>, é definida apenas uma cor para o fundo, nesse caso, azul claro, como indicado pela palavra-chave escrita depois da palavra background-color. Também é possível utilizar códigos hexadecimais para as cores definidas. Para a tag <h1>, é especificada uma cor, verde, e o tipo de alinhamento, nesse caso, centralizado. E para a tag <p> é definido o tipo e o tamanho da fonte. Com isso, todos os parágrafos marcados com a tag <p> e títulos marcados com a tag <h1> existentes nesse documento html serão formatados da mesma maneira. Faça um teste!

Interface do browser mostrando um exemplo de CSS

No exemplo acima foi utilizado o site http://www.w3schools.com/css/tryit.asp?filename=trycss_default.

CSS3 é a última especificação, ainda em desenvolvimento pela W3C, da linguagem de estilo CSS. Ela é totalmente compatível com as versões anteriores por ser baseadas em módulos, estes módulos adicionam novas características definidas em outras versões. Muitas das novas propriedades do CSS3 são implementadas nos navegadores atuais. Novas propriedades para bordas, planos de fundo, cores, texto entre outros foram adicionados ao CSS3. Ao longo das próximas aulas, destacaremos algumas delas.

Versão 5.3 - Todos os Direitos reservados