CSSCascading Style Sheet

CSS

é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata

é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet

O que eu posso fazer com CSS?

Sendo uma linguagem para estilos que define o layout de documentos HTML, é possível com CSS controlar fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamento e muito mais.

Qual é a diferença entre CSS e HTML?

HTMLé usado para estruturar conteúdos.

CSSé usado para formatar conteúdos estruturados.

Por que o CSS foi criado?

Com a evolução dos recursos de programação as páginas da internet estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, foram criadas novas tags e atributos de estilo para o HTML e em resumo ele passou a exercer tanto a função de estruturar o conteúdo quanto de estiliza-lo.

Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas.

A partir destas complicações, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout.

Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, bem como permitindo que as mesmas marcações de uma página sejam apresentadas em diferentes estilos

Como funciona CSS?

A regra CSS e sua sintaxe

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma Folha de Estilos.

Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

seletor { propriedade: valor; }

genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);

é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).

é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade quando houver mais de uma.

No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.

Para maior legibilidade das folhas de estilo, é de boa prática usar linhas distintas para escrever cada uma das declarações — propriedade e seu valor —, como mostrado a seguir.

Agrupamento de SeletoresUma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

Inserindo CSSExiste 3 métodos que podemos usar para inserir estilos CSS em uma página.

Método 1: Atributo styleUtilizando o atributo style, podemos aplicar estilos a um elemento específico. Exemplo:

Este é o método que deve ser menos utilizado, pois mistura o código CSS com o HTML e dificulta a manutenção do site e por ir contra a divisão de um página em camadas.

Método 2: TAG styleCom este método, aplicamos estilos apenas na página onde o elemento está inserido. Para isso, utiliza-se a tag style. Exemplo:

Todos os elementos style devem ficar dentro do elemento head de uma página. Os estilos em uma tag style tem precedência sobre os estilos em um arquivo externo.

Método 3: Arquivo externo CSSEste é o método que apresenta maior versatilidade. Um arquivo externo CSS pode ser ligado a quantas páginas desejarmos, desta forma deixando a manutenção de um site muito mais fácil (apenas um arquivo CSS pode controlar o visual de um site inteiro). Para este método, utilizamos o elemento link, da seguinte forma:

A tag link é uma tag que auto-fecha, assim como br e meta. O atributo href indica o endereço do arquivo CSS (hiper-referência), neste exemplo um arquivo chamado "arquivo.css" dentro de uma pasta "css". O atributo rel determina a relação deste "link" com a página, aqui sendo stylesheet ou folha de estilos. Se estivéssemos utilizando a sintaxe XHTML, também é necessário o atributo type com o valor text/css.

Classes e IDs

Para possibilitar uma organização melhor da página e da seleção de elementos por CSS, podemos utilizar classes e/ou ids para identificar tags.

Uma id, como o nome diz, é uma identificação única: só pode ser utilizada uma vez no documento inteiro. Normalmente é utilizada para identificar elementos estruturais da página.

Uma classe é reutilizável: pode se repetir na página e também combinar-se com outras (podemos pôr mais de uma classe em um elemento).

Ao escolher nomes para classes não use nomes que lembrem a apresentação. Prefira nomes que lembrem a estrutura. Para o exemplo mostrado nomear as classes .cor-preta e .cor-azul é uma péssima escolha. Se no futuro você resolver alterar a cor dos elementos azuis para verde vai ficar com uma regra CSS sem sentido.

Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. O comentário introduzido no código, será ignorado pelo navegador. Um comentário nas CSS começa com o "/*", e termina com " */". Veja o exemplo abaixo:

Divs e Spans

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id.

Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um mecanismo genérico para agrupar e prover estrutura aos documentos. O elemento div é um container nível de bloco e span é um elemento inline. Uma id e/ou class é em geral usada para fornecer uma identidade a uma div ou span com o propósito de fornecer uma referência para estilização por CSS ou captura por um script.

O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.

Enquanto <span> é usado dentro de um elemento nível de bloco, <div> é usado para agrupar um ou mais elementos nível de bloco.

Conclusão

Como tudo na vida, aprender bem HTML e CSS vem de prática, ou seja, quanto mais praticar, melhor você vai ficando e ganhando conhecimentos sobre as linguagens. Há vários sites e tutoriais que podem auxiliar e te ajudar com exemplos e dicas, tudo depende de você.

Então agora é mãos na massa e praticar! =)

Bibliografia e referências

Tecmundo - O que é CSS?HTML.net - Tutorial CSSMaujor - A regra CSS e sua sintaxe, Div ManiaHTML e CSS na prática - Inserindo CSS, Sintaxe e Seletores CSS