Tutorial de CSS - Indice dos Tópicos Abordados


1. Introdução ao CSS

CSS, sigla em inglês para Cascading Style Sheet que em português foi traduzido para Folha de Estilo em Cascata. É uma tecnologia que surgiu em 1996, padronizada pelo World Wide Web Consortium (a entidade que define os padrões da web), e que não é parte do HTML padrão, mas sim um conjunto de novas tags que implementam o estático HTML puro.

- cascade (kæˈskeɪd): s. cascata; v. cascatear, cair em cascata.

- style (staɪl): s. estilo (maneira), modelo; v. fazer um estilo.

- sheet (ʆit): s. lençol, folha (de papel), camada (de gelo).

Dentro do código CSS (entre <style> e </style>, você pode colocar comentários entre os símbolos /* e */, não pode outro tipo de comentário como o <!--comentario de codigo--> que é usado para o HTML, ou seja, entre as tags <body> e </body>

Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

2. CSS incorporado

O CSS estilo incorporado, a formatação é declarada entre as tags <style> e </style> que por sua vez estão dentro das tags <head> e </head, ou seja, dentro do cabeçalho do arquivo HTML.

- head (hɛd): s. cabeça, topo, chefe, cabeceira.

<!DOCTYPE HTML>
<html>
<html lang="”pt-br”">
<head>
<meta charset="”UTF-8”">
<style type="text/css">

p {background-position: left top;background-repeat:repeat-y;background- image:url(background.gif)}

div.destaque {
padding-left:2px;
border: 1px solid #33cc00;
margin-left: 0px;
}
div.destaque p{
text-align:left;
font-size: 13px;
line-height: 13px;
text-indent:0px
}
p {
font-size: 20px;
line-height: 30px;
margin-left: 0px;
text-align:justify;
text-indent:10px
}
</style>
<title></title>
</head>
<body>
...

Simplificação:

elemento{
formatos;
}

Onde, elemento é: p, table, a, div, ul, etc.

Obs 1: p {background-position: 75% 50%;background-image: url(background.gif)}
Com esta declaração, a imagem de background terá seu ponto central desenhado a 75% da largura total do parágrafo e a 50% da altura do parágrafo.

Obs 2: body{font-size: 20px; line-height: 20px;}

Esta configuração formata todas as fontes dentro do corpo da página com tamanho 20px e altura 20px, isso é conveniente para abranger uma formatação geral, não necessitando a repetição de tags formatadas (como é o caso de um parágrafo, para formatar o texto, deve se inserir o respectivo parágrafo formatado).

Obs 3: table{font-size: 15px;line-height: 20px;}

Usando a formatação exemplificada na obs 2 e obs 3, o corpo do HTML e as tabelas em seu interior, terão as citadas formatações, ou seja, diferentes.

2.1. CSS inline

O CSS inline é aquele que é inserido junto ao código HTML, através do atributo style. Seu uso deve ser limitado, uma vez que essa formatação é repetitiva, o código fica "poluído", atrapalha a legibilidade e torna a atualização da página inviável. É aconselhpavel seu uso para corrigir formatoções pontuais, específicas que não foi possível resolver de outra forma.

<p style="color: #ffff00; font-size: 11px ">Parágrafo formatado inline</p>
<p style="text-align:center">

2.2. CSS externo

O CSS externo é na verdade uma derivação do estilo incorporado em que a formatação entre as tags <style> e </style> formarão um arquivo de extensão .css, que será acessado através de um link que fica no cabeçalho do arquivo.html que falará um link com o arquivo.css. Não copie as tags <style> e </style>, elas são do HTML e não pertencem ao arquivo CSS. A combinação dos estilos não deve ser conflitantes, por isso, deve-se usar identificadores (id) e classes (class) diferentes.

Obs: CSS externo estiliza elementos, inline frames (iframe) não são elementos, são componentes incorporados, ou seja, não é formatado com CSS externo.

Ex: arquivo pagina.html

<!DOCTYPE HTML>
<html>
<html lang="”pt-br”">
<head>
<meta charset="”UTF-8”">
<title></title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div class=destaque">Div com formatação CSS externo</div>
<p>Parágrafo formatado com CSS externo</p>
...

Ex: Arquivo estilo.css que formatará o arquivo pagina.html

div.destaque p{
text-align:left;
font-size: 13px;
line-height: 13px;
text-indent:0px
}
p {
font-size: 20px;
line-height: 30px;
margin-left: 0px;
text-align:justify;
text-indent:10px
}

Obs 1: para criar um arquivo.css, basta salvá-lo no bloco de notas com essa extensão.

Obs 2: juntamente com o link anterior, poderão ser acrescentados outros, inclusive fornecidos por sites que os disponibilizam, segue uma exemplo abaixo:

<link href="http://fonts.googleapis.com/css?family=Amaranth:regular,regularitalic,bold,bolditalic" rel="stylesheet" type="text/css" />

Prioridade para o efeito cascata em ordem crescente é a seguinte:

1. folha de estilo padrão do navegador do usuário;

2. folha de estilo do usuário;

3. folha de estilo do desenvolvedor;

3.1 estilo externo (importado ou linkado).

3.2 estilo incorporado (definido na seção head do documento);

3.3 estilo inline (dentro de um elemento HTML);

4. declarações do desenvolvedor com !important;

5. declarações do usuário com !important;

3. Selecionadores ou seletores (estilo incorporado e o estilo externo)

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, cuja propriedade é aplicada a todos os elementos do tipo selecionado que aparecerem no documento HTML, a seguir são mostrados as formas mais utilizadas:

Seletor por tipo - formatação aplicada a todos elementos de um determinado tipo (p, a, div, etc...)

seletor { propriedade: valor; } 

Ex:  div {width:100px;} /****todos os divs terão a mesma largura de 100px ***/

Seletor por classe - formatação aplicada a vários elementos , várias vezes  (class)

.seletor-genérico { propriedade: valor; } 
seletor.seletor-genérico { propriedade: valor; }

Ex: 

.largura{width:1px;} /***esta formatação é genérica, e pode ser chamada por qualquer seletor*/

div.altura{width:1px;}  /***indica que a formatação é aplicata dentro da div****/

<div class="largura"> ...</div>   /***pode usar este seletor várias vezes ****/

<div class="altura">

Obs: largura e altura são o nome do seletor, pode usar qualquer nome válido.

Formatação aplicada uma única vez a um elemento (seletor por identificador: id)

#seletor { propriedade: valor; } 

Ex: 

#largura{width:1px;}

<div id="largura"> ...</div> <!-- este seletor só pode ser usado uma unica vez-->

4. Seletor

É uma entidade que faz parte da regra CSS e define o alvo dessa regra. O alvo é um elemento integrante da árvore do documento HTML (ou elementos, <p>, <div>, <a>, etc), por exemplo: o seletor de <p> é p, o seletor de <div> é div, o seletor de <a> é a, etc...

Um seletor, genericamente, é o elemento 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...)

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

Valor: é 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 { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. 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.

seletor{propriedade:valor;}

Observe os exemplos a seguir que esclarecem a sintaxe da regra CSS. 

p {
font-size: 12px; }  /* ponto-e-vírgula é facultativo */
body {color: #000;
background: #fff;
font-weight: bold; /* ponto-e-vírgula é facultativo */
}

Mais de um Seletores ( utiliza-se a virgula para separar os elementos do conjunto que receberão a mesma propriedade

h1, h2, h3, h4 {
color: #000;
}

O seletor class

Você pode criar uma classe a qual definirá as regras CSS. Um mesmo elemento html pode usar mais de uma classe, ou seja, uma classe é um conjunto de estilos adequados que podem ser utilzados livremente, para formatação.

As classes podem ser aplicadas a qualquer elemento html. Pode ser aplicado estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles.


seletor.classe {
propriedade: valor;
}

Para classe use somente letras e os caracteres - (traço de menos) e _ (underline ou sublinhado), embora seja permitido o uso de numeral, a experiência demonstra que não é aconselhável usá-lo. Observa-se que a HTML5 acabou com a restrição dos caracteres e na sintaxe dela você pode usar qualquer caractere exceto espaço em branco, contudo, somente a experiência pode comprovar essa característica.

Código de exemplo 1:


<html lang="”pt-BR”">
<head>
<meta charset="”UTF-8”">
<style type="text/css">
p.cor-um {
color:#000000; /* preta */
}
p.cor-dois {
color:#EE0000; /* vermelho*/
}
</style>
<title></title>
</head>
<body>
<p class ="cor-um"> Parágrafo na cor preta.</p>
<p class ="cor-dois">Parágrafo na cor vermelha.</p>
</body>
</html>

Código de exemplo 2:

<html lang="”pt-BR”">
<head>
<meta charset="”UTF-8”">
<style type="text/css">
p.cor-um {
color:#000000; /* preta */
}
p.cor-dois {
color:#EE0000; /* vermelho*/
}
</style>
<title></title>
</head>
<body>
<p class ="cor-um"> Parágrafo na cor preta.</p>
<p class ="cor-dois">Parágrafo na cor vermelha.</p>
</body>
</html>

Salve o código acima no bloco de notas do windows com extensão html, exemplo teste.html, ao clicar no arquivo criado o resultado será igual o texto abaixo apresentado:

Parágrafo será na cor preta.

Parágrafo será na cor vermelha.   

  O seletor id

O seletor id difere do seletor classe, por ser único. Um seletor id com um determinado nome só pode ser aplicado a um elemento HTML dentro do documento por uma única vez.

Você pode dar um nome e com ele criar um id ao qual definirá as regras CSS. Um determinado id só pode ser aplicado a um elemento html.

Um seletor id é um nome precedido por um sustenido, #  também chamado "tralha" ou "jogo-da-velha".

A sintaxe para o seletor id é mostrada a seguir.

#seletor-id {
propriedade: valor;
}

As regras para o seletor-id são as mesma (use letras, é permitido o sinal de - (menos) e o _ (sublinhado ou underline)

Código de exemplo 2:

<html lang="”pt-BR”">
<head>
<meta charset="”UTF-8”">
<style type="text/css">

  #preto{
color:#000000;
}

  #vermelho{
color:#EE0000;
}

</style>
<title></title>
</head>
<body>
<p id ="vermelho">Parágrafo na cor vermelha</p>
<p id ="preto"> Parágrafo na cor preta</p>
</body>
</html>

Parágrafo na cor vermelha.

Parágrafo na cor preta.

Aninhando

Se o CSS estiver bem estruturado, não deve existir a necessidade de muitos seletores de classe ou ID. Isso porque pode-se especificar propriedades para seletores dentro de outros seletores. Por exemplo:


#topo {

background-color: #ccc;

padding: 1em

}

#topo h1 {

color: #ff0;

}

#topo p {

color: red;

font-weight: bold;


Faz com que não haja necessidade de mais classes e ID’s se estiver aplicado a um HTML que pareça com esse:

<div id="top">

<h1>Acarajé de Chocolate</h1>

<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

<p>Mmm mm mmmmm</p>

</div>

Isso acontece porque, ao separar seletores com espaços, nós estamos dizendo “h1 dentro do ID topo tem a cor #ff0″ e “p dentro do ID topo é vermelho e está em negrito”.

Recomenda-se que faça uma formatação genérica, a que será usado como padrão, e as que forem diferentes, então, use os seletores class ou id para fazerem as alterações.

Ex:

<!-- formatação geral -->

p{font-size: 20px;}

<!-- formatação específica -->

div.destaque {

padding-left:2px;
border: 1px solid #33cc00;
margin-left: 0px;
position:relative;
width:auto;

}

div.destaque p{
text-align:left;
font-size: 13px;
line-height: 13px;
text-indent:0px

}

Um seletor pode ser simples ou combinado. Um seletor simples é um seletor qualquer sozinho, já um seletor combinado consiste de dois ou mais seletores simples separados por um elemento de combinação

Elemento de Combinação

1. Espaço em branco define o seletor descendente.

2. Sinal maior que (>) define o seletor filho.

3. Sinal de adição (+) define o seletor adjacente filho do mesmo pai (irmão).

Seletores descendentes

Um seletor descendente é uma combinação de dois ou mais seletores simples separados por um espaço em branco. Aplica-se uma formatação ao elementos que sejam descendentes do primeiro elemento simples declarado no seletor. A formatação será aplicada ao seletor descendente, ex:

div p { color:#f00; }

Cada um dos seletores que compõem um seletor descendente pode ser um seletor simples de qualquer natureza. Na regra a seguir o seletor é definido para todo o elemento p da classe info contido em um elemento li que esteja contido em um elemento div cuja id seja myid, ex:

div#myid li p.info { color:#f00; }

Seletores descendentes permitem a definição de um elemento sem a necessidade de atribuir-lhe uma classe ou uma id, o que resultará em uma marcação mais limpa. Vamos supor uma lista de navegação conforme a marcação abaixo, que utiliza um id
CSS:

#forma{...}

<body>:

<ul id="forma">

<li><a href="http://...">Link 1</a></li>

<li><a href="http://...">Link 2</a></li>

<li><a href="http://...">Link 3</a></li>

</ul>

Para atingir os itens de lista e links contidos na lista de navegação você poderia usar as seguintes regras CSS:

#forma li { display:inline; }

#forma a { font-weight:bold; }

Percebe-se que foi necessário apenas a formatação no CSS para os itens da lista.

Outro exemplo:

No CSS:

div.destaque {
padding-left:2px;
border: 1px solid #33cc00;
margin-left: 0px;
position:relative;
width:auto;
}

div.destaque p{
text-align:left;
font-size: 13px;
line-height: 13px;
text-indent:0px
}

No <body>:
<div class="destaque><p>Parágrafo    formatado so no CSS</p><div>

Seletores Filhos

Um seletor filho tem como alvo um filho imediato de um elemento. O seletor filho consiste de um ou mais seletores simples separados por um sinal de maior “>”. O elemento pai fica à esquerda do sinal “>”, e é permitido deixar espaço em branco entre o elemento de combinação e os seletores. A regra a seguir aplica-se a todos os elementos strong que sejam filhos de um elemento div:

div > strong { color:#f00; }

Somente elementos strong que sejam descendentes diretos do elemento div serão afetados por esta regra. Se houver qualquer outro elemento entre o elemento div e o elemento strong na árvore do documento, o seletor não se aplicará, o que difere do seletor descendente que basta o respectivo elemento estar interno ao elemento do qual descende. No exemplo a seguir, somente “Texto um ” será afetado pela regra:

<div>

<strong>Texto um</strong> <!-- <strong> é filho de div-->

<p><strong>Texto dois</strong></p> <!-- <strong> não é filho de div-->

</div>

Seletores irmãos adjacentes (sibling selectors)

Um seletor irmão adjacente consiste de um ou mais seletores simples separados por um sinal de adição, “+”. é permitido deixar espaço em branco entre o elemento de combinação e os seletores. O seletor tem como alvo um elemento que seja irmão e adjacente ao primeiro elemento. Os elementos devem ter o mesmo pai e o primeiro elemento deve ser imediatamente anterior ao segundo.

p + p { color:#f00; }

A regra acima será aplicada somente ao “Parágrafo dois ”:

<div>

<p>Parágrafo um</p>

<p>Parágrafo dois</p>

</div>

Grupando

Para aplicar uma mesma regra a diferentes seletores  pode-se agrupar os seletores em uma lista e separando-los por uma vírgula no lugar de escrever repetidamente a mesma regra para cada um dos seletores, porém, o agrupamento deve ser um a um para que a formatação atinja apenas ao seletor descendente, se adicionar uma virgula e incluir um outro seleto, este segundo seletor selecionará todos os elementos do respectivo tipo. O erro que muitos cometem é o de não listar de modo completo todos os seletores individualmente. Considere a seguinte marcação:

<div id="news">

<h3>Texto</h3>

<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

</div>

Agora considere que você quer aplicar a mesma margem para cabeçalhos do nível 3 e para listas não ordenadas que estejam dentro do elemento div cuja id é “news”. Aqui maneira errada:

   1. div#news h3, ul {
   2. margin:0 2em;
   3. }

Esta regra será aplicada a ambos os elementos h3 e ul na div#news. O problema é que atingirá todos os elementos ul contidos no documento, e não apenas aqueles na div#news.

A maneira correta de grupar os seletores para este caso:

   div#news h3,
   div#news ul {
   margin:0 2em;
   }

Assim, quando grupar seletores lembre-se de escrever por completo cada um deles.

Seletores de atributo

Seletores de atributo atingem elementos baseados no valor de atributo declarado no seletor. Quatro são as maneiras de declarar um seletor de atributo:

[att]
    Casa com qualquer elemento com o atributo att independente do seu valor.
[att=val]
    Casa com qualquer elemento com o atributo att cujo valor seja “val”.
[att~=val]
    Casa com qualquer elemento que tenha um atributo att de valor igual a um valor qualquer separado por um espaço de um valor igual “val”. Neste caso “val” não pode conter espaços.
[att|=val]
    Casa com qualquer elemento que tenha um atributo att de valor igual a um valor qualquer separado por um hífen de um valor começando com “val”. O principal uso deste seletor é o de casar elementos com um valor de idioma especificado no atributo lang (xml:lang em XHTML), por exemplo;“en”, “en-us”, “en-gb”, etc.

Alguns exemplos. O seletor na regra a seguir casa com todos os elementos p que tenham o atributo title, independentemente do valor do atributo:

p[title] { color:#f00; }

No próximo exemplo o seletor casa com todos os elementos div que tem um valor para o atributo class igual a error:

div[class=error] { color:#f00; }

Para atingir todos os elementos td cujo atributo headers contenha o valor “col1”, podemos usar o seguinte seletor:

td[headers~=col1] { color:#f00; }

E finalmente, o seletor seguinte atinge todo elemento p cujo atributo lang comece com en:

p[lang|=en] { color:#f00; }

Múltiplos seletores de atributos podem ser usados em um mesmo seletor. Isto possibilita atingir vários diferentes atributos para o mesmo elemento. A regra a seguir aplica-se a todos os elementos blockquote que tenham o atributo class de valor igual a “quote”, e mais o atributo cite (independentemente do seu valor):

blockquote[class=quote][cite] { color:#f00; }

Obs: uma classe pode ser utilizada por vário tipos de seletores, com a técnica acima descrita, é possível atribuir uma característica a um determinado seletor sem interferir na sua classe que é usada por outros seletores.

Pseudo-classes

São definidas com um sinal de dois-pontos (:) antes do seu nome e sempre estão declaradas em conjunto com algum seletor ou classe. Elas aparecem na forma:

seletor:pseudo-element { propriedade: valor; }

Ex1:

p:first-line {color: #0000FF; font-variant: small-caps}

<p>Esta formatação é aplicada a apena a primeira linha</p>

 seletor.nome:pseudo-element { propriedade: valor; }

Ex2: p.formatoum:first-letter {color: #FF0000} 

<p class="formatoum">Formato aplicado a primeira letra de um parágrado</p>

Observações: o primeiro exemplo formata todos os elementos <p>, já o segundo, formata apenas os <p> com class igual formatoum.

Muitas das pseudo-classes definidas pelo CSS não são suportadas por todos os navegadores, mas existem quatro que podem ser usadas com segurança quando aplicadas à links:

link - indica o estilo de links não-visitados.

visited - indica links que foram visitados.

active - indica um link que está com o foco (por exemplo, quando ele está sendo clicado).

hover - indica um link enquanto o cursor é mantido sobre ele.

Exemplo

<style type="text/css">
a.primeiro:link {
color: blue;
}

a.segundo:visited {
color: purple;
}

a.terceiro:active {
color: red;
}

a.quarto:hover {
text-decoration: none;
color: blue;
background-color: yellow;

/***************** formatação para todos os seletores************************/

a:link { /* link não visitado */
color:#09871E;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
a:visited { /* link visitado */
color:#AB152E;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
a:hover { /* mouse sobre o link */
color:#FA8602;
text-decoration: underline;
font-size: 16px;
font-weight: bold;
}
a:active { /* link selecionado */
color:#2169FA;
text-decoration: underline;
font-size: 16px;
font-weight: bold;
}
</style>

Formatação interna

Exemplo 1:

ul li ul {
   display: none;
}

No seletor UL LI UL, foi selecionado a UL que está dentro da LI, e foi definido para que ela não aparecesse, para isso foi utilizado a propriedade display: none;

Exemplo 2:

UL LI:HOVER UL;


No seletor acima, foi selecionado a UL que está dentro da LI. Mas com uma ressalva: foi colocado logo após a LI a pseudo-classe :hover, ou seja, foi definido a UL que está dentro da LI, mas só quando o mouse é passado em cima dessa LI.

5. Selecionadores de Contexto

Para tornar todo o texto em negrito em vermelho, mas apenas se o texto em negrito ocorrer no corpo do texto, utiliza-se selecionadores de contexto, pois, estes dependem de uma certa situação para que suas declarações sejam efetivadas:

A regra no exemplo a seguir diz ao browser que todo texto em negrito será azul, apenas se aparecer dentro da tag P.

P B {color:navy}

Obs: P é o seletor de <p>, B é o seletor de <b>

Um exemplo de tabela com bordas apenas externa:


linha1coluna1
linha1coluna2
linha2coluna1
linha2coluna2
linha3coluna1
linha3coluna2

Obs: conforme o CSS abaixo, apenas as quatro bordas extenas foram formatadas, as celulas estão sem bordas.

.tabela
{
border-collapse:collapse;
border:1px solid #000000;

<!-- borda de traço simple -->
<!--bodar externa (top, right, bottom  e left) de 1px, sólida e preta -->

}

6. Bordas em tabelas

Um exemplo de tabela com bordas externas e internas


linha1coluna1
linha1coluna2
linha2coluna1
linha2coluna2
linha3coluna1
linha3coluna2

Para formata as bordas das celulas foi necessário definir uma formatação inline, ou seja, no elemento <table>


.tabela
{
border-collapse:collapse; <!-- borda de traço simple -->
border:1px solid #000000;  <!--bodar externa (top, right, bottom  e left) de 1px, sólida e preta -->
...
<table class="tabela" border="1" bordercolor="#000000">
...

Um resumo da sintaxe dos seletores CSS 2.1, devendo ser aplicados de forma coerente com os elementos HTML, pois não irá funcionar uma formatação que não pertence ao elemento.

Tipo de seletor Formato do seletor
Descrição
Universal (asterisco)
* é aplicado a todos os elementos (<p>, <div>, <a>, etc...), ex:
 *{font-size: 16px;}
Todos os elementos dentro do <body> terão essa formatação.
Por tipo (p, div, a, etc)
p, div, a, etc...
é aplicado ao elemento do tipo selecionado (<p>, <div>, <a>,etc...), ex:
p {font-size: 16px;}
Todos os <p> dentro do <body> terão essa formatação.
Por classe (ponto)
.info é apliado a qualquer elemento cujo atributo class tenha o valor info, podendo ser repetido a aplicação para mais de um elemento, ex:
.info {font-size: 16px;}
<p class="info">Parágrafo de exemplo</p>
Por id (identificador), tralha ou jogo da velha
#footer é aplicado a qualquer elemento cujo atributo id tenha o valor footer, podendo ser aplicado uma única vez, ex:
#footer{font-size: 16px;}
<p id="footer">Parágrafo
Descendente E F seleciona  qualquer elemento F que estiver contido em um elemento E.
Filho E > F seleciona qualquer elemento F descendente direto de um elemento F.
Adjacente E + F seleciona oelemento F que se segue imediatamente a E.
Atributo E[att] é aplicado a qualquer elemento E que tenha um atributo att independentemente do valor deste atributo.
Atributo E[att=val] é aplicado a  qualquer elemento E que tenha um atributo att de valor igual a val.
Attribute E[att~=val] é aplicado a qualquer elemento E que tenha um atributo att de valor igual a um valor qualquer separado por um espaço de um valor igual a val.
Atributo E[att|=val] é aplicado a  qualquer elemento E que tenha um atributo att de valor igual a um valor qualquer separado por um hífen de um valor começando com val.
Pseudo classe
:first-child
E:first-child é aplicado ao elemento E que for o primeiro filho do seu elemento pai.
Pseudo classe
link
E:link
E:visited
é aplicado ao  link ainda não vistado (:link) ou com link já visitado (:visited) links.
Pseudo classes
dinâmicas
E:active
E:hover
E:focus
é aplicado ao  E quando de uma ação do usuário.
Pseudo classe
:language
E:lang(c) é aplicado ao  elementos E escritos no idioma c.
Pseudo-elemento
:first-line
E:first-line é aplicado ao conteúdo da primeira linha do elemento E.
O pseudo-elemento
:first-letter
E:first-letter é aplicado a primeira letra do elemento E.
Pseudo-elementos
:before e :after
E:before
E:after
usado para gerar conteúdo antes ou depois do conteúdo do elemento E.


7. Pseudo-classes Estruturais

As pseudo-classes estruturais servem para selecionar 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.

:lang() – seleciona elementos que tem o atributo lang com um valor específico.

Obs: como já foi dito, há a necessidade de testar no browser as pseudo-classes.

8. Tabela de propriedades CSS


Fonte
font (propriedade)
Valor;
Explicação
color: #FFFFFF;
cor da fonte: código hexadecimal

rgb(255,235,0);  código rgb

 red, blue, green...etc  nome da cor
font-family: "verdana", "helvetica", "arial", etc. nome do tipo de fonte

"serif", "sans-serif", "cursive", etc. tipo genérico
font-size: x-small, small, medium, large,
tamanho de fonte

x-large, xx-large, smaller, larger,

length; uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

%;

font-style normal;
estilo de fonte, fonte normal na vertical)

italic; fonte inclinada

oblique;
fonte obliqua
font-variant: normal;
fonte normal

small-caps;
transforma em maiúsculas de menor altura
font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 quanto mais escura a fonte é (negrito), 700 é o "bold" típico e 400 é o "normal".
Texto
text (propriedade) Valor; Explicação
color: #FFFFFF; código hexadecimal:

rgb(255,235,0); código rgb

red, blue, green...etc nome da cor
letter-spacing: normal; espaçamento entre letras normal, é o espaçamento default

lenght; uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
word-spacing normal; espaçamento entre palavras, normal é o espaçamento default

lenght; uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
line-height: normal; altura da linha, normal é o espaçamento default

lenght; uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
text-align: left; alinhamento do texto a esquerda

right; alinha o texto a direita

center; alinha o texto no centro

justify; força o texto a ocupar toda a extensão da linha da esquerda a direita

text-decoration; decoração do texto

text-indent; recuo do texto

text-transform; forma das letras

direction; direção do texto

white-space; como o browser trata os espaços em branco;
text-decoration:
none; decoração do texto, nenhuma decoração

underline; coloca sublinhado no texto

overline; coloca um sobrelinhado no texto

line-through; coloca uma linha em cima do texto

blink; faz o texto piscar
text-indent: lenght; recuo do texto, uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

%; porcentagem da largura do elemento pai
text-transform none; forma das letras, texto normal

capitalize; todas as primeiras letras do texto em maiúsculas

uppercase; todas as letras do texto em maiúsculas

lowercase; todas as letras do texto em minúsculas
direction
ltr texto escrito da esquerda para a direita

rtl: texto escrito da direita para a esquerda
white-space normal: os espaços em branco serão ignorados pelo browser

pre; os espaços em branco serão preservados pelo browser

nowrap o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br>
Margens
margin (propriedade)
Valores possíveis
Explicação
margin-top: auto; valor default da margem
length; uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
%; porcentagem da largura do elemento pai

define a margem superior
margin-right: define a margem direita
margin-bottom: define a margem inferior
margin-left: define a margem esquerda
margin:
margin: top right bottom left;
Bordas
border (propriedade)
Valores
Explicação
border-width: color:
código hexadecimal: #FFFFFF
código rgb: rgb(255,235,0)
nome da cor: red, blue, green...etc
style:
none: nenhuma borda
hidden: equivalente a none
dotted: borda pontilhada
dashed: borda tracejada
solid: borda contínua
double: borda dupla
groove: borda entalhada
ridge: borda em ressalto
inset: borda em baixo relevo
outset: borda em alto relevo
width:
thin: borda fina
medium: borda média
thick: borda grossa
length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

Exemplo:
border: 1px 1px 1px 1px;
borde: width style color;
border: 1px solid blue;
espessura da borda
border-style: estilo da borda
border-color cor da borda
border-top-width espessura da borda superior
border-top-style estilo da borda superior
border-top-color cor da borda superior
border-right-width espessura da borda direita
border-right-style estilo da borda direita
border-right-color cor da borda direita
border-bottom-width espessura da borda inferior
border-bottom-style estilo da borda inferior
border-bottom-color cor da borda inferior
border-left-width espessura da borda esquerda
border-left-style estilo da borda esquerda
border-left-color cor da borda esquerda
border-top maneira abreviada para todas as propriedades da borda superior
border-right: maneira abreviada para todas as propriedades da borda direita
border-bottom: maneira abreviada para todas as propriedades da borda inferior
border-left: maneira abreviada para todas as propriedades da borda esquerda
border maneira abreviada para todas as quatro bordas, border: px px px px;
Espaçamentos entre o conteúdo e as bordas dos elementos html
Propriedade
Valores (explicação)
Explicação
padding-top auto; (valor default da margem)
length; (uma medida reconhecida pelas CSS: px; pt; em; cm; etc)
%; (porcentagem da largura do elemento pai)
define a espaçamento superior
padding-right define a espaçamento direita
padding-bottom define a espaçamento inferior
padding-left define a espaçamento esquerda
padding maneira abreviada para todas os espaçamentos

Obs: Em tabelas, border: 1px solid blue, formata apenas as quatro bordas externas, para que as celulas da tabela apareçam com bordas, deve-se incluí-las inline, ou seja, detro da tag <table>, <table

<p style="text-align:center">

É interessante que, na sua lista de nomes de fontes, sempre use como última opção, um nome de fonte genérico, porque se não for encontrado no computador do navegante as fontes anteriores, essa fonte com certeza ele encontrará.

Se você usar um nome de fonte com mais de uma palavra, você deve colocar este nome entre aspas. Por exemplo:

p{font-family:"courrier new", "new baskerville", serif}

Quando você colocar estilos inline, você deve usar o nome da fonte entre apóstofos. Por exemplo:

<P STYLE="font-family: 'gill sans', 'new baskerville', serif">Texto de exemplo.</P>



background: corresponde as características do fundo dos elementos html para os quais esta propriedade é aplicada.
Propriedade Valor; (explicação)
Explicação
background-color:
#FFFFFF; (código hexadecimal) Cor de fundo

rgb(255,235,0); (código rgb)

red, blue, green...etc (nome da cor)


transparent; (transparente)
background-image: URL: url(caminho/imagem.gif);
Imagem de fundo
background-repeat: no-repeat ;(não repete) Repetição da imagem de fundo

repeat; (repete vertical e horizontal)

repeat-y; (repete vertical)

repeat-x; (repete horizontal)
background-attachment:
fixed; (magem fixa na tela)

scroll ;(a imagem acompanha a tela)

background-position: x-pos y-pos; O primeiro valor especifica a posição horizontal, o segundo valor especifica a posição vertical. A posição top left é 0 0, a posição bottom right é 100%, 100%. Se você especificar apenas um valor, o segundo valor será considerado como 50%. Você também pode combinar porcentagens e valores de comprimentos(px)

x-% y-%; x% y% O primeiro valor especifica a posição horizontal, o segundo valor especifica a posição vertical. A posição top left é 0% 0%, a posição bottom right é 100%, 100%. Se você especificar apenas um valor, o segundo valor será considerado como 50%.

top left; centro á esquerda

top center; topo ao centro

top right; topo á direita

center left; topo à esquerda

center center; centro ao centro

center right; centro á direita

bottom left; embaixo a esquerda

bottom center; embaixo ao centro

bottom right; embaixo à direita

Obs: a cor de fundo, background-color pode afetar o comportamento de alguns elementos quandos os mesmos tem a mesma cor.

Padding
Propriedade
Valores;
Explicação
padding:
top right bottom left; (px,;pt; em; cm; etc...,  %;) Especifica todas as propriedades de espaçamento: espaçamento superior, da direita, inferior e esquerda
padding-top:
top; (px,;pt; em; cm; %; etc...) Especifica o espaçamento superior
padding-right:
right; (px,;pt; em; cm; etc..., %;) Especifica o espaçamento da direita
padding-bottom:
bottom; (px,;pt; em; cm; etc..., %;) Especifica o espaçamento inferior
padding-left:
left; (px,;pt; em; cm; etc..., %;) Especifica o espaçamento da esquerda


Dimensionamento
Propriedade
Valores;
Explicação
height
auto; px; pt; em; cm; %; ... Especifica a altura
max-height
none; px; pt; em; cm; %; ...
Especifica uma altura máxima
max-width
none; px; pt; em; cm; %;...
Especifica uma largura máxima
min-height
px; pt; em; cm; %; ...
Especifica uma altura mínima
min-width
px; pt; em; cm; %; ...
Especifica uma largura mínima
width

Especifica a largura, auto não funciona

Observações:

1. O formato do <div> (margem, padding)  aumenta o espaço ocupado por ele.

2.  O formato do parágrado <p> (margem, padding)  dentro do <div> não afeta o espaço ocupado pelo <div>.

Exemplo:

div > p{
font-size: 20px;
line-height: 25px;
text-indent:10px;
font-family: arial,verdana;
margin:20px;
}

3. As margens não pertencem as dimensões, contudo ocupa espaço do lado de fora do elemento, com isso, a mesma deve ser levada em conta no posisionamento dos elementos.

4. O padding não afeta o background.

5. A propriedade overflow é usada frequentemente para exibir ou esconder a barra de rolagem no elemento <div> e <body>, ex:
body { overflow-x: hidden; }
div{overflow-y:scroll};

9. Bordar com cantos arrendondados

border-top-left-radius:     10px;

border-top-right-radius:    10px;

border-bottom-right-radius: 1em 5em;

border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

border-top-left-radius:     4px 2px;

border-top-right-radius:    3px 4px;

border-bottom-right-radius: 6px 2px;


border-bottom-left-radius:  3px 4px;

10. Altura para iframe
Ao colocar a propriedade block em um iframe seu browser vai tratar o iframe como se ele fosse uma caixa de texto ou um textarea, se ele consegue tratar dessa forma, o uso do height:100% se torna fácil, veja um exemplo;

<html>
< head>
< title>iframe example</title>
< style type=”text/css”>
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
< /style>
< /head>
< body>
< div>
< iframe src=”http://inhosting.com.br/”>
< p><a href=”http://inhosting.com.br”>http://inhosting.com.br</a></p>
< /iframe>
< /div>
< /body>
< /html>