HTML e CSS 02: Introdução ao código CSS

1. CSS

A principal função do CSS é separar conteúdo de apresentação. Enquanto o conteúdo fica nos arquivos HTML, a apresentação é determinada pelos arquivos CSS.

É possível, portanto, ter mais de uma visualização para o mesmo site… Vide o CSS Zen Garden! E depois a versão nacional, feita pelo Maujor.

Quais as vantagens de usar CSS?

  • Se bem aplicado, o uso do CSS implica numa formatação uniforme de suas páginas. Não haverá a possibilidade de um título de uma página se apresentar diferente de outro em outra página. 
  • Seus arquivos ficarão menores, seu custo de hospedagem poderá cair, e seu site será carregado mais rápido. 
  • Será fácil alterar layouts de sites complexos, com muitas páginas, pois o controle da visualização destas páginas será centralizado nos estilos CSS.
  • O CSS facilita a aplicação de conceitos de acessibilidade ao site. Isso não só beneficia usuários com alguma restrição motora, visual ou auditiva, mas também o acesso ao site através de celulares e outros dispositivos.

Estas vantagens, na verdade, se traduzem em outras características colaterais, que otmizam o código, o desempenho do site (melhoram a indexação por mecanismos de busca, por exemplo). Se ainda tem dúvidas, veja esta apresentação. Ela foi feita em 2003 (!) e ainda tem gente que teima em usar tabelas para posicionar conteúdo…

2. Um exemplo de aplicação de CSS

Abaixo criamos o estilo corrido (para ser usado no texto corrido) e o aplicamos ao código que havíamos feito na aula passada.

<html>
    <head>
        <title>
            Este é o título
        </title>
 
        <style type="text/css">
        p {
                padding-left: 50px;
                color: #f00;
        }
        </style>  
    </head>
    <body>
        <p>Vestibulum elit diam, accumsan ullamcorper, tristique 
        at, consequat tempor, est. Duis odio felis, bibendum a,  mattis eget, 
        pulvinar a, arcu. Curabitur volutpat, neque eget ultricies  
        placerat, urna tellus tristique leo, sit amet luctus urna risus 
        a lectus. Aliquam erat volutpat.
        </p>
 
    </body>
<html>

Outras propriedades usadas no CSS são:

valorsignificado

tag valor significado
width 300px largura
height 300px altura
padding 50px margem
color green ou #e2e2e2 côr do elemento
background-color green ou #e2e2e2 côr do fundo
background-image url(fundo.jpg) image de fundo
font-family verdana fonte tipográfica
font-size 18px tamanho da fonte

sempre obedecendo a sintaxe:

objeto {
       propriedade: valor;
       }