Introdução ao CSS

Marcadores: CSS, HTML Editar postagem

CSS ou Folha de Estilos em Cascata é uma linguagem de estilização de documentos Web. Com o CSS, por exemplo, é possível colocar como fundo de um elemento HTML, uma imagem, uma cor ou um gradiente.

A sintaxe do CSS

Uma declaração CSS é denominada regra. Um conjunto de regras aplicadas a um mesmo elemento recebe o nome de classe. Um conjunto de classes e regras CSS recebe o nome de folha de estilos.
A sintaxe do CSS é composta de um seletor (identificação do(s) elementos que serão estilizados), seguido das propriedades CSS e seus respectivos valores entre chaves.
Exemplo:

Seletor{ Propriedade CSS: Valor }

Se houver mais de uma propriedade CSS formando uma regra, devemos separá-las usando ponto e vírgula (;).
Exemplo:

Seletor{ Propriedade CSS 1: Valor; Propriedade CSS 2: Valor; }

A utilização do ponto e vírgula após o valor do último elemento de uma regra CSS é facultativo.
Para facilitar a interpretação futura de uma folha de estilos, é recomendável que as regras CSS sejam desenvolvidas em forma de cascata, como no exemplo abaixo.
Exemplo:

Seletor{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
      Propriedade CSS 3: Valor;
      Propriedade CSS 4: Valor;
      Propriedade CSS 5: Valor;
}
Seletor{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
      Propriedade CSS 3: Valor;
      Propriedade CSS 4: Valor;
      Propriedade CSS 5: Valor;
}

Se em uma mesma regra CSS seja necessário o uso de múltiplos seletores, os mesmos devem ser separados por vírgula.
Exemplo:

Seletor 1, Seletor 2, Seletor 3{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
      Propriedade CSS 3: Valor;
      Propriedade CSS 4: Valor;
      Propriedade CSS 5: Valor;
}

Seletores

Um seletor indica ao browser a quais elementos da página HTML ele deve aplicar as propriedades CSS utilizadas na construção de uma regra.
Normalmente o valor de um seletor é o próprio nome da tag HTML.
Exemplo:

a{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
}

Tomando por base o exemplo acima, se for utilizada somente "a" como seletor, todos os links da página seriam estilizados da mesma forma.
Para resolver este problema, o CSS nos possibilita, através dos seletores, traçar um caminho pelo código HTML e estilizar somente uma tag ou elemento específico.
Observe o código HTML abaixo:

<div>
      <a href="#">Meu Link</a>
</div>
<a href="#">Meu Link</a>

Analisando o código HTML acima podemos observar que temos dois links, o primeiro dentro de uma divisão (div) e um segundo fora da divisão. Utilizando o exemplo de regra CSS acima para estilizar o nossos links, todos seriam afetados pela regra, mas se quisermos aplicar a regra CSS somente ao link que está dentro da div basta informarmos o caminho que o CSS deve percorrer até chegar a tag que desejamos estilizar.
Observe o exemplo:

div a{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
}

Preste a atenção no seletor que foi declarado, ele representa o caminho até chegar ao link que está dentro da divisão. Portanto dessa forma o link que está fora da divisão não será estilizado pela regra acima.
Mesmo com a possibilidade de declarar o caminho de um elemento através do seletor, pode ocorrer o imprevisto de que possua dois caminhos iguais no código HTML.
Exemplo:

<div>
      <a href="#">Meu Link</a>
</div>
<div>
      <a href="#">Meu Link</a>
</div>

Se a intenção é estilizar todos os links dentro de divisões HTML, a regra CSS acima é válida, mas se não for esta a intenção, o problema pode ser contornado com os seletores id e class que você confere logo abaixo.

Seletor id

Para definir um nome de seletor id para uma tag HTML, utilize o comando id.
Exemplo:

<div id="meu_link">
      <a href="#">Meu Link</a>
</div>

Um valor de id é único, portanto um valor como o do exemplo acima "meu_link" só pode estar presente em uma tag HTML.
Veja os exemplos:
A) Exemplo incorreto:

<div id="meu_link">
      <a href="#">Meu Link</a>
</div>
<div id="meu_link">
      <a href="#">Meu Link</a>
</div>

B) Exemplo correto:

<div id="meu_link">
      <a href="#">Meu Link</a>
</div>
<div id="meu_link_2">
      <a href="#">Meu Link</a>
</div>

Para fazer a declaração de um id como seletor, se usa um cerquilha (#), seguido do nome do id.
Observe os dois exemplos abaixo que estão corretos:
A)

div#meu_link a{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
}

B)

#meu_link a{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
}

Seletor class

O seletor class funciona de forma contrária ao id, porque ao invés de ser um seletor para uma única tag, este seletor pode ser aplicado a diversas tags.
Para adicionar um seletor class ao seu código HTML use o comando class.
Exemplo:

<div class="meu_link">
      <a href="#">Meu Link</a>
</div>
<div class="meu_link">
      <a href="#">Meu Link</a>
      <a href="#">Meu Link</a>
</div>

A representação de uma class no seletor css é feita por um ponto (.) seguido do valor do comando class.
Exemplo:

.meu_link a{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
}

Dessa forma todos os links que pertencem a classe "meu_link" serão estilizados pela mesma regra css.

Propriedades

As propriedades CSS permitem ao programador construir as regras CSS. Cada propriedade tem uma função específica, como por exemplo, alterar o tipo da fonte ou a cor de fundo de um elemento ou tag HTML.
Para trocar a cor da fonte, por exemplo, usa-se propriedade color seguida de dois pontos e um valor para a cor (blue, #06f).
Exemplo:

.meu_link a{
      color:#06f;
}

Em futuras postagens você irá conferir mais propriedades CSS e suas respectivas funções.

Aonde colocar o meu CSS?

Existem três formas para se aplicar o CSS em uma página HTML, sendo duas de forma interna a página e uma de forma externa.

1°) Utilizando o comando style do HTML

Essa é a forma mais fácil de usar o CSS, pois não requer o uso de seletores. Para usá-la basta colocar as propriedades e seus valores como valor do comando style.
Exemplo:

<div style="Propriedade CSS 1: Valor; Propriedade CSS 2: Valor;">
      <a href="#">Meu Link</a>
</div>

2°) Criando um bloco de CSS

Está é uma opção a utilização de folhas de estilo dentro de uma página HTML.
Para criar um bloco de CSS você deve utilizar a tag style com o comando type assumindo o valor de "text/css".
Observe o exemplo de como ficaria isto em uma página HTML.

<!DOCTYPE html>
<html>
           <head>
                     <title>Introdução ao CSS</title>
                     <style type="text/css">
                           .meu_link a{
                                 Propriedade CSS 1: Valor;
                                 Propriedade CSS 2: Valor;
                           }
                     </style>
           </head>
           <body>
                     <div class="meu_link">
                           <a href="#">Meu Link</a>
                           <a href="#">Meu Link</a>
                           <a href="#">Meu Link</a>
                     </div>
           </body>
</html>

3°) CSS em um arquivo externo

Está é uma boa opção se as regras e classes CSS serão aplicadas a uma ou mais páginas HTML.
Para se usar desta forma devemos então criar um arquivo que contenha todas as regras CSS.
Abra um novo documento no Notepad++ e salve com o nome de sua preferência .css (exemplo: meus_estilos.css). Dentro deste arquivo coloque todas as regras e classes CSS que quiser.
Agora precisamos ligar os estilos do arquivo CSS ao código HTML, para isso use a tag link com o comando href, como valor deste comando adicione o link do arquivo CSS. Também use o comando rel assumindo o valor "stylesheet" e o comando media assumindo o valor "screen".
Confira abaixo um exemplo dos arquivos:
1° arquivo: meus_estilos.css

#titulo{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
}
.meus_links a{
      Propriedade CSS 1: Valor;
      Propriedade CSS 2: Valor;
}

2° arquivo: index.html

<!DOCTYPE html>
<html>
           <head>
                     <title>Introdução ao CSS</title>
                     <link rel="stylesheet" href="meus_estilos.css" media="screen"/>
           </head>
           <body>
                     <p id="titulo">Lista de links</p>
                     <div class="meus_links">
                           <a href="#">Meu Link</a><br />
                           <a href="#">Meu Link</a><br />
                           <a href="#">Meu Link</a>
                     </div>
           </body>
</html>

---

---

Postagens relacionadas: