Claro que existem pessoas que estudam (ou trabalham com) computação e não conhecem CSS. 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
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, XHTML e XML são exemplos).
Sintaxe básica
1 2 3 |
seletor { propriedade: valor; } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
quot;-//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.
1 2 3 4 5 |
<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:
1 2 3 4 5 6 7 8 9 10 11 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@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:
0sem comentários ainda