Design de sites com CSS, por Thalis Valle

Olá! É com muita alegria que escrevo o meu primeiro artigo, aqui no Plugmasters. Espero colaborar no aprendizado daqueles que desejam crescer como profissionais de internet.

Para começar, gostaria de dizer que a Web é uma plataforma que organiza informações/dados. Entenda: Web é a junção de forma e conteúdo.

Sempre gosto de dizer que sites devem ser considerados como sendo uma plataforma - interface gráfica e arquitetura de informação -, que organiza e exibe dados/conteúdo.

Hoje, é extremamente importante planejar de maneira correta, toda a estrutura e funcionalidade de um site. Há quem diga que a forma é irrelevante, no contexto geral... Mas, eu digo que não, pois a forma é estrutura. Ela tem seu papel tão importante quanto a funcionalidade e navegabilidade, para trabalhar com conteúdo. A forma é a interface; design e estrutura.

Para tratar da maneira como é leiautado um site, devo lhes dizer que, é preciso entender/aprender CSS.

CSS ou Cascading Style Sheets (Folha de Estilos em Cascata) é uma tecnologia usada para dar forma ou formatar a estrutura de marcação. O CSS é responsável por definir o layout; cores, fontes, caixas, bordas, margens, comprimento, largura e imagens.

O CSS trabalha separadamente da estrutura de marcação de um documento HTML/XHTML. Isso possibilita arquivos mais leves, organizados e mais fáceis de serem alterados.

Alguns benefícios:

controle de formatação de variados documentos a partir de uma só folha de estilos;
aplicação de variados layouts para diferentes mídias (dispositivos móveis, telas, impressoras, etc.);
maior suporte de formatação sobre a interface gráfica do documento;
padronização da codificação entre diferentes dispositivos e plataformas

Por uma breve abordagem, é possível entender a importancia da tecnologia.

Como começar?

Antes de formatar um conteúdo, é preciso ter um documento de marcação já estruturado. Lembre: "CSS trabalha separadamente da estrutura de marcação de um documento HTML/XHTML." Em outras palavras, isso significa que um site pode ser desenvolvido por um programador, sem que ele tenha conhecimento de design. Somente depois da estrutura definida, passará para o responsável pelo layout/design do site. A partir daí é que o site ganha uma "cara".

Para ler o CSS, entre as tagas <head>...</head> é preciso declarar:

<style type="text/css">

</style>

ou

<style type="text/css">

</style>

Para concluir, escrevi um exemplo simples de formatação de Heading e Hypertext, ou título e corpo de texto:

Arquivo de marcação (XHTML):

<!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">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Lorem ipsum</title>
</head>

<body>
   <div id="pai">
       <div id="filho">
           <h1>Lorem traesent vestibulum molestie lacus</h1>
           <p>
               Lorem ipsum dolor sit amet consectetuer adipiscing esent vestibulum estie
               lacus aenean mmy hendrerit mauris phasellus porta tce suscipit varius mi
               cum sociis natoque penatibus et magnis.
           </p>
           <p>
               Lorem ipsum dolor sit amet consectetuer adipiscing esent vestibulum estie
               lacus aenean mmy hendrerit mauris phasellus porta tce suscipit varius mi
               cum sociis natoque penatibus et magnis.
           </p>
           <cite>Lorem ipsum</cite>
       </div>
   </div>
</body>

Arquivo CSS:

   <style type="text/css" media="all">
       
   </style>

Faça o teste!

Até a próxima!