Cuiabá 71

O ID Selector é diferente do Class Selector. Enquanto um Class Selector pode ser aplicado a diversos elementos de uma página, o ID Selector sempre será aplicado a somente um elemento. (Conceito de ID> identificação tipo chave primária, sem duplicação ou única)

Os atributos ID devem ser definidos sem duplicação de valores (únicos) em um mesmo documento.

#conteudo {color: #0000FF}

Para aplicar um estilo definido para um ID Selector:

<p id=”conteudo”>Algum texto</p>

Você pode especificar um ID Selector vinculado a uma tag:

p#destaque {color: #0000FF}

Desta forma somente a tag P definida com o ID especificado será formatada

<p id=”conteudo”>Algum texto</p>
A tag p sofrerá alteração
<h1 id=”conteudo”>Titulo Principal</h1>

A tag h1 não será alterada
Para inserir comentários em arquivos CSS, utilize /* para iniciar o comentário e */ para encerrar:

/* Comentário */

LEIA MAIS:
Macromedia Developer Center - Why Use CSS?
Designing with CSS – Part 1: Understanding CSS Design Concepts
http://www.macromedia.com/devnet/mx/dreamweaver/articles/css_concepts.html

Com um Class Selector você pode definir diferentes estilos para o mesmo elemento HTML. Por exemplo, se você quiser ter dois parágrafos com alinhamento diferentes:

p.right {text-align: right}
p.center {text-align: center}

Para utilizar o Class Selector você deve definir uma classe para o elemento HTML:

<p class=”right”>
Este parágrafo será alinhado a direita.
</p>
<p class=”center”>
Este parágrafo será alinhado ao centro.
</p>

Você também pode omitir o nome da tag no seletor caso deseje utilizar a classe de estilo para tags diferentes:

.center {text-align: center}

Basta definir a mesma classe para tags diferentes:

<h1 class=”center”>
Este cabeçalho/titulo será alinhado ao centro
</h1>

<p class=”center”>
Este parágrafo também será alinhado ao centro
</p>

Com um Tag Selector você pode redefinir os estilos padrões para um elemento HTML.

h1{
font-size: 80%;
font-family: arial;
}

Com este código CSS, estamos redefinindo a aparência de todos os elementos h1 (titulo) contidos no documento.

Os principais tipos de seletores de CSS são:

• Tag Selector
• Class Selector
• ID Selector

Você pode agrupar seletores. Basta utilizar a vírgula para separá-los. Desta forma, todos os seletores terão o mesmo valor para as propriedades definidas.

body, p, td{
font-size: 80%;
font-family: verdana;
}

A sintaxe do CSS é composta de três elementos:

• Selector ou Seletor.
• Propriedade.
• Valor.

seletor {propriedade: valor}

O seletor é geralmente o elemento/tag HTML a ser formatada, a propriedade é o atributo a ser alterado/definido, sendo que cada propriedade tem seu valor definido.

A propriedade e o valor são separados por dois pontos e envolvidos por chaves.

body {color: black}

Se o valor for composto de mais de uma palavra, ponha entre aspas o valor.

p {font-family: “sans serif”}

Se for especificar mais de uma propriedade para o mesmo seletor, você deve separar cada propriedade utilizando ponto-e-vírgula.

p {text-align:center;color:red}

Para facilitar a interpretação do CSS, você pode colocar cada propriedade em uma linha separada.

p
{
text-align: center;
color: black;
font-family: arial;
}

Antes de entrar nos detalhes de seletores e propriedades, é preciso entender como o CSS funciona e como ele é aplicado aos elementos.

Você provavelmente deve ter se perguntado alguma vez o porquê do Cascading no nome da especificação. A resposta está na modularidade do CSS. De modo a permitir o aproveitamento máximo, o CSS permite que várias folhas de estilo sejam aplicadas a um documento e que várias regras se referiram a múltiplos elementos.

Para que isso funcione muitas vezes será preciso resolver os conflitos que porventura existam entre várias regras. Assim, é preciso embutir alguma espécie de precedência de regras - a exemplo das operações matemáticas. A especificação, então, atribui um peso a cada uma das formas pelas quais um estilo é especificado para um elemento. Por exemplo, estilos especificados pelo usuário do documento possuem a maior importância do que estilos especificados pelo criador do documento. Da mesma forma, estilos importados por uma folha de estilos possuem menor peso do que os estilos especificados na própria folha. O estilo final de um elemento, portanto, é determinado pela aplicação de cada regra em ordem inversa de peso. Ou seja, estilos menos importantes são aplicados primeiro e podem ser sobrepostos por estilos de maior importância. Essa maneira de resolver conflitos causa um efeito de cascata na aplicação dos estilos, e daí vem o Cascading do nome da especificação.

Como especificado acima, as folhas de estilo podem ser definidas de diversas formas. Inclusive pode-se referenciar a mais de uma folha de estilos externa em um simples documento HTML.

Se houver mais de um estilo definido, por exemplo, um estilo externo e um estilo em linha, definidos para o mesmo elemento, qual estilo irá prevalecer?

Falando de forma geral podemos dizer que todos os estilos serão aplicados em cascata ou em seqüência, criando o que poderíamos dizer uma nova folha de estilos “virtual”, seguindo a seguinte regra de precedência, do mais amplo para o mais específico:

1. Padrão do Browser.
2. Folha de estilo externa.
3. Folha de estilo interna.
4. Estilo Inline (definido junto ao elemento ou tag HTML).

Ou seja, se for definido um tamanho de fonte (font size) para uma tag (ex: <p>) ao mesmo tempo em uma folha de estilos externa e em uma folha de estilos interna, prevalece o tamanho definido na folha de estilos interna.

Agora, se forem definidas propriedades diferentes para a mesma tag, essas propriedades são aplicados em conjunto, criando um novo estilo virtual.

A sintaxe do CSS é uma sintaxe de marcação, definindo o elemento(s) a ser formatado, a propriedade e o valor:

body {

font-size : 70%;
color : #000000;
background-color : #F1F1F1;
margin : 0;

}
As informações sobre os estilos podem ser armazenadas:

• Interno - No cabeçalho de um documento HTML.
• Inline ou Em Linha - Junto a uma determinada tag.
• Externo – Em um documento .css separado vinculado ao documento HTML através de uma referência externa no cabeçalho do documento.

Uma das metas ao se utilizar os conceitos do Web Standards é remover toda a apresentação do código (X)HTML, deixando-o limpo e semanticamente correto.
Enquanto o (X)HTML define a estrutura, O CSS fica responsável pela formatação visual e posicionamento de elementos dentro de uma página Web.

Utilizando CSS, um desenvolvedor pode definir elementos da apresentação (o layout, fonts, cores, bordas, etc), independentemente da marcação do documento Web. Os estilos podem (e devem, na maioria dos casos) serem definidos em um documento separado com extensão .css e compartilhados entre todos ou um grupo de documentos relacionados do mesmo website. Desta forma, alterar ou implementar novos estilos é tarefa fácil, bastando para isso alterar somente um arquivo do projeto, já que ele está referenciado entre diversos documentos, sendo renderizado dinamicamente na medida que o browser carrega o arquivo de definições ou a folha de estilos externa (.css).

Ao separar formatação do conteúdo, você está tornando seu código semanticamente correto. Ou seja, não utilizando marcação de conteúdo (HTML) para formatação (uso incorreto).

Outra vantagem na separação é a possibilidade de tornar disponível o mesmo conteúdo para múltiplos devices (aparelhos) sem necessidade de duplicar o conteúdo, alterando somente a formatação (CSS). Isto inclusive pode ser feito de forma dinâmica ou utilizando linguagem script (Javascript, por exemplo). Entre os devices que suportam conteúdo Web podemos citar:

• Browsers.
• Impressoras.
• PDAs (Personal Digital Assistants).
• Telefones Celulares.
• Equipamentos wireless.

Para obter uma demonstração do que pode ser conseguido visualmente por meio de um design baseado em CSS, acesse o site Zen Garden, onde diferentes desenvolvedores criaram para o mesmo conteúdo (documento HTML), diferentes arquivos CSS, resultando em documentos com o design 100% diferentes entre si. Vale a pena conferir! http://www.csszengarden.com/tr/portuguese/