Este documento apresenta uma introdução ao CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata), explicando que CSS é uma tecnologia padrão para adicionar estilos como fontes, cores e espaçamentos a documentos web. O documento também discute como HTML é usado para estruturar conteúdo enquanto CSS controla o visual e layout, e fornece exemplos como a página CSS Zen Garden para ilustrar como CSS permite alterar a aparência de uma página sem alterar seu conteúdo.

1. Introdução CSS
Style Sheet
Professor: Jolvani
Aula 01

2. Style Sheet CSS

Este é mais um curso, aulas para Vc. Estas são
as aulas de CSS que vai tornar a sua vida, no
mundo Web, muito mais colorido como a
imagem.

Mas o que é CSS?

Vamos abrir nosso browser e ver na prática
www.w3c.org

CSS é uma abreviação do termo inglês
Cascading style sheet – Folha de estilos em
cascata.

Folha de estilos em cascata é um mecanismo
simples pra adicionar estilos (fontes, cores,
espaçamentos) aos documentos Web.

3. Style Sheet CSS

Então CSS é mais uma tecnologia que vimos
aqui que são normatizadas pelo consórcio
W3C

Logo no início vemos o html e CSS como a
base e a estrutura das aplicações Web.

Os dois aparecem juntos, inclusive aprender
CSS tem como pré-requisito o conhecimento
de html.

Ou seja, para ser um bom programador de
interface vc precisa conhecer as duas
tecnologias....

Na w3schools nos encontramos as referencias
e tutorias html, css, css3, outros scripts...

4. Style Sheet CSS

Por enquanto o CSS é o mais utilizado e suportado
pelos diferentes tipos de browsers, pois o CSS3
apesar de oferecer recursos poderosos não é
suportado por todos os browsers...

Nas aulas xhtml descobrimos que ele deve ser
usado somente para estruturar o nosso conteúdo,
somente para fazer as marcações semânticas...

E o visual, o estilo de nossa página, fica por conta
do css, essa é a grande “casada” do mundo web

Então quando a gente vê um portal como a
w3schools por exemplo ou W3C, esse design, esse
layout, essas cores são definidas por uma folha de
estilos que centraliza toda a construção desse
layout.

5. Style Sheet CSS

Cada browser pode exibir ou não o css... Vamos
fazer um teste e visualizar somente o html...

Dessa forma que foi construído o html dessa
página veja que não é nada amigável (bonito)...

Possibilidades que envolvem o css2, como o css3
não é suportado em todos os browser usar o css2
possibilita que todas as páginas criadas rodam em
todos os browsers...

A página css zen Garden é onde designers do
mundo inteiro criam css e aplicam a essa pagina.

Vamos a página www.csszengarden.com

6. Style Sheet CSS

Nela podemos definir outro estilo selecionando ao lado
direito, altere e observe a diferença...

Veja toda estrutura diferente, todo layout diferente,
aplicado a mesma pagina, até parece outra pagina...

Parece que navegamos em portais diferentes...

Continuem navegando e percebam a flexibilidade que
possuímos em alterar layout, estilo visual sem mexer
nada no código html...

7. Style Sheet CSS

Existem muitas paginas que falam sobre css como
cssmaina, apresentando vários projetos para a
construção de portais com recursos css

Também o portal tableless encontramos sobre html e css

Lembrando o html é usado para estruturar suas paginas
e o css é usado para apresentar visualmente aquela
página, então até a próxima aula....

8. Próxima Aula: Sintaxe CSS