Curso de HTML/O CSS

Origem: Wikilivros, livros abertos por um mundo aberto.

[editar] CSS - Cascading Style Sheet

[editar] Introdução

Folhas de estilo em cascata (CSS) são documentos com a extensão .css utilizados para formatar páginas HTML. As alterações nas páginas HTML (cor de fonte, tamanho de fonte, tamanho da alguma coluna, etc) podem ser feitas a partir de um estilo CSS embutido no próprio código HTML ou definido em um arquivo externo. Com esse novo modelo de marcação, é possível se controlar a diagramação de um conjunto de páginas de um site, por exemplo, com apenas uma única matriz de estilo.

[editar] Mas porque?

Simples, os sites antigamente eram desenvolvidos com a estrutura junto com a formatação, isso gerava um trabalho imenso a cada alteração. E o código desses sites eram sujos demais, com tabelas desnecessárias e diversas "sujeiras" criadas por editores WYSIWYG.

Com o bom uso da CSS isso é possível ser contornado sem alterar a estrutura do projeto web.

[editar] Por que devo usar CSS?

• Código enxuto, deixa seu (X)HTML a ser usado para sua função principal, sem sujar o código, focando na acessibilidade e semântica;
• Facilidade de manutenção;
• Otimização de tempo de carregamento da página.

[editar] Sintaxe CSS

A sintaxe CSS é bem simples, segue abaixo um exemplo:

 seletor {
   propriedade: valor;
 }

Onde:

seletor é a tag HTML que você quer estilizar. propriedade é a propriedade CSS que você quer aplicar para o seletor. valor é o valor a ser declarado para propriedade.

[editar] Seletores

Existem diversas formas de estilizar um seletor, desde estilizar um seletor genérico, por exemplo:

 div {
    propriedade: valor;
 }
 
 /* Desta forma todos elementos 'DIV' receberiam as declarações CSS. */

Até estilizar apenas um único elemento, por exemplo, um elemento com o atributo 'ID' (lembre-se que em seu (X)HTML não pode existir elementos com o atributo 'ID' igual):

#ElementoUnico {
    propriedade: valor;
}
 
/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */

Nota: No caso de estilização por 'ID' não há diferenças se escrevermos "#ElementoUnico" ou "div#ElementoUnico" Veremos a seguir que pode existir diferenças na estilização utilizada desta forma com elementos com o atributo 'CLASS'.

[editar] Seletor de tag

Como já vimos, é o seletor CSS utilizado para elementos genéricos.

Exemplo:

p {
    propriedade: valor;
}
 
/* Desta forma todos elementos 'P' receberiam as declarações CSS. */

[editar] Seletor de ID

Como já vimos, é o seletor CSS utilizado para um elemento específico. Este seletor vem sempre acompanhado de "#" antes da 'ID'

Exemplo:

#ElementoUnico {
    propriedade: valor;
}
 
/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */

[editar] Seletor de Classe

No (X)HTML pode (e deve) ser re-aproveitadas classes de elementos que recebem as mesmas declarações. Este seletor vem sempre acompanhado de "." antes da 'CLASS'

Exemplo:

CÓDIGO HTML:
 
<a class="estilosIguais" href="#">Link A</a>
<a class="estilosIguais" href="#">Link B</a>
 
CÓDIGO CSS:
 
.estilosIguais {
    color:red;
    text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS com a classe 'estilosIguais" receberia as declarações CSS. */

Por quê se disse "ELEMENTOS" e não "LINKS HTML"? Por causa da forma que o CSS foi escrito.

Declarando apenas a classe como seletor, você está indicando que TODOS elementos com esta classe (seja link, ou não) receberá as propriedades do CSS.

Se o seu desejo for especificar estas propriedades apenas para links, você deve indicar a tag alvo antes da classe:

Exemplo:

CÓDIGO HTML:
 
<a class="estilosIguais" href="#">Link A</a>
<a class="estilosIguais" href="#">Link B</a>
 
<p class="estilosIguais">Este parágrafo receberá as declarações CSS?</p>
 
 
CÓDIGO CSS:
 
a.estilosIguais {
    color:red;
    text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS <a>, com a classe 'estilosIguais" receberia as declarações CSS. */