APRENDENDO C.S.S. , UMA ESTRUTURA PARA WEB.

Por André Marinho C.

O QUE É CSS? Você não tem por que se intimidar com a perspectiva de usar as Folhas de Estilo em Cascata. Usar um computador pode ser algo assustador quando se vai experimentar pela primeira vez, mas decorrido algum tempo nem se pensa mais nas dificuldades iniciais. Tudo se resume, em se aprender por etapas e é isto que eu vou fazer nesta série de tutoriais. Uma etapa de cada vez. Quer você seja usuário de um editor WYSIWYG e conhecedor do código por ele gerado ou mesmo não tenha sequer criado uma página Web, este tutorial vai orientá-lo na direção certa. O tutorial pressupõe um pequeno ou nenhum conhecimento de produção de uma página Web. Ele trata o assunto realmente ' do seu início' O que vai ser preciso? Nada especial. Se você tem acesso a um editor de página Web, ótimo. Se não, você pode usar qualquer editor de texto - NotePad no PC ou SimpleText ou TextEdit em Mac. Se você é usuário do DreamWeaver ou GoLive, iremos usar o modo de 'código'. Não se apavore! Um editor de imagens não será essencial, pois a princípio não irei me preocupar muito com criação de imagens. Oh, você irá precisar de um navegador, mas isto eu não precisava dizer. De fato, eu recomendo que você tenha alguns diferentes navegadores. Se você só possui o Explorer, deveria instalar o Mozilla e alguns outros que você poderá obter consultando qualquer listagem Browsers Atuais. Se você desejar fazer upload de suas páginas para um servidor Web, vai precisar de um programa FTP, mas não se preocupe com isto agora, pois poderá fazer tudo ensinado no tutorial, no seu próprio computador. ETAPA NÚMERO 1 - UMA PÁGINA BÁSICA Antes de fazer qualquer coisa iremos precisar de uma página Web. E a seguir você tem uma página, a mais básica possível. <html> <head> </head> <body> Esta é a minha página Web </body> </html> Temos aqui três conjuntos de 'tags' - as tags, normalmente são aos pares, mas nem sempre é assim. Englobando toda a página temos o par de tags <html>...</html>. A primeira <html> é a 'tag de abertura' e a 'tag' de fechamento é a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html. Dentro da tag <html> existem mais dois pares de tags. <head>...</head> contém informações que não foram ainda colocadas no nosso exemplo, a mais importante destas informações é o título da página que aparece na barra de títulos do navegador. Você dá um título a sua página, escrevendo-o dentro da tag title, como mostrado a seguir... <html> <head> <title>Minha Página</title> </head> <body> Este é o conteúdo da minha página Web! </body> </html> O par de tags <body>...</body> engloba todo o conteúdo da sua página Web, texto, imagens, filmes Flash - e tudo mais. Você poderá digitar no seu editor de texto, na janela de código do seu editor WYSIWYG - ou mesmo copiar colar o código da página básica mostrado acima.

Manual de Programação

mas para tornar as coisas claras e em ordem.html' pois este é o nome apropriado para a primeira página de qualquer Web site. Qualquer conteúdo deve ser colocado entre o par de tags<body>. Softs leitores de tela usados por pessoas portadoras de necessidades especiais para visão.</p>.. aquelas coisas básicas de estruturação de textos que se aprende na escola. entenderão perfeitamente <strong> e lerão com a devida ênfase.</h6>. É útil em qualquer porção de texto marcar títulos. Para títulos.. Antes de considerar como eles devem ser apresentados (como deve se parecer).</body> para que o navegador possa renderizá-lo. não dá uma estrutura e nem estiliza os textos. Eles são como mostrados a seguir... aliás tag de fechamento neste caso não faria qualquer sentido. o texto começa a tomar forma.. o HTML deverá servir a outros dispositivos também. O caminho normal para abrir sua página em um navegador é usar a opção 'Abrir' ('Open') no menu 'Arquivos' ('File') mas há um modo mais rápido. Ele se assemelhará a um texto produzido em um processador de texto. é melhor você não se utilizar de estilização visual. Uma importante tag é a de quebra de linha <br>. Encher de textos a página.mas em negrito. Faria muito mais sentido grupar palavras e sentenças em parágrafos.o conteúdo. Crie um 'shortcut' do seu arquivo no desktop.. indo desde o mais alto nível <h1>.. Este par de tags dá a funcionalidade do itálico ao texto independentemente do dispositivo em uso. trata-se de um estilo de apresentação para impressão e na Web é preferível usar-se strong <strong>. Você poderá salvar o arquivo em qualquer lugar no hard disk do seu computador. crie um novo diretório para salvar sua página Web.. E aqui também. Como você pode notar diminui o tamanho quando cresce o número que indica o nível sendo que o h4 equivale aproximadamente ao tamanho de texto chamado 'small' (pequeno). sua página Web não possui um ingrediente vital .. agora temos uma página Web que é bem renderizada em qualquer navegador .</h1> até o mais baixo <h6>. considere acima de tudo sua função. um parágrafo é um bloco constituido de uma ou mais sentenças separado do próximo bloco por um espaço . existem seis níveis distintos de ênfase. Ao contrário de outras tags. Dali você poderá arrastar o ícone do 'shortcut' direto para a janela do navegador e sua página será carregada e mostrada! Sua página deverá se parecer com esta » Ainda que seja uma maravilha. títulos.Bem. h5 e h6 são 'smaller' (menor) ...depois que você tiver 'salvado' ela.bem. Você deve saber que itálico é conseguido com a tag <i>. alguns parágrafos e talvez até uma assinatura final.. Existem outros truques que podemos usar para dar ênfase a palavras ou frases. sub-títulos .</em>..</b> contudo. que as palavras não tem outra ênfase particular que não seja a ordem natural em que são escritas. não é mesmo? Usando estas tags básicas de marcação.. mas usar <em>. Por não dar estrutura eu quero dizer que os textos simplesmente fluem da esquerda para a direita.. sub-títulos. colocando texto entre o par de tags <p>. Eles ignoram também tabulações e até múltiplos espaços entre palavras que são interpretados como um espaço único. É melhor não usar sublinhado para enfatizar..</i>. existem diferentes tags de marcação que se constituem no mecanismo apropriado para estruturar os textos. Usualmente indica um link. pois esta prática poderá confundir o visitante do site. Dê a ela o nome de 'index... Não há sentido em uma página Web se ela não diz nada (ou outra coisa senão "Este é o conteúdo da minha página Web!") mas isto eu vou deixar por sua conta. Cria-se um parágrafo. Sublinhado pode ser conseguido com o par de tags <u>..</strong>. Em HTML.</u> . Em HTML. de cima para baixo. Esta página básica provavelmente se parecerá um pouco diferente quando visualizada em diferentes Manual de Programação . assim como ela está.. Embora elas (tags bold e strong) se pareçam iguais quando renderizadas na tela de um monitor. esta não requer uma tag de fechamento.tal como este paragráfo que você vê aqui. Bold (negrito) é uma variante mais destacada que o texto normal e marcada com o par de tags <b>. mas sublinhados na Web tem um significado especial. você deve saber. Browsers ignoram qualquer pulo de linha ou parágrafos que você insira em uma porção de texto.

por exemplo.. Por enquanto. A cor que escolhemos para nosso fundo é composta de vermelho e8(232). Algumas vezes você encontrará a sintaxe com apenas três dígitos. Você pode ter uma folha de estilos para descrever como sua página será apresentada na tela de um computador (media="screen") e outra completamente diferente para formatar sua página para impressão (media="print"). d. 'tv'... de verde e de azul em diferentes proporções. A primeira coisa que faremos será definir os estilos para a página como um todo. Usando-se este sistema de contagem. Notar que não usamos sinal de igual '=' e sim dois pontos ':' . Basicamente a definição de estilos para body se parece com. Agora você entenderá a lógica de não usar 'bold' e 'italic'. Mais adiante você descobrirá que pode ter sua folha de estilos em um 'arquivo externo de estilos' que pode ser 'chamado' por várias páginas.</head> do documento. usualmente renderizam uma página na cor branca com textos na cor preta.. e . b. mas uma vez ultrapassado o 9 (nove) não existe um numeral simples para representar 10. Cada navegador tem o seu próprio estilo padrão e a menos que você configure seu navegador ele usará os estilos padrão. nós criaremos nossos próprios estilos que serão agrupados em uma 'folha de estilos'. Desta forma. #ffffff será o branco e #000000 o preto. 13. title="mystyles" tem por finalidade identificar seus estilos através de um nome de sua livre escolha. começaremos construindo nossa folha de estilos dentro da própria página Web. adicionase mais um dígito e assim '10' representa o 16. mas nós iremos definir um tom de cinza claro para o fundo da página. ETAPA NÚMERO 2 . os estilos de todas as páginas que lincam para ele..FOLHA DE ESTILOS Uma folha de estilos é conceitualmente bem simples... f. Então. tais como 'projection'.. eles não deverão aparecer na apresentação. nada de especial aqui. c. qualquer número entre 0 (zero) e 255 pode ser representado por dois números ou letras . Quando a cor é representada por uma numeração composta por três pares de dígitos que se repetem dois a dois. 'braille' and 'aural' (projeção. o body da página...navegadores e computadores. Eu voltarei a este assunto mais tarde. não que eles tenham dedos. <style type="text/css" title="mystyles" media="all"> <!---> </style> Note o par de tags <style>.. Os caracteres <!-. você poderá omitir o segundo dígito que o navegador entenderá a abreviatura.. televisão. contenha sua curiosidade em saber o porquê de 'Cascata'. e uma vez que os estilos estão dentro da seção <head>. Abaixo a maneira pela qual definimos uma cor de fundo para a página. type="text/css" diz ao navegador que estamos usando um arquivo de texto puro para descrever nossos estilos. body {background-color: #e8eae8 } O que significa #e8eae8 ? As cores na Web são definidas pela mistura de 256 tonalidades de vermelho. 11.. Computadores foram projetados para contar de dezesseis em dezesseis. Manual de Programação . Humanos tem dez dedos nas mãos e contam de dez em dez.. Ao ultrapassar o 15. Os estilos que iremos usar serão definidos dentro do par de tags <head>. 14. Isto é denominado 'comentario'. Isto é uma abreviatura para #22aa00. Tudo que estiver dentro das tags <body>. Para simplificar. escrita braille e áudio). body { } body seguido por um par de 'chaves' { }. media="all" aqui que as coisas começam a ficar interessantes. #2a0.</head> como mostrado a seguir. que tem propósitos gerais. 12.</style> e iremos explicar mais algumas coisas neste par. ela é uma página contendo definições ou especificações de estilos. Por enquanto usaremos o tipo de mídia 'all' (todas as mídias). que instrui o navegador como apresentar os diferentes elementos de uma página. Para sobrescrever os estilos padrão dos navegadores.e --> se constituem em um modo de se 'esconder' texto em uma página Web . verde ea(234).</body> terá este estilo ou conjunto de estilos que lhe for aplicado.você verá os textos somente na marcação do código.255 é ff. Existem outros tipos de mídia. Definiremos uma cor de fundo para a página. em um sistema de contagem 'hexadecimal' (base dezesseis) o 10 é representado pelo 'a' e o 15 pelo 'f'. azul e8(232). 15 assim estes numerais foram substituidos por letras a. com a grande vantagem de se poder controlar através deste arquivo mestre. O símbolo # ('tralha') indica que estamos usando numeração hexadecimal e não números decimais ordinários. Os navegadores por padrão. quando começarmos a aplicar estilos no nosso HTML.

color: #5d665b } Observe na regra acima que as cores do fundo e do texto estão separadas por um ponto e vírgula '. diferente da cor padrão preta. Para impressão você poderá tranquilamente especificar um tamanho em 'points' (pontos) e terá sempre aquele tamanho na impressão. Dependendo do tamanho da tela do usuário. body { background-color: #e8eae8. Na Web os tamanhos de fonte não seguem um padrão rígido variando de um computador para outro. O estilo para fontes Iremos trabalhar de início com o estilo das fontes (typeface) pois esta alteração fará uma diferença marcante na página. ainda podemos fazer muitas coisas. para fontes com serifas font-family: Georgia. "Times New Roman".. vermelha. E. font-family: Verdana. mudando para cores ao nosso gosto. E agora. ETAPA NÚMERO 3 . Veremos adiante casos especiais em que iremos alterar isto. nós especificamos um conjunto de fontes no pressuposto que uma delas esteja instalada no computador do usuário. Esta nova definição separada da anterior por ponto e vírgula. e em alguns casos.uma que venha pré instalada com o sistema operacional.ESTILIZANDO TEXTO Embora já tenhamos livrado nossa página do austero preto e branco. body {background-color: #e8eae8. Você não pode assumir que a fonte que escolheu esteja instalada no computador do usuário e por isso deverá fornecer alternativas. Bastante cuidado com o uso apropriado de vírgulas e ponto e vírgulas pois a troca ou esquecimento delas causará erros. as páginas Web só conseguem mostrar os tipos de fontes que estejam instalados na máquina do usuário. Diferentemente de projetos para impressão. serif. Você poderá usar a ferramenta 'colour picker' do Photoshop (ou de outro programa gráfico) e definir então uma cor por um número hexadecimal de 6 dígitos. dentre aquelas que mais comumente encontram-se instaladas nos computadores . De toda forma. Geneva. A seguir uma especificação típica para escolha de uma família de fontes do tipo sem serifas. do seu sistema operacional e do navegador usado um mesmo tamanho de fonte pode variar Manual de Programação . cada uma tendo 16 níveis de brilho é possível combinações para obter todas as demais. assim não podemos empregar no nosso projeto um tipo de fonte de nossa livre escolha. uma variação drástica. Times. esta técnica de usar abreviadamente três dígitos é bem mais simples e eficiente. Você acabará descobrindo que está limitado a duas ou três fontes do tipo serif (com serifas) duas ou três do tipo sans-serif (sem serifas) e uma do tipo monospaced. Com uso de um dígito por cor. Em lugar de escolher um tipo único de fonte. Arial. Podemos alterar o tipo e o tamanho das letras. vamos definir margens ao redor da página para acertar o posicionamento dos textos convenientemente na tela. Se você estiver digitando seu código. verde e azul. A quantidade de espaço de impressão assim como as quebras de linha será sempre exatamente como você as especificou. Observe que nomes de fontes composto por mais de uma palavra devem ser escritos entre aspas "Times New Roman" Vamos adicionar fontes sem serifas nos estilos para a nossa página e ver o que acontece. vamos usar uma margem de 50px (margin: 50px) na definição das regras para body. e com seis dígitos mais de seis milhões de cores. margin: 50px } Agora tudo o que digitarmos na página será reprentado numa cor verde escura acinzentada sobre um fundo cinza. sans-serif. color: #5d665b. (dactilográfica).'. Isto limita consideravelmente nossa escolha.. o espaçamento entre linhas e adicionar outros detalhes tal como indentação de parágrafos. Abaixo um exemplo mostrando os tipos de fontes mais comuns pré instaladas em computadores Windows e Machintosh. Nossa página com fontes sem serifas » O tamanho das fontes A especificação do tamanho de fonte é um assunto controverso.Usando esta abreviatura com três dígitos você poderá obter 4096 cores diferentes. vamos agora definir uma cor para os textos na nossa página. mas teremos que escolher uma.

Pixels não variarão muito de um para outro desktop e assim os tamanhos de fontes serão similares quando não idênticos. Para definir o espaçamento entre as linhas podemos novamente optar por medidas relativas (% or ems) ou absoluta (px). Projetar hoje páginas Web para o futuro implica em considerar designs fluídos que se auto adaptem aos diferentes tamanhos de tela. Irei discutir esta questão mais adiante.desde de tão pequeno que se torne ilegível até tamanhos enormes semelhantes àqueles usados em livros grandes. 70% poderá resultar em um tamanho ilegível. Na tela do meu computador. xx-small. e aquilo que será de fato apresentado ao usuário. para crianças. talvez um pouco maior do que o ideal. especificar um tamanho de fonte de 0. mas poderão não ser para você. Uma vez que você utilize laptops ou dispositivos portáteis ou mesmo monitores com resolução muito alta. usando um navegador Mozilla. (isto não fará qualquer diferença para o browser) para que as regras de estilo fiquem mais fáceis de serem lidas por humanos. em 180% do tamanho da fonte (small). "A Web não é igual a uma impressora!" Tamanhos relativos para fontes Se você quer servir sua página Web ao maior número possível de usuários é melhor especificar um tamanho de fonte relativo àquele escolhido como padrão pelo usuário. Manual de Programação .tamanhos T-shirt e pixels. É de boa prática sempre colocar um ponto e vírgula ao terminar de escrever uma regra. x-large e xx-large (algo como . Felizmente os navegadores permitem aos usuários definir suas preferências pessoais de tamanhos. especialmente se as linhas são muito longas. xx-largex-large large medium small x-small xx-small xx-small type This type is small but not too small to render This type is way too small This type is way too small> Tamanhos absolutos para fontes Se o público para o qual você projetar seu site for bastante específico e usa basicamente as mesmas configurações e tipo de computador que o seu. Espaçamento entre linhas O espaçamento padrão entre linhas é de aproximadamente 120% do tamanho da fonte. eu construi três parágrafos usando três métodos diferentes para definir o tamanho da fonte . a altura da linha (line height). extra grande. A vantagem deste sistema sobre as percentagens e ems é que os navegadores não tornarão os textos ilegíveis. Com a crescente popularidade dos dispositivos Wi-Fi (acesso sem fio) e portáteis. super extra pequeno. o que é o mesmo que 100%. algo parecido com a especificação de tamanhos de camisas ( T-shirt). 'Medium' (médio) é o mesmo que 100% ou 1em. eu coloquei as regras. cada uma em uma linha diferente. Neste exemplo eu defini para toda a página. as condições de navegação por sua página sofrerão uma mudança drástica nos próximos anos. o que vem a atenuar as grandes variações. Você pode por exemplo. use-o somente para impressão (print). os tamanhos são bem parecidos.percentagens . os tamanhos em pixel irão variar de acordo com o dispositivo usado. Aumentar um pouco este espaçamento em geral resulta em melhoria da legibilidade. 1. Para a nossa página no estágio atual o comprimento das linhas é determinado pela largura da janela do navegador. assim.2 em é o mesmo que 120%. você poderá especificar o tamanho de suas fontes em pixels. Para que você tenha uma idéia exata destas variações. Você pode usar percentagem (%) da fonte padrão do usuário ou uma unidade de medida chamada 'em'. Como as definições de estilo para body estão crescendo. 'Smaller' (pequeno) é um tamanho menor que 'medium' e 'Larger' (grande) é um tamanho maior que 'medium'. que vem a ser a altura do caracter (fonte) mais o espaço extra acima. xx-small é o menor tamanho de fonte capaz de ser apresentado por um computador. Esta linha foi definida com o tamanho de fonte x-small Esta linha foi definida com um tamanho de fonte absoluto de 11px Convém ressaltar que você nunca deverá usar 'points' para definir tamanhos de fonte para tela (screen). Para alguém usando um Mac com um tamanho de fonte definido smaller por padrão. Há também os tamanhos x-small. Várias são as maneiras de especificar fontes relativas. super extra grande). Repita comigo.7 em ou 70% e isto ficar perfeito no seu PC.extra pequeno. A maneira preferencial de especificar tamanhos relativos de fontes é através do método descritivo de tamanhos. Para esta linha foi definido um tamanho de fonte de 85% do tamanho das fontes deste tutorial. mas mesmo assim poderá haver diferenças entre o que você projetou e espera.

via CSS. color: #5d665b. Agora iremos ver como definir estilos para áreas específicas da página. Dentro do sinal de chaves { }. blocos de texto podem ser divididos em parágrafos para facilitar a leitura.</p> e em consequência em termos de HTML ele não é oficialmente um parágrafo. chamado de 'non-breaking space' que é escrito desta forma &nbsp.. h2 e h3 são maiores que o texto normal e dos níveis h5 e h6 são menores. basta colocá-lo dentro de um par de tags <p>. O que nós precisamos ali é de um caracter invisível e o HTML nos disponibiliza um. Novamente. <p>&nbsp..body { background-color: #e8eae8. pois podemos redefiní-los de acordo com nossas necessidades. } Agora estamos com um página mais 'arejada'' » Parágrafos Tudo o que fizemos até agora afeta a página toda. Se você simplesmente colocar ali um parágrafo vazio <p></p> isto não vai funcionar pois sempre é necesário existir alguma coisa dentro das tags.Times. Como eu já havia mencionado anteriormente.</p>. sans-serif. veja a seguir.. line-height: 180%. Projetos tipográficos as vezes se utilizam de outras técnicas menos comuns tais como grandes indentações ou mesmo exdentações (o oposto de indentação). Com CSS é possível conseguir todos estes efeitos. Existem várias maneiras de visualmente separar parágrafos uns dos outros. margin: 50px.</p> O caracter 'non-breaking space' é bastante útil também para você evitar que certas palavras sejam Manual de Programação . font-family: Verdana. line-height: 180%. acrescente esta declaração text-indent: 3em <style type="text/css" title="mystyles" media="all"> <!-body { background-color: #e8eae8. isto é uma simples questão de definir mais umas regras de estilo. Nós não temos que ficar restritos a eles.serif. Geneva. Geneva. Arial. Títulos Eu já expliquei os seis níveis de títulos padrão do HTML.. font-size: small. Colocar um espaço em branco dentro de <p></p> também não vai funcionar pois o HTML ignora espaços em branco que não estejam entre dois caracteres. } p { text-indent: 3em. Para fazer com que um bloco de texto se transforme em um parágrafo.} --> </style> Nossa página com parágrafos » Observe que o primero parágrafo não está indentado . color: #5d665b. sans-serif. font-family: Verdana. Títulos por padrão são grandes e em negrito com um espaçamento extra acima e abaixo.. font-size: small. margin: 50px. Vamos trabalhar com o título h3 e alterar sua fonte e cor.. Você poderá acrescentar espaços extras entre as linhas ou indentar a primeira linha. font-family:Georgia."Times New Roman". Lembre-se que títulos dos níveis h1. Arial.} Agora estamos com títulos » Você deve ter observado que eu adicionei uma linha em branco acima do segundo título. Para manipular os estilos a aplicá-los a um parágrafo. h3 {color:#966b72.ele não foi colocado dentro das tags <p>. nós adicionaremos p { } logo a seguir às regras já definidas para body dentro da tag head. mas por padrão o separador de parágrafos é o 'paragraph space' que equivale a metade da altura da linha 'line-height'.

Contudo a página ainda se parece com um documento datilografado ou produzido em um processador de textos. Nós podemos definir margens diferentes para cima. você poderá fazer experiências com a página que acabamos de criar. dizemos line-height: 180%. margin-left: 120px. Em CSS. porém o mais importante é que você carregue sua página em diferentes navegadores para observar quão diferente sua página possa parecer. Ver nossa página com textos estilizados » Bem. margin-bottom: 70px. Quando dizemos. mas esta prática é bastante específica e usada em fórmulas matemáticas e não nos aprofundaremos muito nesta propriedade agora. era impossível de se conseguir com a marcação HTML . estamos nos referindo à distância que vai desde o topo de uma letra maiúscula tal como o 'A' até a base de uma letra que se estende o mais baixo possível (letra descendente) tal como o 'p' ou 'y'. Isto é apropriado para obter efeitos visuais em títulos. Quando o espaçamento entre as linhas de um texto é nulo ou muito reduzido. Tente mudar os tipos e tamanhos de fontes e os espaçamentos entre as linhas. com o valor especificado em percentagem.quebradas ao fim de uma linha . word-spacing: 0. right. Saiba mais sobre espaçamento de linhas. Linhas muito curtas provocam interrupções constantes na maneira natural de leitura da esquerda para a direita. a leitura torna-se difícil. Vertical-align permite ajustar a linha de base de letras individualmente dentro de uma palavra. com uma margem maior no lado esquerdo. Na tag body eu defini uma margem de 50px para os quatro lados (ao redor de toda a página). TÍTULOESPAÇADO letter-spacing: 0. Para isto basta que se declare as margens separadamente como mostrado abaixo:margin-top: 70px. Hoje não usamos mais a 'lead'. ems ou pixels (px). E=MC2 CSS também possibilita o controle sobre o espaçamento horizontal entre as letras e as palavras.5em. Enquanto espera. tamanho de fonte ou em CSS font-size. chamado de 'leading'.palavras como nomes de pessoas ou de instituições. Manual de Programação . Este nome vem do fato de as impressoras usarem este espaço como faixas para colocação de uma guia ('lead') metálica com a finalidade de definir as entre linhas. para os lados direito e esquerdo e para baixo (top.. Dicas extras Antes de passar para a próxima etapa vamos experimentar alguns 'truques' na nossa página. Existe ainda um espaço extra abaixo das letras. modificando os valores das declarações de estilos. disponível até mesmo em máquinas de escrever mais modestas. left e bottom). Em épocas passadas em que os navegadores não ofereciam um bom suporte para as CSS um aspecto de vital importância para formatação de textos. Quanto mais longas forem as linhas tanto maior será a dificuldade de leitura. Atenção que o itálico pode ser renderizado erroneamente em alguns computadores e tornar-se ilegível em tamanhos de fontes pequenos. 'line spacing'. agora você está com uma página onde acresentou algum estilo .sem muito esforço.5em Projetando legibilidade. Defini também na nossa página uma das palavras em negrito e outra em itálico.MAIS ESTILIZAÇÃO DE TEXTO Antes de prosseguirmos com formatação de textos será interessante familiarizá-lo com alguns termos básicos de tipografia. O espaçamento entre linhas em consequência vem a ser a altura da fonte mais o espaço extra da 'lead'. Isto faz nossa página se parecer a uma página impressa. A seguir veremos algumas possibilidades interessantes de estilização para o layout.trata-se do espaçamento entre as linhas do texto. ETAPA NÚMERO 4 . margin-right: 50px. adiante. nós simplesmente determinamos o espaço total entre a base de uma linha e a da linha seguinte. Para o exemplo mostrado abaixo eu poderia ter usado a marcação com as tags <sup>2</sup> porém com CSS eu tenho muito mais controle.

As estilizações gerais para o body definem somente o tamanho. veja este exemplo onde o primeiro bloco de texto construido. Ela é como um parágrafo. As especificações para este parágrafo são: font-size: small.. background-color: #e8eae8. line-height: 180%">. line-height: 180% o que vem a ser equivalente a uma vez e meia o espaçamento entre linhas de um processador de texto antigo. uma página em uma tela monitor tem sua luminosidade própria.. não possui margens e nem uma line-height (espaçamento entre linhas). body { color: #5d665b. porém tem uns detalhes adicionais.</ul> <ol>. Contraste Diferentemente de uma página impressa que você lê por reflexão de luz. independente do tamanho do monitor. desde o topo de uma letra maiúscula até a base de uma letra descendente .listas não numeradas) ou listas ordenadas <ul>. Se você está usando tamanhos de fontes relativos. é importante tornar a tarefa o mais confortável possível.. Estes estilos foram acresentados ao corpo da página por um processo conhecido como herança ('inheritance').5em (o mesmo que 150%). Se você está usando tamanhos absolutos você poderá definir o espaçamento entre linhas assim: font-size: 11px. em CSS.. se você exagerar acabará dificultando a leitura para pessoas com restrições visuais. o aumento do espaço entre as linhas ajudará na legibilidade. faz com que ela se torne mais confortável e menos estressante para leitura.e hoje em dia as telas tornaram-se bem maiores. ocupando toda a largura da tela. adiante neste tutorial. Em casos extremos você apertaria os olhos para diminuir o efeito da claridade e muito provavelmente no geral iria se sentir desconfortável e até mesmo sem saber bem porque. Arial... sans-serif.ver figura no primeiro título deste tutorial) . line-height: 16px. Este espaçamento padrão é de aproximadamente 20% do tamanho da fonte ('cap heigh't mais 'descender' ou seja.</div> As 'divs' contidas nas páginas são uma parte muito importante das folhas de estilo em cascata e veremos mais detalhes sobre elas. as quais serão passadas para seus filhos. } O bloco de texto logo a seguir está dentro de um par de tags <div>. Para uma leitura confortável as linhas devem ter um comprimento entre uma vez e meia e duas vezes o comprimento ocupado por todas as letras (minúsculas) do alfabeto . font-family: Verdana. Diminuir o contraste numa página Web. onde há uma considerável quantidade de texto para leitura. ETAPA NÚMERO 5 – LISTAS Outra técnica de formatação muito usada em páginas Web é a lista ('list'). Porções grandes de texto preto sob fundo branco podem ser comparadas a uma caminhada sob sol intenso sem uso de óculos escuro.. Exatamente como uma criança herda as características de seus pais. Para uma demonstração. Alguns sites ainda adotam esta prática . Muitas das antigas páginas web apresentam textos estendendo-se da esquerda para a direita. Em um artigo como este. Geneva. line-height: 1. font-size: small.. Cada tipo Manual de Programação . bem como a cor do fundo.</li> . Com CSS você poderá definir o espaçamento que desejar para as entre linhas. Mas por outro lado... HTML define listas que podem ser do tipo com marcadores (bullets .</div>.. este processo de "cascata" também acontece. Se as linhas são mais longas.. As diferenças de brilho entre um texto preto e um fundo branco tem magnitude muito maior em uma tela do que em uma página impressa. onde o usuário terá que passar um período longo de tempo em frente a tela do monitor.isto significa de 40 a 60 caracteres ou de oito a dez palavras.font-size: 1em. Por padrão.Linhas mais longas que um tamanho considerado ideal são também de leitura cansativa e tornam difícil a localização do início da próxima linha. família e cor das fontes. você poderá definir o espaçamento entre linhas como uma percentagem do tamanho da fonte . Tem uma margem esquerda de 250px e direita de 200px e o espaçamento entre linhas foi definido em 180%.</ol> com numeração no início de cada item da lista <li>. e é como se fosse uma página dentro da página. margin-right: 200px. <div style="margin-left: 250px. há um espaçamento entre as linhas de um texto. com elementos herdando os estilos definidos para elementos que os contém.

<li style="list-style-image: url(icon1.5em 0 } esta definição adiciona um espaço extra de 0. Ordered list item 3 Lista ordenada com opção de numeral romano minúsculo i.. melhor ainda.. bastaria você substituir o seletor por ul li . &nbsp. ol { list-style-type: lower-roman...gif). que podem ser definidas no HTML . Item 1 da lista ordenada ii. uma imagem para cada item da lista. conforme mostro abaixo.<li type="square"> coloca um marcador tipo um 'quadradinho'. Os quatro valores : 1em 0 1em 40px são respectivamente para as margens de cima.5 em acima e abaixo de cada item da lista ordenada.. você poderá definir as margens para eles também . percentagens ou pixels. margin: 1em 0 1em 40px } O efeito destas definições de estilo é o mesmo que o de colocar a opção em cada item da lista no HTML com a vantagem de proporcionar muito mais controle sobre as margens em volta da lista. devemos definí-los nos itens ou 'inline'. Eu adicionei um espaço em branco para compensar isto. Para aplicar estilos individualmente aos itens de uma lista.gif). Item 2 da lista ordenada iii. E. Lista não ordenada padrão · Item da lista não ordenada · Item da lista não ordenada · Item da lista não ordenada Lista não ordenada com opção de marcador tipo 'quadradinho' _ Item da lista não ordenada _ Item da lista não ordenada _ Item da lista não ordenada Lista ordenada padrão 1. Item 3 da lista ordenada CSS possibilita mais opções e controle sobre as listas . Se você deseja controle sobre os itens da lista.gif). margin: 1em 0 1em 0">Sabemos sobre pessoas</li> <li style="list-style-image: url(icon2. ol li { margin: . você pode definir seu próprio marcador usando uma imagem..para aumentar o espaçamento entre eles por exemplo.. por fim.gif) } ul li { margin: 1em 0 1em 0} · Se você gostou deste · Vai gostar deste também · E que tal este ? E. Notar que o IE6 (Windows) coloca os ícones muito próximos ao texto do item. <li type="i"> coloca um numeral romano minúsculo. margin: 1em 0 1em 0">Sabemos sobre imagens</li> <li style="list-style-image: url(icon3.. à direita. margin: 1em 0 1em 0">Sabemos escrever</li> · Sabemos sobre pessoas · Sabemos sobre imagens · Sabemos sobre idéias · Sabemos escrever Estilos definidos entre as tags head do documento aplicam-se à toda a página.basta você criar regras de estilo para ol ou ul . Para uma lista não ordenada. Ordered list item 1 2. Ordered list item 2 3.de lista é fornecido com algumas opções. ul { list-style-image: url(smiley.gif). Manual de Programação . o que não é o caso aqui. em baixo e à esquerda e podem ser definidos em ems. margin: 1em 0 1em 0">Sabemos sobre idéias</li> <li style="list-style-image: url(icon4.. Os estilos são definidos na tag HTML de abertura <li> no corpo (body) da página. Sabemos sobre pessoas.5em 0 .

name="myanchor" dentro da tag de abertura. Os navios estão ancorados em pontos específicos e não à deriva. <a href="http://www. O contexto então torna-se um fator importante. Manual de Programação . Por padrão..bem. O essencial é que o link seja destacado do restante do texto para mostrar-se que ali há algo especial. Imagine navios ancorados no imenso mar que é a World Wide Web formando uma cadeia composta de links conduzindo às âncoras do navio no fundo do mar. text-decoration: none } CSS ainda permite estilizar um estado de link chamado 'hover'.. na verdade a âncora deve ser colocada imediatamente acima do lugar para o qual você irá .text-decoration: none..</a> mais uma marcação href=". Texto sublinhado pode ser prático mais é feio. Mais tarde quando você voltar àquele link sua cor mudará novamente para púrpura. text-decoration: none.text-decoration: none } na definição acima a cor do link foi alterada e o sublinhado retirado com a definição text-decoration:none Se você quiser mudar a cor do link visitado faça assim. Por padrão são três os estados de representação dos hipertextos para links em HTML.wpdfd. Esta é uma referência ao endereço do hipertexto ao qual você será conduzido.veja a seguir. frases ou imagens de uma página podem ser clicados para nos levar a outros lugares. por exemplo.wpdfd.. Para definir regras de estilo que se apliquem a todos os links de uma página você deve colocá-las dentro das definições de estilo na tag head da página como mostrado abaixo. deve haver uma boa razão para uma palavra ou frase dentro de um texto ter um visual diferente. você tem um par de tags <a>. a:link { color: #696. Neste estado . Qualquer um que tenha navegado pela Web percebeu rapidamente este comportamento dos links.. o que facilita sua localização. Normalmente o link muda de cor e em alguns navegadores também aparece uma borda em volta do texto do link. Links em palavras. como 'designers' não estamos satisfeitos com o visual padrão dos links. Tudo que temos a fazer é estabelecer definições para as âncoras . Links não precisam ser sublinhados e nem azuis. Estes outros lugares são chamados de "âncoras".'a'. Alguns textos são óbvios que se constituem em um 'menu' de opções quer estejam ou não sublinhados. Certamente.com/index. De maneira semelhante.htm#myanchor"> Este é um link para uma âncora na minha Home Page </a> Como você já deve saber.htm"> Este é um link para o topo da minha Home Page</a> Assim.. a:visited { color: #699. Para ir àquele local ("myanchor") você acresenta mais o seguinte no fim do link. Link não visitado Link ativo (clicado) Link visitado Observe que o cursor também muda.. Seu destaque e a posição que ocupam na página e mais o fato de que aparentam convidá-lo a ir a algum lugar dão uma indicação precisa da sua função. Cada página tem pelo menos uma âncora. a:link {color: #696. background-color: transparent} a:visited {color: #699. Por padrão os links são na cor azul e sublinhados." dentro da tag de abertura. o sublinhado reaparece temporariamente enquanto o ponteiro está em cima do link. CSS permite estilizar o visual dos links. a:hover { color: #c93. Isto não vai funcionar se cada link tiver uma cor diferente. está âncora localiza-se no topo da página. O estado 'active' do link acontece quando você clica. mas você poderá iserir mais âncoras em qualquer lugar da página que precisar chegar por um link. mas aqui novamente é o contexto quem vai dar uma indicação e também o fato de outras palavras ou frases terem o mesmo tipo de alteração no visual. os links em uma página são visualmente diferentes do restante do texto com a finalidade de serem facilmente identificados..quando o ponteiro do mouse é passado sobre o link .com/index. A razão pode ser para dar ênfase.. se assim você desejar. <a href="http://www. text-decoration: underline } Neste estado. <a name="myanchor"></a> Um par de tags <a></a> com um nome.mudei a cor do texto do link o que também fornece mais uma informação adicional de que ali está um hipertexto para link.ETAPA NÚMERO 6 – LINKS Na abreviatura HTML é de especial significado as letras HT para Hiper Texto (HyperText). Quando você clica em um link eles mudam para a cor vermelha. Não há nada dentro do par de tags.. A seta padrão muda para uma 'mãozinha' quando aponta-se sobre o link. Se você colocar uma âncora na página em um lugar específico . indicando que você já o visitou.

em termos de espessura. Um box CSS por padrão estende-se da margem esquerda à margem direita do corpo da página. um dos princípios mais importantes de projeto de interfaces diz que você deve manter as coisas o mais consistente possível. Você deverá tomar precauções ao usar padding pois ele se comporta de maneira diferente no navegador Microsoft Internet Explorer. Ao contrário do que foi mostrado no diagrama acima o IE coloca o padding dentro do box. Estas divisões podem ser tão pequenas quanto um caracter ou grandes o suficiente para acomodar porções retangulares inteiras de uma página.background-color: transparent} a:hover {color: #c93. é possível compartimentar a página em pequenas divisões com seus estilos próprios. Existem muitos outros efeitos que você pode conseguir com CSS para os links. Existem duas maneiras para tratar esta questão. não faz muito sentido clicar em link que leve para o mesmo lugar. Você poderá destacar o link de um modo visual diferente dos outros links ou torná-lo invisível indicando assim que ele é um link não válido. mas neste caso é importante que a:hover e a:active venham por último.. Algumas vezes os 'designers' mudam a cor do texto do link para o estado hover e/0u ative. e em consequência seu comprimento e altura não se alteram.ou uma imagem.. de modo a sobrescrever os estilos padrão. porque manter o link morto se ele não é uma opção válida? Bem. Ele não faz nada. Normalmente a ordem não importa em CSS.. A espessura da borda aumenta o comprimento do box. na verdade é um 'padding' porque obviamente este espaçamento não Manual de Programação . background-color: transparent} a:active { color: #900. Isto é como um sinal. Ao colocar texto dentro do box ele se expandirá em altura de modo a acomodar o texto colocado . estilo e cor.</div> a área que pretendemos transformar em uma divisão..text-decoration: underline.padding. Se você não especificar uma margem para o corpo da página (body) um box CSS ocupará toda a largura da janela do navegador. Todos os demais navegadores colocam o padding fora do box. Tais áreas. Além dos limites do padding você poderá ter uma borda. Agora um outro estado para links não endossado pelas CSS.BOXES CSS Vimos que um texto na Web pode ser dividido em títulos e parágrafos através da marcação HTML. ETAPA NÚMERO 7 .. Vimos também como podemos definir estilos ao nosso gosto. uma cor de fundo ou até mesmo uma imagem de fundo que pode se repetir constituindo um padrão de preenchimento.. nós apenas demos uma partida aqui e você poderá agora começar com suas experiências. Para separar um box de outro usamos as margens. instruindo você a dar uma volta para ir ao lugar em você já se encontra. O corpo ('body') da página é a área total visível. Elas são mostradas com pequenas diferenças de acordo com o navegador em que são visualizadas. são como uma mini página que em CSS são chamadas de boxes CSS. a seguir como elas aparecem no navegador Mozilla. Um outro elemento disponível é a cor do fundo do texto. Está técnica é chamada de 'greying out' e você já deve ter visto isto em ação em outros programas instalados no seu computador. bem. Assim o seu box sofrerá alterações de acordo com o navegador em que for visualizado e isto poderá trazer resultados desastrosos quando você depende de maior precisão. simulando uma marca de iluminação. Boxes CSS podem ter uma largura e uma altura (width e height). Se você não especificar uma altura para um box CSS ele não terá altura (será considerada zero). os demais itens vão sofrer um deslocamento de sua posição inicial. Tudo o que temos a fazer é englobar entre o par de tags <div>. Bordas estão disponíveis em uma variedade de estilos e você poderá definí-las separadamente para cada lado.. Boxes CSS se constituem na unidade básica de construção de layout de uma página Web e eu passarei a explicá-los com detalhes pois eles são muito importantes. Margens e paddings costumam ser confundidas pois o que nós chamamos de margem de uma página de um livro ou de uma página Web.text-decoration: underline.. Afinal. caso contrário não funcionarão. Este é um link 'morto'. Vamos agora ver como definir estilos que possibilitam ir além do que permite o HTML e construir layouts mais interessantes. Esta página exemplo demonstra os princípios que você aprendeu aqui. Se você tem um link na sua página que leva a mesma página.. Se você remover um item de uma menu por exemplo. adicionando seus valores ao comprimento e altura do box. Para manter o texto afastado das bordas do box você deve usar o enchimento . mas conforme eu mostrei na etapa número 3. É menos confuso para o usuário uma interface que se mantém sempre a mesma e inalterada. background-color: transparent } A ordem (sequência) que você escreve as definições de estilos para links é muito importante.

não.mantendo a soma total abaixo da largura do navegador. Boxes com dimensões definidas e posicionados de forma absoluta. Para o body de uma página Web. à semelhança dos colchões de ar na piscina coberta. à 50 metros da Rua Norte e à 100 metros da Rua Leste. que foram posicionados logo abaixo do topo. A seção do meio a seguir contém textos e imagens. esquerda: 100px) mas não necessariamente terá que ser top e left. Posicionamento absoluto é um conceito fácil de se entender. Nas definições de estilos usamos um símbolo # ('tralha') antes do nome que identifica 'id' o box. evite misturar pixel com percentagem. Eles efetivamente flutuam colocando-se de cima para baixo na página. O primeiro box ocupa a posição mais acima. Você terá que inventar os seus próprios.Páginas Web. Lembre-se que este caso é especial. Posicionamneto relativo considera que boxes CSS localizam-se próximos a um outro box. para a barra de navegação e o logotipo. Isto é feito através de um 'identificador' . bottom e left (fundo e esquerda) ou bottom e right (fundo e direita). ou float: right. Acabado o espaço lateral eles ocuparão a posição abaixo daqueles que já flutuaram. Você poderá evitar uma situação destas assegurandose que a soma total das larguras dos boxes não ultrapasse a largura da página. Este exemplo é um pouco fora da vida real. pois é assim que as coisas funcionam na vida real. o seguinte abaixo deste. são semelhantes a recortes de notícias e imagens de jornais que se faz para montagem de um álbum de recortes. Provavelmente haverão alguns ou talvez muitos boxes CSS <divs> em uma página e assim devemos darlhes nomes que os identifique. Um exemplo simples ocorre quando você divide sua página em três áreas horizontais. Este exemplo foi construido com 5 (cinco) boxes horizontais. ou ainda. As possibilidades de estilizações são infinitas. Isto pode ser feito especificando-se as larguras ('width') em pixel . mantendo a soma total igual a 100 . Aqui você tem alguns boxes CSS estilizados e cada um deles com as definições de estilo mostradas. Ao posicionar de maneira relativa. poderá ser top e right (topo e direita).ou preferencialmente um pouco abaixo de 100. Posicionamento absoluto Além de ter um comprimento e uma altura os boxes CSS podem ser colocados em qualquer lugar da página através da definição CSS position: absolute. definir as larguras em percentagens. o primeiro colaria na cobertura. O problema é que tais álbuns permanecem com suas dimensões fixas . você definirá float: left. ID's Ao criar seus boxes com definições de estilos segundo suas necessidades. começando uma nova camada.que abreviadamente denominamos id. Por exemplo: a localização de uma casa poderia ser descrita assim. left:100px (topo: 50px. não estarão disponíveis elementos HTML para adicionar à eles. E embaixo teremos o rodapé ('footer') com os direitos autorais e uma reprodução da barra de navegação superior. Um topo ('header') contendo um logotipo e uma barra de navegação. o seguinte em baixo dele e seguinte em baixo e assim por diante. Manual de Programação . o próximo box localiza-se abaixo do primeiro. Observe que a margem à direita é menor que à esquerda para compensar visualmente as diferenças de comprimento das linhas à direita. Uma id deve ser única por box e identifica um box na sua página. dizer que ela localiza-se a 5 metros da sua casa. pois os resultados podem ser imprevisíveis.poderia ficar fora da página. os boxes vão flutuando um ao lado do outro enquanto houver espaço lateral. sendo os dois boxes a mais. Para fazer com que boxes flutem um ao lado do outro em lugar de em baixo. A maneira mais simples de posicionar um box seria definir algo como top:50px. Posicionamento relativo Se você quiser descrever a posição da porta da casa do seu vizinho você poderia dizer que ela encontrase a 70 metros da Rua Norte e a 100 metros da Rua Leste. permitindo que tanto você quanto o navegador saibam como apresentar o box com aquele nome. as margens são contadas para dentro e para todos os demais boxes CSS são contadas para fora do box. Esta página de exemplos para boxes flutuantes mostra o comportamento de boxes posicionados de maneira relativa em colunas simples e múltiplas. Ou ainda. proporcionando melhor noção de centralização. mas imagine-se dentro de uma piscina coberta onde uma pilha de colchões de ar flutuassem.

</div> . Neste caso poderemos reutilizar um box em lugar de criar vários. você queira dividir a seção central em colunas. dentro de sua respectiva 'id' como mostrado abaixo.JUNTANDO TUDO A mais simples das páginas Web usará uma mistura de ids e classes e possivelmente uma combinação de posicionamento absoluto e relativo...#header {.. nossos boxes herdarão aqueles estilos. Podemos ainda ter os elementos inline que se referem a um nível de caracteres. Exatamente como se tem 'classes' de flores ou insetos.</div> Span Classes (mas não IDs) podem ser aplicadas em fragmentos de textos. usamos um ...... criamos uma classe chamada . Isto pode ser para cor..midcol {} E.</div> <div id="logo">. Classes Em alguns casos você irá se utilizar do mesmo box por várias vezes em uma página..} #navbar {...</div> <div id="midsection">.} #footer {. Um box que pode ser reutilizado é nomeado com uma classe.} #logo {.</div> Caso tenhamos declarado estilos para o corpo da página 'body'.. usada para links relacionados ou de anunciantes e parceiros...} #midsection {.</div> Use <span>. existem elementos nível de bloco que são boxes com uma única ''id' ou uma 'classe' reutilizavel.rightcol {} Manual de Programação .redtext { #c00 } <span class="redtext">This is red text!</span> Em lugar de colocar as palavras que queremos em vermelho. Isto é conhecido como elemento inline por aplicar-se a uma porção de texto dentro de uma <div>.} Então colocamos as definições de estilo para o box. usamos <span>.. é usada em uma página Web para menu de navegação. . <div id="header">. Assim. à direita uma outra coluna também de largura reduzida. . Agora estamos começando a chegar em algum lugar. Uma coluna à direita. e talvez..... Para mostrar que temos uma 'classe' e não uma 'id' única.</span> sempre que você quiser estilizar diferentemente uma porção de texto que difere do texto como um todo. Qualquer estilo que você declare para o box tem prioridade sobre aquele declarado para 'body'.</div> <div class="midsection">.. tamanho....redtext ..midsection {} pode ser agora usado quantas vezes quisermos e a sintaxe para a div é conforme mostrado abaixo..</span>.... Isto é o efeito 'cascata'.. Se desejarmos que algumas palavras do texto tenham a cor vermelha. <div class="midsection">.. em CSS. peso ou qualquer outra propriedade.. . dentro de <div>.</div> <div id="navbar">. Para isto usaremos a declaração float:left tornando as coisas mais simples. Vamos dar uma olhada na nossa página composta de cinco boxes que estudamos na etapa número 8.. de largura reduzida.. normalmente.. (ponto) em lugar de uma # ('tralha').</div> <div id="footer">. uma classe aqui é basicamente um mesmo box com conteúdo diferente. Suponha que você queira dividir a seção central da página mostrada em dois ou mais boxes separados. família de fonte..leftcol {} A coluna do meio é para o conteúdo principal . .. ETAPA NÚMERO 9 .</div> <div class="midsection">..

tudo que fizemos será reprovado. <div class="leftcol">. É uma boa idéia submeter seu HTML e as CSS a um checador de sintaxe ou a um validador. Uma das vantagens de se utilizar um editor de HTML decente é que ele vem com um checador de sintaxe embutido.Validador CSS do W3C .marcação de códigos e páginas de exemplos estão todas erradas! Bem. Algo aparentemente insignificante como uma vírgula ou uma aspas fora do lugar. Você não dispõe de checadores em editores de textos simples e de propósitos gerais. mas também pode ser que você tenha digitado errado. no topo da página .acima da tag de abertura <html>.e se você não estiver nos EUA? Assim como suas escritas em inglês ou seja lá qual for o idioma usado é checado pelo processador de texto. Este exemplo mostra a seção central única . outras gostam de fazer tudo conforme 'reza o manual' e preferem usar 'Strict'.. Doctypes e validação Chegamos a décima etapa das lições 'CSS desde o início' e eu tenho uma confissão a fazer. Todos os exemplos que mostrei. ..esta é a versão atual e a mais utilizada.onde você faz o upload de seu arquivo e obtém de imediato um relatório de erros ou de não existência de erros! É evidente que o programa tem que saber qual é a 'linguagem' que foi usada na marcação .. A maioria das pessoas está satisfeita com o uso de 'Transitional' pois ele não é tão rígido com a marcação. mas entenderão o que você quis dizer e não haverá prejuizo para o entendimento. as pessoas provavelmente julgarão tratar-se de um erro de datilografia. Transitional é um conjunto um pouco mais flexível e permite escrever algum HTML mais antigo e para algumas peculiaridades próprias de navegadores. ele precisa saber qual é a 'linguagem' usada. a existência de verbo em uma frase.01 . Não deixe qualquer uma das divs sem conteúdo. alertar para o uso repetido de uma mesma palavra 'e' importuná-lo incessantemente.</div> <div class="midcol">. Coloque espaços &nbsp.. Se você comete um erro na sua escrita. 'Transitional' e 'Frame Set'.. Você já deve estar familiarizado com o conceito de checador de sintaxe. foram escritos usando o HTML 4. ainda que elas tenham que ser preenchidas com espaços vazios. <!DOCTYPE HTML PUBLIC "-//W3C//DTD Manual de Programação . você terá um checador e ainda sugestões de como corrigir erros. dentro delas. o HTML e as CSS podem e devem ser checadas também.. Se você não possui um editor assim.01 .midsection transformada em três colunas flutuando à esquerda. Assim como mostrado abaixo. é uma história diferente. Para dizer ao navegador qual a linguagem de marcação e a sub-versão que você está utilizando.'Strict'.existem várias versões ('linguagens') do HTML. com uma lista de palavras de um dicionário e alerta quando encontra alguma palavra que não está no dicionário. Existem sub-versões do HTML 4. O que é um programa de validação? deve estar você perguntando.</div> <div classs="rightcol">. Um pequeno deslize no HTML ou nas CSS.</div> Esta técnica amplia e torna mais interessante a construção do layout. Não temos nos utilizado do uso de 'frames' pois eles estão em desuso desde o aparecimento das CSS. Se você possui um editor tipo HomeSite ou BBEdit ou um editor WYSIWYG tal como o Dreamweaver ou GoLive. poderá usar um validador online fornecido pelo W3C . Para que um checador de palavras ou de gramática possa funcionar a contento. contudo se você testar o que fizemos em um verificador de sintaxe ou submeter a uma programa de validação.Todas as três colunas terão sua largura definida em percentagens de modo a que possam se ajustar de maneira fluida à largura da página. por outro lado. Tudo o que eu mostrei para vocês até aqui. Frame Set não é muito usado nos dias atuais. Strict é um conjunto de regras muito rígidas que definem o que pode e o que não pode ser escrito em HTML. O meu checador de inglês da Inglaterra é diferente do inglês dos EUA . pode fazer toda a diferença entre uma página funcionando ou não . Observe que eu usei classes para nomear as colunas de modo a que poderei reusá-las mais adiante. Pode ser que a palavra não esteja listada no dicionário. Em processadores de textos mais sofisticados é possível checar a gramática. coloque a declaração de DocType logo no início da marcação. O checador compara as palavras que você digita.. tudo provavelmente funcionou muito bem a menos que você esteja usando um navegador muito antigo.isto dependerá do erro e de como o navegador tratará o erro.Validador HTML do W3C . Provavelmente existe um deles no seu programa processador de textos..

01 Transitional//EN" "http://www. Trata-se de um arquivo de texto puro .ESTILIZANDO TABELAS Embora as tabelas venham sendo usadas para layout desde as eras negras da Web. Esquemas coloridos devem ser minimizados ou mesmo abandonados completamente. Em lugar de colocar as folhas de estilo repetidamente em cada uma das páginas construidas.type="text/css" e os estilos foram otimizados para apresentação em uma tela de computador . ETAPA NÚMERO 11 . Para fazer uso de uma folha de estilo externa.css" type="text/css" media="screen"> Isto diz ao navegador para procurar as especificações de estilo em um arquivo chamado 'basicsstyles.org/TR/html4/loose. Quando eu estou satisfeito com as definições de estilo que construi copio-colo a folha em um arquivo novo e coloco um link para ele na página. Tabelas tem por razão de ser e finalidade. foram colocadas dentro da seção <head> das páginas. Ao adicionar o DocType. Nos tempos antigos (e de navegadores hoje ultrapassados) você alterava a apresentação de uma tabela Manual de Programação . você pode mudar completamente a apresentação de todo o site. o mais comum é que tenhamos várias páginas com uma apresentação semelhante em todo o Web site. alterando apenas um arquivo. poderei checar minhas páginas em um editor de HTML que forneça esta facilidade e estar seguro de que terei um código limpo.css'. Agora o validador saberá quais são as regras (normas) você esta utilizando na marcação e poderá fazer as análises necessárias. quando tudo o que se quer impresso é um texto em preto e branco.com/ para ver este princípio em ação. Vários designers construiram suas folhas de estilos para uma página padrão e isto demonstra de uma forma admirável como pode-se projetar os mais variados 'skins' para um mesmo 'esqueleto' da página. As folhas de estilo não estão limitadas às telas de computador. podemos voltar ao assunto estilizações. De fato. bastando que você faça a alteração na folha de estilo 'mestre'. eu começo meus projetos com a folha de estilo declarada no próprio documento. impressão.FOLHAS DE ESTILO EXTERNAS Todas as folhas de estilo que construi até agora.media="screen". pois basta olhar o código de marcação da página e ver como foram definidas as regras de estilo. basta que você saiba por enquanto que esta declaração no topo da página fornece ao validador as informações necessárias para ele fazer seu trabalho de validação. Contudo é muito raro termos páginas isoladas. concordará que uma folha de papel para impressão não tem o mesmo formato de uma tela de computador e ninguém gosta de desperdiçar preciosas quantidades de tinta em áreas preenchidas com cores sólidas. aquelas coisas que normalmente são colocadas em 'folha de dados' onde você precisa de linhas e colunas para relacionar textos ou mesmo figuras. <link rel="stylesheet" href="styles.w3..csszengarden. você poderá criá-las para servir a outras mídias como. basta lincá-la ao documento como mostrado a seguir: <link rel="stylesheet" href="basicsstyles. <link rel="stylesheet" href="printstyles. projeção e até mesmo braille. imediatamente abaixo daquele para mídia tela. Uma folha de estilo para impressão deve especificar uma área de impressão compatível com uma folha de papel e ao contrário de estilizações para a tela deverá usar tamanhos de fontes em 'points' (pt). ETAPA NÚMERO 10 . Então tudo o que você precisar fazer é adicionar outro link na seção <head> do documento. alterando completamente suas características. seria uma boa idéia que tivessemos uma única folha de estilos que pudesse ser lincada a cada uma das páginas. você poderá usar um link como mostrado a seguir.HTML 4.. Dê uma olhada em http://www. Agora que já sabemos da importância do Doctype.css" type="text/css" media="print"> Se você decidir que sua folha de estilo serve tanto para tela como para impressora. penso que devo mostrá-las aqui. Isto permite mudar a cor de fundo das páginas ou usar um tipo ou tamanho de fonte diferente para todo o site. Se você pensar sobre isto. Este procedimento facilita o entendimento.css" type="text/css" media="all"> Embora a maioria das minhas folhas de estilos sejam do tipo externa. Tudo está colocado em um único lugar. a apresentação de dados tabulares.dtd"> Não vou analisar a declaração agora. para mostrar que layout construido com CSS oferece muito mais escopo e versatilidade.

A prática usual de definir uma altura e uma largura para a tabela em pixel ou em percentagem não é mais válida. Na verdade é melhor que você não conte com eles desde já. Você poderá construir sua estrutura de tabela usando display:table. eu sou um fã de Mondrian. Se você definir font-family: verdana. td e uma divisão de uma linha da tabela. Se você tentar colocar uma imagem de fundo que seja renderizada no Netscape 4 ou anterior tera que repetí-la para cada célula individualmente. and display:table-cell. sans-serif e color: #009 . mas minha intenção aqui é demonstrar que se você quiser. Nota do tradutor: No original desta página o autor mostrou a seguir 5 tabelas estilizadas e comentadas. mas não herdarão tamanhos de fontes e nem alinhamentos de textos. Ver Tabela 2. Uma grande quantidade destes atributos atualmente está em desuso e há algum tempo já não são mais válidos . Você pode tirar vantagem desta hierarquia. De acordo com os dados contidos na tabela você poderá dar maior ênfase às linhas horizontais ou às colunas verticais. Uma definição para td prevalece sobre uma para tr. Se você definir uma cor preta para fundo da tabela e uma cor branca para td e um cellspacing="2". Aqui um efeito de alto relevo em 3D conseguido através de definições de estilos para as cores das bordas. Você deve estar pensando em coluna. Para as linhas do cabeçalho da tabela foi definida uma cor escura. A estilização de tabelas com CSS tem seus macetes próprios e nem sempre é simples e imediata. td . OK. com as regras de estilo para cada uma delas incorporadas na própria página. etc. tr .e de suas células. poderá estilizar as células da tabela individualmente.com a finalidade de facilitar a tarefa. criei uma página separada para mostrar as tabelas estilizadas e assim continuar com minha página válida. alguns. que por sua vez prevalece sobre aquelas para table. Ver Tabela 5. Como estou usando em meu site marcação XHTML 1. como se tivesse dividido a imagem em múltiplas partes. etc . imagens de fundo. uma fila horizontal de células. Ver Tabela 4. Manual de Programação . arial. mas não todos os estilos. Esta simples tabela tem um fundo definido como transparent e uma cor cinza bem clarinha pra o fundo das tds. Há também uma hierarquia para os elementos de tabelas. Veja o código fonte da página dos exemplos para estudar as regras de estilização das tabelas. As possibilidades de estilização de tabelas são muitas. você terá uma tabela com com células brancas e uma borda preta de 2px ao redor. para o corpo (body) de sua página. para o futuro é bom não contar com eles. tornando a tarefa pouco usual e frustrante. Usei um gradiente para as linhas do cabeçalho e uma borda esquerda na cor cinza clara para separar as colunas. as tabelas herdarão estas definições. mas o comportamento não é de coluna e você não pode colocar uma imagem de fundo na coluna ou estilizar. Ver Tabela 1. e para fins de estilizações usar os elementos HTML de tabelas . usando várias propriedades .1 que não admite alguns atributos usados pelo autor. tr é uma linha da tabela. th . Tabelas devem se auto ajustar em dimensões ao seu conteúdo. As tabelas herdam alguns estilos das DIV's em que forem colocadas.table . Quem disse que as tabelas tem que ser entediantes.muito embora eles hoje ainda funcionem.cores de fundo. no qual cada célula é uma div. Ver Tabela 3.