**CSS**

No [site do Maujor][1] tem um tutorial sobre CSS muito bom, vou deixar aqui algumas partes relevantes.

A regra CSS tem sua própria sintaxe e define como o estilo será aplicado aos elementos do HTML:

    seletor { propriedade: valor; }


>   -  *seletor*: é um elemento da marcação `HTML` identificado pelo seu nome (por exemplo: `<p>`, `<h1>`, `<form>`), pelo nome de uma classe
> aplicada ao elemento da marcação `HTML` (por exemplo: `.topo`,
> `.principal`, `.menu`), pelo nome de um identificador ID aplicado ao
> elemento da marcação `HTML` (por exemplo: `#tudo`, `#auxiliar`,
> `#rodape`) ou por qualquer outro identificador `CSS` de elementos ou
> trechos da marcação `HTML`, genericamente denominados de seletores
> `CSS`.
>   - *propriedade*: é a propriedade do elemento `HTML` ao qual será aplicada a estilização definida no valor (por exemplo: tamanho da
> fonte, cor do texto, altura do elemento).
>   - *valor*: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde,
> altura igual a 300px)
> 
> 
> Na sintaxe de uma regra `CSS`, escreve-se o seletor e a seguir a
> propriedade e o valor separados por dois pontos e colocados entre
> chaves `{` `}`.
> 
> É possível escrever mais de uma declaração `CSS` em uma regra com o
> objetivo de estilizar-se várias propriedades de um mesmo seletor.
> Neste caso deve-se usar ponto-e-vírgula (`;`) para separar as
> declarações `CSS` constantes da regra `CSS`. O ponto-e-vírgula é
> facultativo quando a regra `CSS`for constituída de uma só declaração
> `CSS`e também facultativo após a última declaração `CSS`quando houver
> mais de uma declaração `CSS`.

<br>
**Agrupamento de Seletores**

A regra será aplicada a mais de um seletor, basta utilizar a vírgula(`,`).

    h1, h2, p, .box {
    	color: green;
    }


<br>
**Seletor classe**
Você pode criar uma regra para uma classe específica e colocá-la no HTML como o atributo `class`. No seu código CSS, utilize o nome da sua classe  precedido de ponto(`.`):

    elemento.nomedaclasse { 
    	propriedade: valor;
    }

<br>

**Seletor ID**

> A grande diferença entre o seletor **id** e o de classe é a unicidade.
> Ou seja, um seletor *id* de determinado nome só pode ser definido a um
> e somente um elemento `HTML` dentro do documento.

É a mesma ideia da classe, porém o `id` é precedido do `#` ("cerquilha"/"tralha"/"jogo-da-velha"):

    #meuID {
    	propriedade: valor;
    }

<br>

**Inserindo comentários nas CSS**

Comentários em CSS começam com o sinal `/*` e termina com `*/`:

    /* este é um comentário*/
    p { 
    font-size: 14px;               /* este é outro comentário*/
    	color: #000;
    	font-family: Arial, Serif;
    }

<br>
**No seu exemplo**:

 - `.e1{}`: estilo será aplicado na classe `.e1`
 - `#e1{}`: estilo será aplicado no id `#e1`
 - `e1 e2{}`: o estilo será aplicado dentro do elemento `e2` que está dentro de `e1`, vou te dar um exemplo:
    - Suponha que `e1` seja a `table` e `e2` a `td`, que tem a classe `padrao`:

       `.table td.padrao {
           font-size: 10pt;
           color: red;
      }`
 
     - Todas as `td`, que tiverem a classe `padrao`, da `table` terão tamanho da fonte `10pt` e cor vermelha.

<br>

  - `e1,e2{}`: aplica o estilo nos dois.
  - `e1 *{}`: aplica o estilo para todos os elementos dentro de `e1`,
  - `e1{}`: aplica o estilo no `e1`, um exemplo seria o `body`:

       `body {
            min-width: 650px;
       }`

<br>

 - `.e1 a:link{}` = olha o exemplo, ele "muda" o estilo de um link quando você passa o mouse sobre ele:

      `a:hover {
          background-color: yellow;
      }`


<br>
Referência:

 - [Tutorial CSS][2]
 - [Sintaxe CSS][1]


  [1]: http://www.maujor.com/tutorial/sintaxetut.php
  [2]: http://www.maujor.com/w3ctuto/firstcss.html