Começando com CSS

Desde 1996, temos que agradecer a Håkon Wium Lie e Gijsbert (Bert) Bos, pela recomendação da W3C sobre o CSS1. No ano anterior, juntos apresentaram a proposta do CSS para a W3C. Hoje, estamos colhendo os frutos dessa iniciativa.

A primeira recomendação da W3C, foi em 17 de Dezembro de 1996, com o CSS nível 1 e o mesmo foi revisado em 11 de abril de 2008. Em 07 de junho de 2011, saiu a recomendação do CSS nível 2, sendo editado em 17 de dezembro de 2014 (CSS 2.1). Também temos as recomendações: Módulo de cor nível 3 em 07 de junho de 2011, Seletores nível 3 em 29 de setembro de 2011, Media Queries em 19 de junho de 2012, e Atributos de estilo em 07 de novembro de 2013. Você pode dar uma olhada nos Trabalho atuais da W3C.

Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. -- CSS

Wikipédia >

Tipos

Tipos de CSS não se refere a forma de escrever as declarações e sim o local onde ele é inserido. Se ele estiver junto ao código HTML, chamamos de CSS inline, no início da página HTML ele é incorporado e quando colocado em um arquivo externo, ele é CSS linkado.

CSS Inline

O CSS Inline é aquele que é inserido junto ao código HTML, através do atributo style. Sua aplicação é bastante questionada já que o modelo fica bastante parecido com a antiga formatação via HTML.

<p style="color: #ffff00; font-size: 11px;">

CSS Incorporado

CSS incorporado é aquele que é inserido no início do código HTML dentro da tag . o modelo incorporado é melhor que o inline, mas ainda apresenta deficiências, já que ele terá efeito apenas sobre a página e não poderá ser reaproveitado para outras páginas.

<style type="text/css">
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FF0000;
}
</style>

CSS Linkado

CSS linkado é o modelo recomendado, pois neste modelo todo o código CSS fica em um arquivo separado, podendo ser linkado a várias páginas do site. Este é o melhor modelo para promover o reaproveitamento do código.

<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">

Seletores

Seletores são os elementos que o CSS pode formatar. São eles: Tags do HTML, classes (class) e identificadores (ID´s)

Classes

Diferente das tags, as classes não são aplicadas automaticamente no HTML. Uma vez criada, uma classe deverá ser aplicada manualmente no HTML. A função das classes é fazer formatações específicas onde as definições de tags não são atendidas.

.recuo {
	font-size: 10px;
	color: #ff0000;
}

Identificadores

Os identificadores em CSS correspondem ao ID no HTML, ou seja, quando você criar um ID no HTML significa que ele poderá ser formatado no CSS.

#site {
	width: 500px;
	background-color: #ffffff;
}

Pseudo-classes

Existem vários tipos de pseudo-classes. Podemos separá-las em dois grandes grupos:Estruturais e Dinâmicas. Existem outras pseudo-classes que não se encaixam nestes dois grupos principais, que controlam a interface do usuário, elementos de URLs e etc.

Pseudo-classes Dinâmicas

As pseudo-classes dinâmicas controlam os estados dos elementos. Abaixo, vão alguns deles:

:hover – quando passamos o mouse em cima do elemento.

:active – quando ativamos o elemento. Por exemplo, quando clicamos em um link e não soltamos o botão do mouse. Nesse momento, estamos ativando a ação do elemento. Esse estado é ativado também quando navegamos pelos links pelo teclado utilizando o TAB. Este estado não há em todos os elementos.

:visited – quando o link é visitado.

:focus – quando um elemento recebe foco. Muito utilizado em campos de texto. Quando clicamos em cima um campo de texto para escrever, o elemento está ganhando foco.

Pseudo-classes Estruturais

As pseudo-classes estruturais servem para selecionarmos um elemento da estrutura do código. Existem várias, por exemplo:

:first-child – seleciona o primeiro filho de um outro elemento.
:last-child – seleciona o último filho de um elemento.
:root – representa um elemento que é a raiz do documento. No HTML 4, é sempre a tag HTML.
:nth-child() – permite que selecionemos qualquer elemento no meio de um grupo de elementos. Por exemplo, você pode selecionar linhas de uma tabela. Assim, podemos fazer uma tabela zebrada, sem a ajuda de javascript. Há variações dessa pseudo-classe para podermos pegar os elementos de baixo para cima (:nth-last-child) e assim por diante. Testei aqui e isso não funcionou no meu FF3 (mac).
:lang() – seleciona elementos que tem o atributo lang com um valor específico. ( exemplo )

Pseudo-classes Estruturais - target

O seletor target do CSS3 nos permite aplicar uma formatação ao elemento que é alvo ativo de um link. ( exemplo )

div:target { z-index: 1000; }

Pseudo-classes Estruturais - atributo

No CSS3 também é possível formatarmos elementos que possuam um atributo específico.

a[title] {color: red;}
a[href="index.html"] {color: red;}
img[alt*="web"] {border: 5px solid red;}
a[href$=".pdf"] {background: url(pdf.png)}

Pseudo-elementos

Pseudo-elementos servem para adicionar efeitos a um seletor ou parte dele. A seguir, veremos dois pseudo-elementos do CSS3 muito úteis: :before e :after.

:before

O pseudo-elemento :before do CSS3 serve para adicionar alguma formatação ou conteúdo antes de um elemento.

li:before {
   content: "Livro: ";
   color: #D35529;
}

:after

Por sua vez, o pseudo-elemento :after do CSS3 serve para adicionar alguma formatação ou conteúdo após um elemento.

li:after {
   color: #D35529;
   font-weight: bold;
}

Conclusão

O CSS tem evoluindo muito e cada vez mais coisas novas estão aparecendo, até a maneira de escrever com os pré-processadores (SASS, LESS e STYLUS). O importante é sempre estar por dentro das boas práticas de utilização e manutenção, evita muitas dores de cabeça e deixa o projeto organizado. Cada projeto tem suas exigências e é importante fiar ligado nisso.

UI2CodeGo to Home Page