CSS pra quem nunca viu

18 de março de 2010 Comente! Follow me!

Claro que existem pessoas que estudam (ou trabalham com) computação e não conhecem CSS [bb] . Talvez o foco é outro (bem) distante de web ou há algum motivo para continuar a estilização via HTML. Vou tentar ser o mais direto possível, pois meu objetivo aqui é mostrar o básico através de exemplos.

Neste tutorial vamos construir uma área de artigos na qual cada uma da lista contém um título, uma imagem e o texto. O exemplo final será parecido com isso:

Exemplo final

Clique para ampliar

Obs.: O texto foi gerado com o famoso Lorem Lipsum.

Definição

CSS – Cascading Style Sheet (folhas de estilo) – é uma linguagem para atribuir forma visual – estilo, formas, cores e tamanhos – a elementos usados na linguagem de marcação (HTML [bb] , XHTML e XML [bb] são exemplos).

Sintaxe básica

1
2
3

seletor {
	propriedade: valor;
}

O ” ; ” (ponto-vírgula) é opcional na última propriedade.

CSS em ação

Veja como atua o CSS aplicado ao HTML na página descrita abaixo.

Primeiro o HTML

O HTML é da seguinte estrutura:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="pt-BR">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Título da minha lista de artigos</title>
</head>
 
<body>
 
<div id="geral">
 
	<div id="topo">
		<h1><a href="#" title="Ir para a página inicial">Minha página</a></h1>
		<h2>Uma descrição do site.</h2>
	</div>
 
	<div id="conteudo">
 
		<div class="noticia">
			<h3 class="chamada">Título do primeiro artigo</h3>
			<img src="img1.jpg" alt="img1" title="Primeira imagem" />
			<p>Texto da notícia aqui.</p>
			<a href="#" title="Continuar lendo esta notícia">Leia na íntegra</a>
		</div>
 
		<div class="noticia">
			<h3 class="chamada">Título do segundo artigo</h3>
			<img src="img2.jpg" alt="img2" title="Segunda imagem" />
			<p>Texto da outra notícia.</p>
			<a href="#" title="Continuar lendo esta notícia">Leia na íntegra</a>
		</div>
 
	</div>
 
</div>
 
<div id="rodape">
	<p>Todos os direitos reservados.</p>
</div>
 
</body>
</html>

No HTML, usa-se os atributos ID e CLASS. Observe isso em div id e em h3 class.

Explicação do HTML

Dentro do head chamamos o arquivo estilo.css, que contém toda a estilização. Essa forma de aplicar o CSS é denominada “externa“, que pode ser lido no próximo item deste post.

A div #geral foi criada para englobar toda a página e definir uma largura geral.
A div #topo somente para conter o título da página.
A div #conteudo é onde ficam os artigos. Cada artigo é colocado dentro de uma div .noticia (com a CLASS noticia).
Dentro de cada div .noticia temos: o título do artigo dentro de um H3, o subtítulo em um H4, uma imagem e o texto em parágrafos. No final de cada artigo há um link permanente para a leitura completa.
Depois há uma div #rodape para conter informações de copyright e etc.

Maneiras de aplicar CSS ao HTML

1) Externo: todo o CSS fica em um arquivo (com extensão .css) separado do HTML. É chamado entre as tags head da seguinte maneira:

1
2
3

<head>
	<link rel=”stylesheet” type=”text/css” href=”estilo.css” />
</head>

2) Interno: tag style dentro do head.

<head>
	<style type=”text/css”>
		Seletor { propriedade: atributo }
	</style>
</head>

3) Inline: aplica a(s) propriedade(s) somente a um determinado elemento, usando o atributo style do HTML.

1 2	<p style=”color:blue”>Parágrafo com fonte azul.</p> <p>Esse outro parágrafo não é azul, a não ser que exista <span style="color: #FF0">CSS em outro lugar</span>.</p>

Diferença entre ID e CLASS

É tão trivial que muita gente erra nisso.

ID # (tralha) = deve ser único, usado em apenas um elemento
CLASS . (ponto) = número ilimitado de elementos

Por exemplo:

body {
	background: white;
}
#conteudo {
	background: #000;
	color: #000000;
}
.chamada {
	text-transform: uppercase;
	color: #FF6600;
}

O que fizemos:

1) O primeiro seletor (body) vai definir o fundo branco para toda a página. Como ele não tem atributo no HTML, o CSS referencia apenas com o nome da tag.
2) #conteudo para estilizar a div cujo ID é conteudo. Poderiamos usar tambem div#conteudo.
3) O terceiro elemento pode aparecer várias vezes na página. Portanto, usamos class.

Explicação do CSS

@import url("reset.css");
 
body { background: #fde7d1 url(bg.png) repeat-y top center; font-family: Arial, Helvetica, sans-serif }
 
a { color: #8B6914; padding: 2px 4px; }
a:hover { background: #8B6914; color: #fff; text-decoration: none }
 
p { margin-bottom: 15px; }
 
#geral { width: 580px; margin: 0 auto }
 
#topo { padding-top: 10px }
#topo h1 a { padding: 5px 0; font-size: 220%; text-decoration: none }
 
#conteudo .noticia { border-bottom: 1px solid #ddd; padding-bottom: 10px; }
#conteudo .noticia .chamada { font-size: 200%; margin-top: 20px }
#conteudo .noticia .subtitulo { color: #666; font-style: italic; margin: 10px 0 }
#conteudo .noticia img { float: left; margin: 5px 15px 15px 0 }
#conteudo .noticia p { text-align: justify }
#conteudo .noticia p.direita { text-align: right }
 
#rodape { margin-top: 30px; text-align: right }

A primeira linha importa o arquivo reset.css pelo Erick Meyer. Leia mais sobre @import no site do Maujor.

Depois definimos o fundo da página e a família de fontes a ser usada. O fundo da página (bg.png) é uma imagem de apenas 2px de altura para economizar banda, pois a imagem se repete verticalmente (repeat-y). Para estilizar os links em estado normal e ao posicionar o mouse sobre eles usamos a e a:hover, respectivamente.

A div #geral tem a largura da área branca da imagem de fundo menos um tamanho lateral para espaçar um pouco das bordas. Para centralizar, basta definir margin-left: auto e margin-right: auto ou margin: X auto (x é a distância do topo e da base; é zero no nosso exemplo).

Um ponto importante é quanto ao uso do float. Como nosso exemplo é de apenas uma coluna, não usamos float em 2 divs de modo que fiquem lado a lado. Mas o float: left foi usado (na linha 18) nas imagens dos artigos. Com ele, a imagem flutua (óbvio) para esquerda, fazendo com que o texto se “esparrame” pelos lados da imagem. O margin é interessante para fazer com que o texto não fique grudado na imagem.

Este post é apenas uma introdução bem superficial de desenvolvimento web. O intuito é despertar o interesse de quem ainda não usa/conhece o CSS. Deixe seu comentário! Até a próxima.

Compartilhe:

Comentários

Ben Hur 23 de março de 2010

Interessante o tópico, velho.
Sanou alguns detalhes que já vinha pensando =D
inté o/
Luís Henrique 23 de março de 2010

Fala, Ben Hur. Valeu pelo comentário!
A intenção era essa mesmo: esclarecer detalhes pra quem está iniciando no assunto.

Até mais.
Luis Alberto 29 de abril de 2010

Seu blog está fino einnn.
Estava lendo este post. Muito bacana!
Tenho um colega que está precisando aprender CSS, já vou indicar pra ele.
Luís Henrique 29 de abril de 2010

@Luis, valeu pelo elogio e indicação!

Abraço!

LUÍS HENRIQUE