Conceito básico

Como você já sabe o HTML define o que deve ser exibido ao cliente e até tem dentro dele alguns 'defaults' de posicionamento, exibição e padrões.

O CSS trabalha em conjunto com o HTML definindo como o elemento deve ser exibido e isto, se você for caprichoso, vai fazer toda a diferença...seu site vai ficar muito mais bonito. Se HTML é o conteúdo da página o CSS é a beleza ou o capricho com que a página foi feita.

Por exemplo, se você define um campo input type text no HTML ele precisa de pouca coisa para exibir essa caixa de texto e já tem um padrão de largura, altura, fontes de letra etc. para que o objeto seja exibido mesmo com pouquíssimos parâmetros fornecidos

Exemplo : Na linha abaixo existe um campo input text padrão:

Código: <input type="text" >

Mas e se você quiser alterar algo nesse 'padrão default' browser. Pode ser largura, altura, fonte de letras etc, literalmente qualquer coisa como você faz ?

Para alterar esse 'padrão default do browser' usamos a CSS. A CSS pode alterar praticamente qualquer característica de exibição, posicionamento e visibilidade do elemento e, mais ainda, misturar ou mesmo herdar características de um elemento pai anterior e aplicar no posterior e o posterior pode ter outra css modificando as definições do elemento pai.

Se você encontrou dificuldades em entender o que é um elemento pai ou container (anterior) e um elemento filho ( ou posterior ) cito o exemplo de uma imagem dentro de uma tag anchor. Você concorda que ao fazer isso faço com que toda a imagem seja um link para o destino da url desejada pela tag anchor ? Veja o exemplo abaixo :

Código:
        <p>
            <a href="#">
                <img style="height: 30%;width: 30%;" src="26-fundo.jpg">
            </a>
        </p>

Sendo assim a tag anchor é pai, container (contém, abriga dentro dela) a tag img, filha. E ainda podemos dizer que a tag pai é pai da tag anchor também.

Agora como exemplo vou alterar o estilo da tag input. Vou mudar o comprimento dela para 600 pixels

Exemplo : Na linha abaixo existe um campo input text padrão:

Código: <input type="text" style="width: 600px;">

Com a mesma facilidade que troquei o comprimento da tag input posso mudar qualquer uma das características dessa tag, por isso css é tão poderosa.

---

Aplicando estilos

Os exemplos que dei foram bem simples mas num site grande e complexo podemos definir tantos estilos para tantos elementos como quizermos, certo ?. Você deve ter pensado consigo mesmo... se eu criar uma página grande e complexa vou ter tantos estilos que vou acabar me perdendo neles.
Como saber que estilo eu apliquei no primeiro parágrafo quando eu estou no rodapé da página ?
Como padronizar os elementos de uma página aplicando um padrão ou mesmo definindo onde esse padrão deve ou não ser aplicado.
Concorda comigo que se o estilo aplicado a cada elemento poderia deixar você meio confuso e seria fácil se perder se não houver uma clara.

Para escolher qual css deve ser aplicada em cada elemento da página e ainda permitindo que eu selecione onde deva ser aplicado ou não sem perder o 'padrão' do começo para o fim da página foi inventado um mecanismo de aplicação da CSS chamado Seletor.

---

Seletores

Definimos seletores o mecanismo de seleção que nos permite escolher onde o estilo deve ser aplicado e onde não deve.

Através dos seletores um estilo na CSS pode ser aplicado :
•1-Em todas as tags da página (Global),
•2-Apenas nas tags que desejarmos (Classes),
•3-Apenas numa tag (ID),
•4-Na sequencia de um conjunto de tags (pai, filha, irmã) etc.

1-Seletor Global

Ao utilizar este seletor todas as tags da página serão afetadas.:

Como definimos:
   p {
      color: red;
   }

Texto antes da tag p<p>Texto dentro da tag p</p>Texto depois da tag p.

Como o browser exibe :
Texto antes da tag pTexto dentro da tag pTexto depois da tag p.

Note que para aplicar este estilo basta apenas definí-lo e ele será automaticamente aplicando em todas as tags de mesma classe no documento.

---

2-Seletor por classe

Aplicamos o estilo via classe do elemento, ou seja, se quisermos que um estilo seja aplicado ao elemento adicionamos a classe a ele.
   Com este tipo de seletor podemos aplicar o estilo apenas nos itens que desejar-mos.
Para isso, a definição do seletor deve iniciar com o caractere "." seguido do valor correspondente mas lembre-se que na utilização da classe não usamos o ponto.

Como definimos:
    <style>
        .roxinho{
            color:purple;
        }
    </style>

        Exemplo de aplicação: <p class="roxinho">Aplicação de estilo pela classe.</p><br />

Como o browser exibe:
Exemplo de aplicação:

Aplicação de estilo pela classe.

---

3-Seletor Único

Aplicando um estilo via id do elemento.
   É possível aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id.
Para isso, o seletor deve iniciar com o caractere "#" seguido do valor correspondente.


Como definimos:
   #cabecalho {
      color: blue
      text-align: center;
   }

<p id="cabecalho">Teste1.</p>



Como o browser exibe:
Exemplo de aplicação:

Teste1.

   O seletor acima fará com que o elemento do nosso HTML que tem o atributo id com valor "cabecalho" tenha seu texto renderizado na cor coral e centralizado.
Note que não há nenhuma indicação para qual tag a propriedade será aplicada mas sim pelo id.
Pode ser tanto a tag A quanto a tag B, até mesmo tags sem conteúdo como uma imagem , desde que essa tenha o atributo id com o valor "cabecalho".
   Como o atributo id deve ter valor único no documento, o seletor deve aplicar suas propriedades declaradas somente àquele único elemento e, por cascata, a todos os seus elementos filhos.

---

Seletor Hierárquico :

3-Seletor Hierárquico filha

Formato : #id tagFilha :
   Podemos ainda utilizar um seletor hierárquico que permite aplicar estilos aos elementos filhos de um elemento pai:

      #rodape img {
         margin-right: 30px;
         vertical-align: middle;
         width: 150px;
      }

   <span id="rodape">
      Tag AfetadaRodape
      <img src="mirror fashion/img/familia-pelho.jpg" />
   </span>

Exemplo de aplicação da css :
Tag AfetadaRodape
No exemplo anterior, o elemento pai rodape é selecionado pelo seu id .
O estilo será aplicado apenas nos elementos img filhos do elemento com id=rodape .

---

Seletor de irmãos (siblings) - afeta todas as tags irmãs

4-Seletor de tags irmãs

Formato : tag ~tagIrmã(s) :
Veja o seguinte HTML, que simula um texto com vários parágrafos, títulos e subtítulos no meio do documento:

   <article>
      <h1>Título</h1>
      <p> Início</p>
      <h2> Subtítulo</h2>
      <p>Texto</p>
      <p>Mais texto</p>
    </article>

   Como faremos se quisermos estilizar de uma certa maneira todos os parágrafos após o subtítulo?
   O seletor de irmãos (siblings) ( ~ ) serve pra isso! Ele vem do CSS3 e funciona em todos os navegadores modernos (e no IE7 pra frente).

   h2 ~ p {
      font-style: italic;
      color: green;
   }

   Isso indica que queremos selecionar todos as tags p que foram precedidos por algum h2 e são irmãos do subtítulo (ou seja, estão sob a mesma tag pai).
No HTML anterior, serão selecionados os dois últimos parágrafos (Texto e Mais texto).
Exemplo utilização :

Título

Início (afetada pela tag do item 1)

Subtítulo

Texto

Mais texto

---

5-Seletor de irmã adjacente

Formato : tag +tagIrmã :
Ainda com o HTML anterior, o que fazer se quisermos selecionar apenas o parágrafo imediatamente seguinte ao subtítulo? Ou seja, é um p irmão do h3 mas que aparece logo na sequência:

   <article>
      <h3>Título</h3>
      <p> Início</p>
      <h4> Subtítulo</h4>
      <p>Texto</p>
      <p>Mais texto</p>
   </article>

   Fazemos isso com o seletor de irmão adjacente - adjacent sibling (+) :

   h4 + p {
      font-variant: small-caps;
      color: purple;
   }

   Nesse caso, apenas o parágrafo Texto será selecionado.
É um irmão de h4 e aparece logo depois do mesmo.
Esse seletor faz parte da especificação CSS2.1 e tem bom suporte nos navegadores modernos, incluindo o IE7.
Exemplo utilização :

Título

Início

Subtítulo

Texto

Mais texto

Importante : Apenas a primeira tag adjacente é afetada...as demais não.

---

6-Seletor de filho direto

Formato : tag >tagIrmã :
   Se tivermos o seguinte HTML com títulos e seções de um artigo:

   <article>
      <h1>Título principal</h1>
      <h5>Depois do h5 titulo</h5>
      <section>
         <h5>Título da seção1</h5>
         <h5>Título da seção2</h5>
         <h6>Titulo da sub-seção 3</h6>
         <h5>Título da seção4</h5>
      </section>
</article>

   Queremos deixar apenas o título principal de outra cor. Como fazer? O seletor de nome de tag simples não vai resolver:

/* vai pegar todos os h1 da página */
   h1 {
      color: purple;
   }

   Tentar o seletor de hierarquia também não vai ajudar:
/* vai pegar todos os h1 do article, incluindo o de dentro da section */
   article h1 {
      color: purple;
   }

   Entra aí o seletor de filho direto ( > ) do CSS2.1 e suportado desde o IE7 também.

/* vai pegar só o h1 principal, filho direto de article e não os netos */
   article > h5 {
      color: purple;
   }

Título principal

Depois do h5 titulo

Título da seção1

Título da seção2

Titulo da sub-seção 3

Título da seção4

---

7-Negação

Seleciona todas que não forem do tipo. Formato : tag :not :
   Imagine o seguinte HTML com vários parágrafos simples:

   <p>Texto</p>
   <p>Outro texto</p>
   <p>Texto especial</p>
   <p>Mais texto</p>

   Queremos fazer todos os parágrafos de cor cinza, exceto o que tem o texto especial.
   Precisamos destacá-lo de alguma forma no HTML para depois selecioná-lo no CSS. Uma classe ou ID resolve:

   <p>Texto</p>
   <p> Outro texto</p>
   <p class="especial" >Texto especial</p>
   <p>Mais texto</p>

   Mas como escrever o CSS? Queremos mudar a cor dos parágrafos que não têm a classe especial.
   Um jeito seria mudar a cor de todos e sobrescrever o especial depois:

   p {
      color: gray;
   }

   p.especial {
      color: black; /* restaura cor do especial */
   }

   No CSS3, há uma outra forma, usando o seletor de negação.
Ele nos permite escrever um seletor que pega elementos que não batem naquela regra.

   p:not(.especial) {
      color: gray;
   }

   Isso diz que queremos todos os parágrafos que não têm a classe especial. A sintaxe do :not() recebe
como argumento algum outro seletor simples (como classes, IDs ou tags).
Essa propriedade do CSS3 possui suporte mais limitado no IE, somente a partir da versão 9 (nos
outros navegadores não há problemas).
Exemplo de utilização :

Texto

Outro texto

Texto especial

Mais texto

Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.

---

8-PSEUDO-CLASSES

Primeiro e último item

Pegue o seguinte HTML de uma lista de elementos:

   <ul>
      <li>Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li>Quarto item</li>
</ul>

   E se quisermos estilizar elementos específicos dessa lista? Por exemplo, o primeiro elemento deve ter cor vermelha e o último, azul.
Com esse HTML simples, usando apenas os seletores que vimos até agora, será bem difícil.
A solução mais comum seria adicionar classes ou IDs no HTML para selecioná-los depois no CSS:

   <ul>
      <li class="primeiro">Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li class="ultimo">Quarto item</li>
   </ul>

   Agora é fácil usar cores diferentes para o primeiro e último itens da lista.
Mas essa técnica exigiu alteração no HTML e exige que lembremos de colocar a classe correta, no ponto correto, toda vez que fizermos mudanças nos itens da lista.
   O CSS tem um recurso chamado de pseudo-classes que são como classes CSS já pré-definidas para nós.
É como se o navegador já colocasse certas classes por padrão em certos elementos, cobrindo situações comuns como essa de selecionar o primeiro ou o último elemento.
   Há duas pseudo-classes do CSS3 que representam exatamente o primeiro elemento filho de outro (first-child) e o último elemento filho (last-child).
Essas classes já estão definidas, não precisamos aplicá-las em nosso HTML e podemos voltar para o HTML inicial:

   <ul>
      <li>Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li>Quarto item</li>
   </ul>

   No CSS, podemos usar pseudo-classes quase da mesma forma que usaríamos nossas classes normais.
   Repare que para diferenciar um tipo do outro, mudou-se o operador de ponto para dois pontos:

   li:first-child {
      color: red;
   }

   li:last-child {
      color: blue;
   }

   O suporte a esses seletores é completo nos navegadores modernos.
O first-child vem desde o IE7, Firefox 3 e Chrome 4. E (estranhamente), o last-child só a partir do IE9 mas desde o Firefox 1 e Chrome 1.

Exemplo de utilização :

• Primeiro item
• Segundo item
• Terceiro item
• Quarto item

Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.

---

NTH-CHILD - 9-Pseudo classes - Enésimo item.

   Um seletor ainda mais genérico do CSS3 é o :nth-child() que nos permite passar o índice do elemento.
Por exemplo, podemos pegar o terceiro item com:

   li:nth-child(4) { color: yellow; }

Exemplo de utilização :

• Primeiro item
• Segundo item
• Terceiro item
• Quarto item

Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.

---

10-Pseudo classes - Itens pares e impares.

   Porém, o mais interessante é que o nth-child pode receber uma expressão aritmética para indicar quais índices selecionar.
É fácil fazer uma lista zebrada, com itens ímpares de uma cor e pares de outra:

10-Pseudo classes - Itens pares.

   li:nth-child(2n) { color: green; }

10-Pseudo classes - Itens impares.

   li:nth-child(2n+1) { color: blue; }

O suporte existe a partir do IE9, Firefox 3.5 e Chrome 1.
Nota : O exemplo esta diferente porque este efeito altera todos os demais elementos da página mas esta no style.

Exemplo de utilização: Exemplo de utilização :

• Primeiro item
• Segundo item
• Terceiro item
• Quarto item
• Quinto item

Nota : O exemplo esta diferente porque este efeito altera todos os demais elementos da página mas esta no style.

---

Pseudo classes de estado

11-Pseudo classes de estado

Ativados por eventos ou mudanças
   Queremos mudar a cor de um link quando o usuário passa o mouse por cima.
   Ou seja, queremos mudar seu visual a partir de um evento do usuário (no caso, passar o mouse em cima).
   Uma solução ingênua seria criar um código JavaScript que adiciona uma classe nos links quando o evento de mouseover acontece (e remove a classe no mouseout).
   Entretanto, o CSS possui excelentes pseudo-classes que representam estados dos elementos e, em especial, uma que representa o momento que o usuário está com o mouse em cima do elemento, a

      :hover.

   É como se o navegador aplicasse uma classe chamada hover automaticamente quando o usuário passa o mouse em cima do elemento e depois retirasse a classe quando ele sai.
Tudo sem precisarmos controlar isso com JavaScript.

/* seleciona o link no exato momento em que passamos o mouse por cima dele */
   h6:hover {
      background-color:#FF00FF;
   }

   Podemos usar hover em todo tipo de elemento, não apenas links. Mas os links ainda têm outras pseudo-classes que podem ser úteis:

/* seleciona todas as âncoras que têm o atributo "href", ou seja, links */
   a:link {
      background-color:#FF0000;
   }

/* seleciona todos os links cujo valor de "href" é um endereço já visitado */
   a:visited {
      background-color:#00FF00;
   }

/* seleciona o link no exato momento em que clicamos nele */
   a:active {
      background-color:#0000FF;
   }

Exemplo de utilização :

Teste

---

12-Pseudo classes : Primeira letra

   Pseudo-classes nos ajudam a selecionar elementos com certas características sem termos que colocar uma classe manualmente neles.
Porém, o que fazer quando precisamos selecionar certo tipo de conteúdo que nem elemento tem?
Exemplo: temos um texto num parágrafo:

<p>Estudar é a melhor maneira de aprender.</p>

   Queremos dar um estilo de revista ao nosso texto e estilizar apenas a primeira letra da frase com uma
fonte maior. Como fazer para selecionar essa letra? A solução ingênua seria colocar um elemento ao redor da letra para podermos selecioná-la no CSS:

<p><span>E</span> studar é a melhor maneira de aprender.</p>

Essa solução deixa o HTML confuso e difícil de manter.
   O CSS apresenta então a ideia de pseudo-elementos.
São elementos que não existem no documento mas podem ser selecionados pelo CSS.
É como se houvesse um elemento lá!
   Podemos voltar o HTML inicial:

<p>Estudar é a melhor maneira de aprender.</p>

E no CSS:
   p::first-letter {
      font-size: 200%;
   }


   Temos ainda outro pseudo-elemento para selecionar a primeira linha apenas em um texto grande:
   p::first-line {
      font-style: italic;
   }

Exemplo de utilização :

Estudar é a melhor maneira de aprender.

---

13-Novos conteúdos

Pesonalização de tags para sites de busca
   Há ainda um outro tipo de pseudo-elemento mais poderoso que nos permite gerar conteúdo novo via CSS.
Imagine uma lista de links que queremos, visualmente, colocar entre colchetes:
[ Link 1 ]
[ Link 2 ]
[ Link 3 ]
   Podemos, claro, apenas escrever os tais colchetes no HTML. Mas será que o conteúdo é semântico?
Queremos que esses colchetes sejam indexados pelo Google? Queremos que sejam lidos como parte do texto pelos leitores de tela?
Talvez não. Pode ser um conteúdo apenas visual. Podemos gerá-lo com CSS usando os pseudoelementos after e before.
O HTML seria simples:

<a href="...">Link1</a>
<a href="...">Link2</a>
<a href="...">Link3</a>

E no CSS:
   a:before {
      content: '[';
   }
   a:after {
      content: ']';
   }
   Ou ainda, imagine que queremos colocar a mensagem (externo) ao lado de todos os links
externos da nossa página. Usando pseudo-elementos e seletores de atributo, conseguimos:
   a[href^=http://]:after {
      content: ' (externo)';
   }
Isso pega todos os elementos <a> que começam com http:// e coloca a palavra (externo) depois.
Exemplo de utilização :
Link1
Link2
Link3

---

Caso tenha entendido o que foi explicado acima e precise de um resumo, segue o link para download de um resumo muito bom. Resumo de seletores