CSS - Manual básico sobre estilo

Aprenda como desenvolver sites web mais bonitos, com uma melhor apresentação visual e, ao mesmo tempo, fácil de administrar. Conheça a CSS, as folhas de estilo em cascata.

juliaojunior

Por Juliao Junior em 23/06/2009

Hits: 45.040 Categoria: Javascript Subcategoria: Design

Parte 3: Seletores

As classes

Com as classes é possível definir diferentes estilos para o mesmo tipo de elemento HTML. Suponha que você gostaria de ter dois tipos de parágrafos em seu documento: um alinhado à direita, e um centralizado. Aqui está como fazer usando CSS:

p.right (text-align: right)
p.center (text-align: center)

A partir daí, para inserir esses estilos, precisaremos usar o atributo class no documento HTML:

<p class="right"> Este parágrafo será alinhado à direita. </p>
<p class="center"> Este parágrafo será centralizado. </p>

Para aplicar mais de uma classe em um mesmo elemento,, a sintaxe é:

<p class="center bold"> Este é um parágrafo. </p>

O parágrafo acima terá os estilos indicados da classe "center" e da classe "bold". Você também pode omitir o nome da tag ou do elemento quando escrever a definição de sua classe. Isso servirá para definir um estilo utilizado por todos os elementos HTML que possuem uma determinada classe. No exemplo abaixo, todos os elementos HTML com class = "center" serão centralizados:

.center (text-align: center)

No código abaixo tanto o elemento h1 como o elemento p possuem o seletor class = "center". Isto significa que ambos os elementos seguirão as regras do ".center" indicado acima:

<h1 class="center"> Este cabeçalho será centralizado</h1>
<p class="center"> Este parágrafo também será centralizado. </p>

Lembre-se: Não comece o nome de uma classe com um número! Não funcionará no Mozilla / Firefox.

Adicionar estilos a elementos com atributos particulares

Você também pode aplicar estilos para elementos HTML com atributos particulares. A regra de estilo abaixo irá funcionar com todos os elementos de input do tipo "text":

input [type = "text"] (background-color: blue)

O seletor id

Você também pode definir estilos para elementos HTML com o seletor id. O seletor id é definido com um "#". O exemplo do uso de estilos visto abaixo mostra a definição de um atributo ao seletor id com um valor "green":

#green (color: green)

Já a regra de estilo seguinte vale para o elemento p com um id com um valor "para1":

p #para1 {
text-align: center;
cor: red
}

Lembre-se: não inicie um ID com um número! Não funcionará no Mozilla / Firefox.

Páginas do artigo

   1. Introdução
   2. Sintaxe
   3. Seletores
   4. Inserindo comentários
   5. Inserindo as folhas de estilo

Outros artigos deste autor

APT - Fantástico gerenciador de pacotes

Aprenda Python - Guia "rápido"

Usando o JIGDO - How To

Introdução ao Linux: O editor de texto Nano

Octave - Programação científica no Linux

Leitura recomendada

Aplicações para webdesign

Web sites para TODOS

CSS - Manual de Estilo (parte 3)

BlueGriffon, o dreamweaver do Linux

CSS pela W3schools (Parte 1) - Uma introdução

Comentários

selector (propriedade: valor) esta errado, o correto seria selector {propriedade: valor}

#1 Comentário enviado por tayma em 23/06/2009 - 17:33h

selector (propriedade: valor) esta errado, o correto seria selector {propriedade: valor}

Não consegui editar o comentário, faltou a fonte também. Texto traduzido de http://www.w3schools.com/css/css_intro.asp

#2 Comentário enviado por tayma em 23/06/2009 - 17:36h

Não consegui editar o comentário, faltou a fonte também. Texto traduzido de http://www.w3schools.com/css/css_intro.asp

Olá Cícero!

Gostei muito do seu artigo. Bem didático.
O CSS não é algo tão intuitivo quanto o HTML, portanto não é fácil algo tão didático.
Parabéns.

Eu escrevi um breve artigo sobre Sprites em CSS, onde apanhei bastante para entender como funcionam as várias formas de posicionar algo na tela com CSS. Acredito que possa interessar também:
http://ribafs.org/portal/colaboracoes/1-ribamar-fs/123-sprites-em-css

#3 Comentário enviado por ribafs em 23/06/2009 - 19:21h

Olá Cícero!

Gostei muito do seu artigo. Bem didático.
O CSS não é algo tão intuitivo quanto o HTML, portanto não é fácil algo tão didático.
Parabéns.

Eu escrevi um breve artigo sobre Sprites em CSS, onde apanhei bastante para entender como funcionam as várias formas de posicionar algo na tela com CSS. Acredito que possa interessar também:
http://ribafs.org/portal/colaboracoes/1-ribamar-fs/123-sprites-em-css

Oi rebafs,

lerei seu artigo. E sugiro que pense em publicar suas matérias no VOL, afinal sempŕe é bom disponibilizar material de qualidade. para a comunidade.

#4 Comentário enviado por juliaojunior em 23/06/2009 - 19:42h

Oi rebafs,

lerei seu artigo. E sugiro que pense em publicar suas matérias no VOL, afinal sempŕe é bom disponibilizar material de qualidade. para a comunidade.

Olá, tayma. 

Acho desnecessário o link indicado por você, pois logo no início da matéria falei claramente que era uma tradução livre. Inclusive indiquei o endereço do site, comentando que a fonte tem matéria muito mais extensa do que apenas CSS. Bem, talvez você não tenha lido com a devida atenção. Mas tudo bem, fica o registro :)

#5 Comentário enviado por juliaojunior em 24/06/2009 - 00:23h

Olá, tayma.

Acho desnecessário o link indicado por você, pois logo no início da matéria falei claramente que era uma tradução livre. Inclusive indiquei o endereço do site, comentando que a fonte tem matéria muito mais extensa do que apenas CSS. Bem, talvez você não tenha lido com a devida atenção. Mas tudo bem, fica o registro :)

juliaojunior:
Excelente a sua iniciativa. Em lingua portuguesa, quando se fala em CSS lembra-se logo do Maujor, que é um dos pouquíssimos que abordam esse tema com propriedade e leveza. Estava realmente faltando um trabalho como o seu, de vez que o texto da W3C por vezes não é muito amigável para iniciantes.

ribafs:
Por que você não escreve a respeito aqui no VOL? Seria bastante útil.


A princípio, e devido a necessidade de trabalhar com inúmeros browsers antigos, fiquei restrito ao uso de tabelas e coisas típicas do HTML, e passaram a ser muito comuns para mim, já que eu passei a dominá-las. 

Achei a princípio CSS uma coisa supérflua (já que eu conseguia fazer "tudo" em HTML); penei com os "floatings" que "não funcionavam", mas depois percebi que era problema de bios ("Botaram um Imbecil Operando o Sistema"). 

Aí resolvi criar vergonha e coragem, e realmente APRENDER alguma coisa de CSS.

Hoje, embora ainda use HTML (às vezes 1.0) para os sites referentes a distros antigas, uso constantemente CSS nos sites 
institucionais contemporâneos.

Agora não quero saber de outra vida.

Como o meu pequeno conhecimento da matéria não me permite escrever a respeito, esse artigo veio a calhar, pois sempre é bom rever alguns conceitos conhecidos enquanto aprendemos algo de novo.

Espero que o tema continue e que seja enriquecido cada vez mais.

#6 Comentário enviado por Teixeira em 24/06/2009 - 08:12h

juliaojunior:
Excelente a sua iniciativa. Em lingua portuguesa, quando se fala em CSS lembra-se logo do Maujor, que é um dos pouquíssimos que abordam esse tema com propriedade e leveza. Estava realmente faltando um trabalho como o seu, de vez que o texto da W3C por vezes não é muito amigável para iniciantes.

ribafs:
Por que você não escreve a respeito aqui no VOL? Seria bastante útil.

A princípio, e devido a necessidade de trabalhar com inúmeros browsers antigos, fiquei restrito ao uso de tabelas e coisas típicas do HTML, e passaram a ser muito comuns para mim, já que eu passei a dominá-las.

Achei a princípio CSS uma coisa supérflua (já que eu conseguia fazer "tudo" em HTML); penei com os "floatings" que "não funcionavam", mas depois percebi que era problema de bios ("Botaram um [*****] Operando o Sistema").

Aí resolvi criar vergonha e coragem, e realmente APRENDER alguma coisa de CSS.

Hoje, embora ainda use HTML (às vezes 1.0) para os sites referentes a distros antigas, uso constantemente CSS nos sites
institucionais contemporâneos.

Agora não quero saber de outra vida.

Como o meu pequeno conhecimento da matéria não me permite escrever a respeito, esse artigo veio a calhar, pois sempre é bom rever alguns conceitos conhecidos enquanto aprendemos algo de novo.

Espero que o tema continue e que seja enriquecido cada vez mais.

Referente a inserção do CSS no HTML também faltou a opção @import:

<style type="text/css">
   @import url('exemplo1.css');
   @import url('exemplo2.css');
</style>

Bastante prático.

#7 Comentário enviado por removido em 13/07/2009 - 15:18h

Referente a inserção do CSS no HTML também faltou a opção @import:

<style type="text/css">
@import url('exemplo1.css');
@import url('exemplo2.css');
</style>

Bastante prático.

Bom artigo Cicero.
Gosto de trabalhar com HTML, não sou nenhum profissional, mas gosto de brincar de vez em quando, sei pouco de CSS e esse artigo vai me ajudar muito.
Abraço.

#8 Comentário enviado por rodrigozanuzzo em 11/08/2009 - 16:09h

Bom artigo Cicero.
Gosto de trabalhar com HTML, não sou nenhum profissional, mas gosto de brincar de vez em quando, sei pouco de CSS e esse artigo vai me ajudar muito.
Abraço.

Valeu. 
Bom artigo.
Mas ta precisando de uma continuação.

Abraço.

#9 Comentário enviado por felipemartinsss em 27/08/2009 - 11:01h

Valeu.
Bom artigo.
Mas ta precisando de uma continuação.

Abraço.

Muito interessante o tutorial.

[]'s

#10 Comentário enviado por removido em 06/11/2009 - 20:44h

Muito interessante o tutorial.

[]'s

Cara, ótimo, eu já conhecia o W3schools. mas meu inglês
é pessimo, e seu tutorial resolve o problema. valeu!

#11 Comentário enviado por wos- em 19/11/2009 - 15:29h

Cara, ótimo, eu já conhecia o W3schools. mas meu inglês
é pessimo, e seu tutorial resolve o problema. valeu!