Introduo a CSS (Cascading Style Sheets) Ol pessoal vou comear primeiro dando uma introduo a esta tecnologia CSS,

antes de comearmos a trabalhar com est ferramenta. A Cascading Style Sheet (CSS) uma ferramenta utilizada para a construo da aparncia de pginas para Web. Permite o uso de uma tcnica diferente da convencional (HTML puro), possibilitando uma considervel reduo no tempo de trabalho. O recurso, que traduzido significa Folha de Estilo em Cascata, se tornou uma necessidade para quem deseja ser um WebDeveloper (Desenvolvedor Web) e para quem quer criar qualquer projeto para Web. Para utilizar CSS necessrio possuir conhecimentos bsicos de HTML, que podem ser adquiridos consultando livros ou tutoriais sobre o assunto, tambm estarei postando alguns tutoriais. Para aprendermos CSS sero necessrios alguns recursos: Editor de texto simples como o Notepad (Bloco de Notas) do Windows. Para ter acesso ao programa, acesse Iniciar > Programas > Acessrios ou Iniciar > Executar > notepad. Outros exemplos so o Pico para Linux e o Simple Text para Macintosh (Apple). Navegador para testar os cdigos, como o Opera, Firefox ou Internet Explore, por exemplo. importante ressaltar que um editor de texto simples o ideal para o aprendizado de HTML e CSS, uma vez que no afeta nem modifica o cdigo digitado. Assim, os acertos e erros de codificao sero de responsabilidade de quem digitou o cdigo e no do software utilizado. Mas afinal, o que CSS? Trata-se de uma linguagem para estilos que definem o layout de documentos HTML controlando, por exemplo, fontes, cores, margens, linhas, alturas, larguras, imagens de fundo e posicionamento. A linguagem HTML tambm pode ser usada para definir o layout de web sites, mas isso no mais recomendado, de acordo com os padres da W3C recomendada utilizao da CSS para o design. Contudo, a CSS proporciona mais opes, mais precisa e sofisticada, alm de ser suportada pela maioria dos navegadores atuais. A principal diferena entre CSS e HTML que o primeiro usado para formatar contedos e o segundo para contedos j estruturados. At pouco tempo atrs, a linguagem HTML era usada somente para estruturar textos. Um programador podia marcar seus textos definindo isto um cabealho ou isto um pargrafo, usando tags HTML tais como

<h1>
e

<p>
. A medida que a Web ganhou popularidade, os designers precisavam encontrar meios de construir layout para os documentos on-line. Para suprir essa necessidade, os fabricantes de navegadores (naquela poca Netscape e a Microsoft)inventaram novas tags, como

<font>
, que se diferenciavam das originais do HTML para a construo de layouts, e no apenas para a estruturao da pgina. Isso fez que se distorcesse o uso de tags, inicialmente projetadas para estruturar, como, por exemplo,

<table>

, que passou a ser empregadas para layout. Muitas dessas tags, como

<blink>
, eram suportadas somente por determinados navegadores. A frase Voc precisa do navegador X para visualizar esta pagina passou a ser tornar comum nos websites. Devido a essas questes, o W3C* criou a CSS, colocando disposio dos webdesigners meios sofisticados de projetar layout, sendo estas suportados por todos os navegadores. Dessa forma, a separao dos estilos de apresentao da marcao dos contedos facilitou a manuteno das pginas. Entre os benefcios do uso de CSS para o desenvolvimento de pginas para web, podemos incluir alguns itens: Controle do layout de vrios documentos a partir de um simples arquivo CSS; Aplicao de diferente layout para servir diferentes mdias (telas, impressoras etc.); Emprego de variadas tcnicas de desenvolvimento. Ol pessoal! Vou estar fazendo uma seqencia de artigos relacionado a CSS, quem ainda no leu o post anterior Introduo a CSS, leia para poder ficar por dentro dessa ferramenta. bem simples seu entendimento, no artigo de hoje vou falar sobre a sintaxe que bem simples. Vamos l?

A sintaxe CSS e formada por seletor, propriedade e valor. seletor { propriedade:valor; } Seletor: O seletor o que indica ao CSS qual tag que ser formatada. Ela pode ser de trs formas, tag HTML, class ou ID. Ex Tag HTML: p, a, ul, div, etc Class: .menu, .topo, .geral ID: #menu, #geral, #conteudo Detalhe, de acordo com as recomendaes da W3C, as IDs so unicas dentro de um documento (X)HTML ou seja, se criou dois menus, eles no podero ter a mesma ID. Veja o exemplo. Errado: <div id=menu>Menu 1</div> <div id=menu>Menu 2</div> Certo: <div id=menu>Menu 1</div>

<div id=submenu>Menu 2</div> J as class elas podem ser repetidas dentro de um mesmo documento diferente da ID. Ex: <div class=menu>Menu 1</div> <div class=submenu>Menu 2</div> Exemplo de seletor: p { propriedade:valor;} .menu { propriedade:valor;} #geral { propriedade:valor;} No exemplo acima mostra como o seletor aplicado a sintaxe. Propriedade: A propriedade onde definimos como ser nossa formatao, como cor do texto, margem, tamanho Veja no exemplo abaixo o nome de algumas propriedade. Ex: Color: Cor do texto; Background-color: Cor de fundo; margin: Margem; font-size: Tamanho do texto; Existe varias propriedade, apenas citei algumas. Valor: As propriedade mencionadas acima necessitam de um valor prprio para que elas funcionem. Ex: Color: Cor em exadecimal (#FFFFFF) ou RGB(255,255,255) Background-color: Tambm utliza exadecimal ou RGB; margin: A margem pode ser definada em pixel, cm ; font-size: Pode usar px, pt; Agora vamos ver como ficaria o cdigo CSS. Nesse exemplo vou apenas colorir a cor de fundo e alterar a cor e tamanho do texto. Ex: <style type=text/css>

body { color:#FFFFFF; background-color:#1F1BE3; font-size:12pt;} p { text-align:center;} </style> <body> <p>MXStudio</p> </body> Como puderam observar utilizei mais de uma propriedade em um mesmo seletor, isso e totalmente valido, desde que separados por ponto-e-virgula(;). Nos prximos artigos vou estar mostrando h fazer varias coisas com CSS, como, menu, layout Bom pessoal por hoje s! At++!