Ilustração - Alex Koti Portfolio.Estilo infantil e cartoon [ Illustration, cartoon and children books ]

As vantagens de se usar CSS

• 1-O que é CSS?
• 2-Como o CSS é usado atualmente
• 3-Outros recursos
• 4-Padrões
• 5-Com ou sem CSS?
• 6-Tableless
• 7-Links

Veja também: CSS interativo Zen Garden:Golden Leaves

1-O que é CSS?

É a sigla para cascading style sheets (folhas de estilo em cascata).Simplesmente é um código texto que comanda a aparência de uma página HTML.Ele pode ser inserido dentro da página na parte head ou ser "chamado" para dentro dela.

Ela funciona como um criador de regras para exibição das tags.Por exemplo, eu escolhi que todos os cabeçalhos h2 desta página fiquem na fonte verdana, com 14 pixels de tamanho e cor marrom (#996633).Essa regra é dita apenas uma vez, de forma que agora todos os cabeçalhos h2 que a página tiver aparecerão desta mesma forma.Agora imagina colocar todas essas descrições manualmente em cada tag?Seria um inferno, além do que, o código ficaria bem maior.

Exemplo:

Assim ficaria do jeito normal:

	<h2><font color="#996633" size="4" face="Verdana">este 
	é um cabeçalho tamanho 2 </font></h2>
	

Você teria que colocar a tag font em todos os cabeçalhos.Aí vem a questão: quantos cabeçalhos h2 seu site tem?E quando quiser mudá-los?Sim, seria um inferno.

Vejamos como fica usando CSS:

h2{
		font-size:14px verdana;
		color:#996633;
	}

Colocando esse código no head do documento, todas as tags h2 ficarão como descrito, não é preciso acrescentar mais nada.Viu só a quantidade de código que economizou?

A aplicação se extende a todos os objetos dentro do body, parágrafos, tabelas, blocos de texto, links, qualquer coisa.É possível também criar mais opções adicionando id e class aos objetos.Uma tag h2 é diferente de uma h2 com o id="dois".

O melhor é que você pode criar um único arquivo externo e vincular à todas as páginas do seu site, ou seja, uma alteração é feita nesse arquivo e todas as páginas a ele relacionadas são modificadas também.

Mas este texto não é um tutorial, para isso coloquei uns links bem legais no final.O que quero mostrar são as vantagens do uso CSS em todas as suas possibilidades.

voltar ao topo

2-Como o CSS é usado atualmente

Hoje quase todo mundo usa CSS, mesmo que de forma limitada, principalmente no controle de fonte.Embora muitos usuários não saibam, muitos blogs são controlados por CSS.

A maioria definem apenas a fonte da página e a cor dos links:

voltar ao topo

3-Outros recursos

Mas se limitar apenas ao controle de fonte deixa de fora muita coisa que é possível fazer, principalmente na formatação do conteúdo, o layout da página.

Uma coisa muito útil são as propriedades de bloco:

O código em CSS fica assim:

	#exe_box{
		padding:15px;
		background:#FFF8EF;
		margin-left:20px;
		width:250px;
		border:3px double #996633;
	}
	

Agora tente fazer o mesmo usando tabelas...seria bem mais complicado, chato de fazer e difícil de modificar depois.

Outra coisa muito útil é disposição das imagens na página.Para colocar um conjunto de miniaturas lado a lado, mas com espaço entre elas, normalmente se usaria uma tabela, uma tag complicada, de código pesado e sujeita a muitos erros de exibição:

E o código fica assim:

<table width="165" height="112" border="0" cellpadding="0" cellspacing="6" summary="lista de imagens">
		<tr>
			<td width="55" height="55"><img src="mini/cerveja_t.gif" width="55" height="55"></td>
			<td width="75"><img src="mini/gangstaliens_t.gif" width="55" height="55"></td>
			<td width="66"><img src="mini/flor_aquatica_t.gif" width="55" height="55"></td>
		</tr>
		<tr>
			<td><img src="mini/insetnoia_t.gif" width="55" height="55"></td>
			<td><img src="mini/palhaco_t.gif" width="55" height="55"></td>
			<td><img src="mini/sketche_03_t.gif" width="55" height="55"></td>
		</tr>
	</table>

Agora vejamos com CSS:

Fica assim:

.exe_img_lista{
		width:191px;
		padding:3px;
	}
	.exe_img_lista img{
		margin:3px
	}
	
	<div class="exe_img_lista">
		<img src="imagens/01.gif" width="55"height="55">
		<img src="imagens/02.gif" width="55" height="55">
		<img src="imagens/03.gif" width="55" height="55"><br>
		<img src="imagens/04.gif" width="55" height="55">
		<img src="imagens/05.gif" width="55" height="55">
		<img src="imagens/06.gif" width="55" height="55">
	</div>
	

Além de um código mais fácil de manipular, se houvessem mais caixas de imagens semelhantes, todas elas poderiam ser controladas por esse mesmo comando.Bastando para isso atribuir a classe (class) "exe_img_lista" aos objetos.

É possível também criar links e menus em forma de botão, coisa que antes só era possível usando imagens:

	#link_especial a{
		background:#E5A96D;
		padding:5px;
		border-top:2px solid #FFFFFF;
		border-right:2px solid #996633;
		border-bottom:2px solid #996633;
		border-left:2px solid #FFFFFF;
		text-decoration:none;
	}
	#link_especial a:hover{
		background:#F5C676;
		color:#FDE8CD;
	}
	#link_especial a:active{
		border-top:2px solid #996633;
		border-right:2px solid #FFFFFF;
		border-bottom:2px solid #FFFFFF;
		border-left:2px solid #996633;
	}

	#exe_links_especiais a{
		width:130px;
		background:#F5C676;
		margin:2px;
		padding:5px 10px 3px 10px;
		display:block;
		text-align:center;
		text-decoration:none;
	}
	#exe_links_especiais a:hover{
		color:#FDE8CD;
		background:#EFB859;
	}

voltar ao topo

4-Padrões

O uso dessa tecnologia, porém, tem algumas desvantagens.Alguns anos atrás, os fabricantes de navegadores competiam entre si, cada um procurando à sua maneira implementar novos recursos, mas que funcionavam apenas naqueles navegadores.Isso criava um problema muito grande para os designers, que devido à falta de padrões, viam suas páginas perfeitas em um navegador, e arruinadas em outro.

Hoje o problema ainda existe, embora bastante minimizado, devido aos padrões impostos pelo W3C, órgão internacional que regulamenta as tecnologias para internet.Vários fabricantes já adotam totalmente ou grande parte desse padrões, o único que ainda insiste em criar padrões exclusivos é a Microsoft, a marca que tem o maior número de usuários com seu Internet Explorer, o que acaba dificultando o progresso da web e o desenvolvimento de páginas que possam ser visualizadas corretamente em qualquer navegador.

voltar ao topo

5-Com ou sem CSS?

Ainda não está convencido das vantagens de se usar CSS?Coloquei abaixo um link para essa mesma página, com a única diferença que ela está sem a vincução com as folhas de estilo:
página sem css

Bem diferente, não é mesmo?

voltar ao topo

6-Tableless

Tableless é um metodo de criar páginas usando formatção CSS para a diagramação da página.Ou seja você cria primeiro todo o conteúdo que seu site vai ter, sem se preocupar com o layout, que será feito separado.O nome tableless vem de sem tabelas, diagramar a página sem o uso delas.Isso não significa nunca mais usar tabelas, mas sim usá-las para o propósito que foram criadas, mostrar dados tabulados.

Outra coisa também é procurar criar uma página semântica, ou seja, que usa as tags de maneira correta, com títulos em h1, h4, etc, abreviaturas com acronym, endereços com address, colocar titles ou alts nas imagens.Isso cria uma página mais fácil de ser identificada pelos mecanismos de busca.Um computador considera todas as palavras meros conjuntos de letras.Se ela estiver dentro de uma tag address, ele já sabe que aquilo é um endereço, o mesmo ocorrendo com as outras tags.

Um site muito interessante é o Zen Garden.Ele tem como objetivo difundir o uso do CSS.Possui uma seção com links para várias versões de formatação criadas por pessoas do mundo inteiro.Eu mesmo criei uma versão minha: Zen Garden:Golden Leaves

Ela foi selecionada para lista de de designs minimal do zengarden.

voltar ao topo

7-Links

Para quem se interessou e quer aprender mais sobre CSS, coloquei alguns links muito úteis:

• CSS Tutorial feito pelo W3C, órgão regulamentador de linguagem para web.Tem listados todas as propriedades css e seus valores, é referência obrigatória.
• Tableless site brasileiro especializado em tableless.Tem fóruns, artigos e tutoriais.
• CSS para webdesign outro em tableless, tem vários tutoriais muito úteis.
• CSS Zen Garden também feito com tableless, inclui várias "skins", criadas em css por pessoas do mundo inteiro, para a pessoa escolher.

voltar ao topo