CSS no Dreamweaver, por Rodolfo Vasco

1. O que são CSS?

Cascading Style sheets ou folha de estilo em cascata:

Cascata, já o "C" é de cascading = cascata, já que pode ser utilido mais de um estilo nas paginas, e o browser precisar saber qual usar e onde (em que tags) aplicá-los.

Paginas: O "S" vem de Sheet = Folhas ou paginas. Isso mesmo, Paginas! Elas são uma série de introduções à parte do codigo HTML, mas que ainda asim atuam sobre ele.

Estilo, o outro "S" quer dizer Style = estilo, pois estilos que serão definidos em todo site para que a aparencia das paginas fique como você deseja

1.2 Conhecendo mais o CSS.

Há três formas diferentes dos estilos CSS serem aplicadas às pagina. O Dreamweaver (automaticamente) faz a parte fácil do trabalho, ou seja, escrever os estilos sem erros de sintaxe. Porém, quem define onde, quando e quais tags os estilos afetarão, é você.

1.3 Formas de funcionamento do CSS.

1.3.1 Lincado : Esse método cria páginas de estilos com definições para as tags que você deseja controlar, tais definições serão salvas separadamente como se fossem um arquivo de texto, porém com a extenção .css. Ele será carregado no documento HTML atravez de um link, entre as tags <head> e </head> das páginas que desejar aplicá-los. Automaticamente elas incorporarão todos os estilos. O exemplo abaixo mostra o link feito de um arquivo (em vermelho) CSS.

1.3.2 topo da pagina: Esse método define os estilos dentro de cada arquivo HTML, ou melhor, no topo dos mesmos, entre as tags <head> e </head>, Obviamente essa meneira de aplicar estilos demandará mais trabalho caso queira fazer alterações em um grupo de páginas HTML, o que o torna indicado para os casos em que os estilos precisam agir somente sobre uma determinada página. No exemplo abaixo temos as definições de um estilo em vermelho.

<!--

body {background-color: #000000; }

P {color: #FFFFFF; font-family: Verdana. Arial, Helvetica, sans-serif;

line-heigt: 20 px; }

</style>
< /head>
< body>

1.3.3 Em linha : Com esse método pode-se definir conjuntos simples de estilo que serão inseridos diretamente nas tags de um documento, afetando somente a tag onde o estilo foi aplicado, sendo válido somente até o momento em que a tag for fechada (</p> Por exemplo) No momento o estilo está em vermelho.

<p style=" font-family: "Times New Roman", Times, serif; Font-size: 14px;

Color: #003399; font-weight: bold" >
oi, sou um texto em times, negrito, tamanho 14, e azul!!

</p>

Das Três formas, essa útima é a única que o dreamweaver não faz. Mas nem por isso você será prejudicado. Existem uma outra maneira de conseguir os mesmos resultados usando classes (adiante vera como).

1.4 Usar Arquivo CSS.

Para usar um arquivo já pronto no Dreamweaver, basta importar o arquivo.

Abra a Paleta Estilos CSS em janela> Estilos CSS, ou mesmo na tecla de atalho shift+F11, na paleta click no seguinte botão> Anexar Folha de Estilo >.

1.4.2 Criar estilo CSS.

Caso queira criar seu proprio estilo CSS, click em Novo Estilo CSS>

Caso tenha duvida sobre como programar seu css no Dreamweaver, consulte a ajuda, sempre o seu melhor amigo.

1.4.3 Inserindo CSS

Lembra do topico 1.3, que mostra como são as CSS, agorea iremos utiza-las, A forma 1.3.1, se insere quase do mesmo jeito que se importa o CSS, mas apenas modificará a Forma, olhe a imagem:

A forma 1.3.2 é feita na forma dce Importação, oi proprio Dreamweaver ja Faz isso.

A Forma 1.3.3 é a mais facil, você deve estar se perguntando, por que é mais facil? Por que na paleta Propriedade tem um atalho. olhe a imagem, basta clicar no .

basta selecionar o Item que deseja inserir o CSS, como na imagem a seguir:

O código ficará assim:

O CSS no Dreamweaver é isso, bem basico, mas sempre facilitando nossa vida.

darcio <darciobans@hotmail.com>

muito bom o tuto só tem um pequeno problema sou usuario iniciante e nem sei por onde começa, vc pode me ajuda mandando um tutorial mais básico passo a passo css no dreamweaver ...obrigado

seara <sertao@alcidesmaya.com.br>

sou iniciante no css e gostaria de umtutorial mais basico de como começar a mexer nele no dw ou um completo ou ate uma apostila de css

Kmael <mimo3@bol.com.br>

Goataria muito de aprender CSS, mas tá complicado... pq os exemplos que mostram são sempre os mesmos, será que poderiam ensinar a desenvolver um site do começo ao fim, desde o com eço, sem ser apenas exemplos ?

mario geraldo <mario.geraldo.silva@itelrfonica.com.br>

O artigo é bom, tem me ajudado bastante, mas, na página "http://www.plugmasters.com.br/sys/materias/58/1/CSS-no-Dreamweaver", no meu micro não aparecem as imagens do item 1.4. Favor verificar o problema, ou me ajudar se meu brouser é incompatível. Grato

Fernando <fernandonegrao@hotmail.com>

Gostaria de saber quais cursos vc indicaria para quem gostaria de ingressar na carreira de desenvolver no ambiente Web.....

Elton <epcruzbrasil@bol.com.br>

Gostei do exemplo, se for possível diga como faço para linka as css de um mesmo site.
Um forte abraço.