Este documento fornece uma introdução ao CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata), explicando que ele é usado para adicionar estilos como fontes, cores e espaçamentos aos documentos da Web. O CSS é normalizado pelo W3C e trabalha em conjunto com HTML para estruturar e estilizar páginas da Web. A página CSS Zen Garden demonstra como o mesmo código HTML pode ter designs completamente diferentes aplicando diferentes folhas de estilo CSS.
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....