Introdução ao CSS

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:

5 comentários:

Fabiano Alves Batista disse...

Parabéns! Ótimo artigo.

Maik Basso disse...

Obrigado!

DANIEL JOSE DA SILVA disse...

Muito bom o artigo, bem didático. Obrigado por compartilhar conhecimento.

Anônimo disse...

Legal

Anônimo disse...

Belo site...

Postar um comentário

Deixe um comentário referente ao assunto do post, compartilhe seu conhecimento, sua dúvida ou deixe uma sugestão.