Em um artigo anterior, falei sobre a importância e o uso de CSS (Cascate Style Shetting) em páginas HTML. Recurso importante para a contrução de um design diferenciado em nossas páginas.
Relembrando um pouco o tema, um estilo pode ser entendido como um “efeito” especial que aplicamos em nossas páginas. São exemplos de estilos: aplicar uma cor de fundo no link, dando-lhe uma aparência de figura, porém pesando bem menos, Modificar a aparência de um determinado ítem ao passarmos com o mouse sobre ele, entre outras coisas.

Podemos usar os estilos de duas maneiras diferenciada: ou em uma única página, ou criamos um estilo que será “linkado” para as páginas desejadas. A vantagem desse metodo é que se quisermos mudar algo, basta mudar a página do estilo e todas as páginas serão atualizadas automaticamente.

Nesse artigo / tutorial, de hoje, falarei sobre as duas maneiras de usar o estilo no Dreamweaver.

Criando uma página de estilos:

1) Inicie o Dreamweaver e clique em Texto – Estilos CSS – Novo Estilo

2) Na janela que irá abrir devemos definir um nome para nosso estilo. Na caixa nome digite o nome, não esqueça de colocar .(ponto)nome. Ex: .estilo;

3) Na definição de estilos podemos optar por três maneiras:

a. a primeira Criar Estilo Personalizado (classe) – você estará criando uma classe de estilo, que poderá aplicar a documentos diferenciadas na sua página. Por exemplo: definir um estilo para links, outro para parágrafos etc;

b. Na segunda opção Redefinir a tag de HTML – você irá definir um estilo para uma determinada tag;

c. A terceira opção – Utilizar o seletor de CSS – usamos quando vamos definir um estilo para links.

4) No caso, vamos deixar a primeira opção marcada;

5) Em Definir Em: devemos escolher se vamos utilizar esse estilo em um novo arquivo de Folha de estilo ou se vamos Usar nesse documento somente.

a. A primeira opção é aquela em que criamos uma folha de estilos que poderá ser aplicada em todo o nosso site, a segunda opção restringe a aplicação a apenas a página em questão.

6) Marque a primeira opção e clique em OK;

7) Abrirá uma janela para que você defina em que lugar irá salvar a sua folha de estilos;

a. O ideal é criar uma pasta específica para colocar os estilos criados.

8) Salve a folha de estilo;

9) Após salvar, abrirá uma janela para que definamos o estilo a ser criado.

a. Se escolher o estilo agora, você estará criando um estilo para o corpo da página (body), mas não é o que queremos, vamos criar agora um estilo para cada ítem (tag) da página. Por isso, clique em CANCELAR.

10) Depois clique novamente em Texto – Estilos CSS, mas dessa vez selecione Editar a Folha de Estilos;


11) Abrirá uma nova janela listando o estilo criado anteriomente;

12) Selecione o Estilos.css e clique em Novo;

13) Irá aparecer a janela inicial, onde escolheremos agora a segunda opção:Redefinir a tag de HTML;

14) Com essa opção selecionada, escolha a tag H1 – dessa maneira estaremos definindo uma aparência para a tag H1.

15) Em Definir em: mantenha a opção selecionada, que deverá ser o arquivo .css criado (estilos.css);

16) Clique em OK.

17) Aparecerá agora a janela Definição de Estilos


18) Essa janela é dividida em oito categorias e cada uma delas defini um “efeito” a ser aplicado na tag selecionada.

a. Por exemplo: vamos definir em Tipo: Fonte Verdana, tamanho menor (não tão pequeno quanto a fonte 1, nem tão grande quanto a fonte 2), peso Negrito, Estilo Normal, Variante Normal, Altura da linha Normal, Caixa Converter em Maiúscula, Cor #990000.

b. Para colocar uma cor ou figura no fundo da tag H1, clique em Fundo e defina: Cor: FFD9D9;

c. Como estou trabalhando com uma tag de cabeçalho (H1), só vou modificar o espaçamento entre as palavras. Mas, se fosse um bloco de texto, por exemplo, a tag Div ou Span, poderia modificar os outros atributos.

d. Vou pular o ítem Caixa, mas essa opção serve para delimitarmos o quanto de preenchimento ficará em torno da tag a ser modificada. Quando não modificamos nada neste ítem, ele mantém o padrão de preencher todo o corpo da tag.

e. Clicando na opção Borda, vamos definir uma borda para a nossa tag. Defina, por exemplo: O Estilo em Baixo-Relevo, a largura em 1 pixel, e a cor #990000. Se mantida a opção Idêntico para todas marcada, todas as bordas terão a mesma aparência (superior, inferior, esquerda e direita);

f. Em posicionamento, definimos a largura, a altura, a posição, visibilidade e o corte do preenchimento;

g. Pulei propositalmente Lista, pois esse estilo deve ser aplicado em Listas de numeração ou marcadores;

h. Por último temos Extensões, nele podemos definir a aparência do mouse ao passar sobre a tag modificada e aplicar um efeito sobre o ítem.

No final, clique em OK ou salvar.

È importante ressaltar que dentro da mesma página de estilo criada poderiamos aplicar estilos diversos em diferentes tags.

O procedimento seria o mesmo do que fizemos para criar o estilo em H1.

Salve e visualize no navegador.

Criando Classes de Estilos:

Criar classes significa aplicar estilos não baseados em Tags, mas priorizarmos o estilo. Por exemplo, Definir uma classe para um determinado parágrafo e outra classe diferente para um outro grupo. Dessa maneira, na mesma página teríamos parágrafos visualmente diferente.

Para criar uma classe, devemos iniciar da mesma maneira que anteriormente, repita todo o procedimento até o ítem 12 (só não se esqueça de dar um nome diferente a página de estilos criada).

A diferença começa a partir desse ítem:

1) Selecione o Estilo criado, no exemplo Estilo2.css;

2) Clique no botão Novo;

3) Deixe a primeira opção marcada, pois nós estamos criando uma nova classe, dê-lhe um nome qualquer, exemplo: .parágrafo;

4) Defina as propriedades dessa classe como visto anteriormente (ítem 18);

5) Se quiser criar uma nova classe basta repetir os procedimentos anteriores;