CSS

From DreamsIT


Cascading Style Sheets (CSS) é um mecanismo para adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web[1]

Sintaxe[2][edit | hide all | hide | edit source]

Para escrever código CSS é necessário seguir uma regra. A regra é uma declaração que possui uma sintaxe própria bem simples que define a forma com que o estilo será aplicado aos nossos elementos HTML. Você pode ver a regra a seguir:


    seletor{
      propriedade: valor;
    }


A nossa regra como pode ser visto é composta de três partes principais: um seletor, uma propriedade e um valor a se aplicar.

Explicando de forma grotesca:

 O seletor nada mais é do que o nosso elemento HTML ao qual queremos aplicar a regra (por exemplo: div, body).
A propriedade é o atributo do elemento que será aplicado a regra. (por exemplo: color, font, position).
O Valor é a característica que o elemento irá assumir (por exemplo: cor azul, tamanho 14 para a fonte).

Exemplificando[edit | hide | edit source]

Vamos para um exemplo:
    body{
      background-color: #000;
    }


No nosso exemplo o elemento ao qual estamos aplicando a regra é:

O BODY este é o nosso seletor
A nossa propriedade é background-color que define a cor de fundo do documento
E o nosso valor #000 qué é igual a cor preta.


Incluindo CSS na página[3][edit | hide | edit source]

Existem três formas para incluir o código CSS em seu projeto[edit | hide | edit source]

Inline[edit | hide | edit source]

A primeira forma de aplicar CSS a uma página é utilizando o atributo style em elementos do HTML:
1     <p style="color: blue">Parágrafo com fonte azul.</p>
2     <p>Esse outro parágrafo não é azul, a não ser que
3     exista <span style="color: red">CSS em outro lugar</span>.</p>

Interno[edit | hide | edit source]

A segunda forma é utilizar a tag style dentro do head da página HTML:


1     <head>
2       <style type="text/css">
3         seletor { propriedade: valor; }
4       </style>
5     </head>

Externo[edit | hide | edit source]

E a última - porém a mais utilizada - maneira de aplicar CSS é criar um ou mais arquivos com extensão .css e incluí-los na estrutura head do HTML:


    <head>
      <link rel="stylesheet" type="text/css" href="reset.css">
      <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

Qual a diferença entre CLASS e ID?[4][edit | hide | edit source]

Em HTML e CSS, há a possibilidade de aplicar estilos através de 'class' e 'id' e, em JavaScript é possível indentificar algum elemento de uma página por sua classe, id ou tag. Mas qual a diferença entre 'class' e 'id'?

O que são classes?[edit | hide | edit source]

As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a VÁRIOS elementos de uma vez. Exemplo:

Código CSS:[edit | hide | edit source]

1     .classe1 {
2       background: blue;
3     }

Código HTML:[edit | hide | edit source]

 1     <!DOCTYPE html>
 2     <html lang="pt-br">
 3       <head>
 4         <title></title>
 5         <meta charset="utf-8">
 6       </head>
 7       <body>
 8         <div class="classe1">Div1</div>
 9         <div class="classe1">Div2</div>
10         <div class="classe1">Div3</div>
11         <div class="classe1">Div4</div>
12         <div class="classe1">Div5</div>
13       </body>
14     </html>

Então, todas as 'divs' que estiverem com a classe "classe1" estarão com um background azul(blue).


O que são ids?[edit | hide | edit source]

As ids são uma forma de identificar um elemento, e devem ser ÚNICAS para cada elemento. É como se fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um elemento em especial. Exemplo:

Código CSS:[edit | hide | edit source]

 1     #idUm {
 2       background: blue;
 3     }
 4     #idDois {
 5       background: yellow;
 6     }
 7     #idTres {
 8       background: lightblue;
 9     }
10     #idQuatro {
11       background: lightgreen;
12     }

Código HTML:[edit | hide | edit source]

 1     <!DOCTYPE html>
 2     <html lang="pt-br">
 3       <head>
 4         <title></title>
 5         <meta charset="utf-8">
 6       </head>
 7       <body>
 8         <div id="idUm">Div1</div>
 9         <div id="idDois">Div2</div>
10         <div id="idTres">Div3</div>
11         <div id="idQuatro">Div4</div>
12       </body>
13     </html>


Então, como mostra o código acima, não podemos repetir uma 'id'. Deve ser especialmente única para cada elemento.