Curso de CSS/O que é CSS

O que é e como funciona o CSS

Suponha que são 9h 30min da manhã e você trabalhe em uma empresa onde desenvolve e faz manutenção de sites. Seu chefe chegará às 10h 00min e quer ver um site, que você estava fazendo uma manutenção básica. Ele havia pedido para você trocar o layout da página principal do site e mudar a fonte do texto de todas as 537 páginas do site de um cliente. Mas, você esqueceu que deveria mudar a fonte do texto das páginas e falta apenas 30 minutos para a chegada de seu chefe.

Como você iria mudar a fonte de 537 páginas em apenas 30 minutos?

É para resolver problemas desse tipo que surgiu o cascading style sheets (também chamado de folhas de estilo em cascata em português) ou CSS.

O CSS é uma linguagem de folhas de estilo utilizada na internet para produção de sites.

Apesar de o HTML ter tags especiais para formatar páginas, o CSS, em algumas ocasiões, se torna mais adequado à fazer determinadas tarefas como no exemplo acima, onde ao invés de se editar todas aquelas páginas, era preciso apenas de uma edição no arquivo CSS.

História

a editar...

Sintaxe

O CSS tem uma sintaxe simples e utiliza uma série de palavras em inglês para especificar os nomes de diferentes estilos de propriedade de uma página.

Uma folha de estilo consiste de uma lista de regras. Cada regra ou conjunto de regras consiste de um ou mais seletores e um bloco de declaração. Uma declaração de bloco é composta por uma lista de declarações entre chaves. Cada declaração em si é uma propriedade, dois pontos (:), um valor, então um ponto e vírgula (;).

Em CSS, seletores são usados para declarar a quais elementos de marcação um estilo se aplica, uma espécie de expressão correspondente. Os seletores podem ser aplicados a todos os elementos de um tipo específico, ou apenas aqueles elementos que correspondam a um determinado atributo; elementos podem ser combinados, dependendo de como eles são colocados em relação uns aos outros no código de marcação, ou como eles estão aninhados dentro do objeto de documento modelo.

Pseudo-classe é outra forma de especificação usada em CSS para identificar os elementos de marcação, e, em alguns casos, ações específicas de usuário para o qual um bloco de declaração especial se aplica. Um exemplo freqüentemente utilizada é o :hover pseudo-classe que se aplica um estilo apenas quando o usuário 'aponta para' o elemento visível, normalmente, mantendo o cursor do mouse sobre ele. Isto é anexado a um seletor como em a:hover ou #elementid:hover. Outras pseudo-classes e pseudo-elementos são, por exemplo, :first-line, :visited or :before. Uma pseudo-classe especial é :lang(c), "c".

Uma pseudo-classe seleciona elementos inteiros, tais como :link ou :visited, considerando que um pseudo-elemento faz uma seleção que pode ser constituída por elementos parciais, tais como :first-line ou :first-letter.

Seletores podem ser combinados de outras formas também, especialmente em CSS 2.1, para alcançar uma maior especificidade e flexibilidade.

Aqui está um exemplo que resume as regras acima:

selector [, selector2, ...][:pseudo-class] {
  property: value;
 [property2: value2;
  ...]
}
/* comment */

tar...

Seletores

Definição de estilo é um conjunto de propriedades visuais para um elemento, o CSS define regras que fazem as definições de estilo casarem com um elemento ou grupo de elemento, o documento pode conter um bloco de css em um elemento style ou usando o element link apontando para um arquivo externo que contenha o bloco CSS.

Para uso com o CSS foi criado o atributo class que todo elemento pode conter.

As regras de casamento para o css são chamadas de seletores, uma definição de estilo pode ser casada com um seletor ou um grupo de seletores separados por vírgula, um seletor pode casar um elemento por:

• elemento do tipo : element_name { style definition; }
• elemento do tipo com a classe : element_name.class_name { style definition; }
• todos os elementos com a classe : .class_name { style definition; }
• o elemento com o id : #id_of_element { style definition; }
• casamento de um grupo : element_name_01, element_name_02, .class_name { style definition; }

text

Seletor de tipo

a editar...

Seletor classe

a editar...

Seletor id

a editar...

Propriedades

a editar...

Valores de propriedades

a editar...