Resumo das principais propriedades CSS (Folhas de estilo em cascata)

A linguagem utilizada atualmente para definir o layout dos documentos HTML é a CSS, uma abreviação para o termo em inglês Cascading Style Sheet que, traduzido para o português, ficou como folhas de estilo em cascata.

Em meus estudos e pesquisa sobre desenvolvimento web, a definição mais precisa que encontrei no site da W3C (World Wide Web Consortium)  para folhas de estilo foi:

Folha de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos, etc) aos documentos web.

CSS - Folhas de estilo em cascata

Segue abaixo um resumo com as principais propriedades de estilo da linguagem CSS.

 

font-family: Define a família da fonte utilizada. Exemplos:

font-family: Arial, Verdana, Geneva, sans-serif;

font-family: Georgia, "Times New Roman", Times, serif;

 

font-style: Define a propriedades de estilos que podem ser: normal, italic ou oblique. Exemplos:

font-style: italic;

font-style: normal;

 

font-weight : Define a propriedade de intensidade de uma fonte na sequência de valores de ‘100’ a ‘900’, cada número indica uma fonte mais intensa (escura) que o valor anterior. Exemplos:

font-weight: normal;  (ou valores de 100 a 500)

font-weight: bold;  (ou valores de 600 a 900)

 

font-size: Define o tamanho da fonte. Exemplo:

font-size: 12pt;

 

letter-spacing: Controla o espaçamento entre as letras de um texto. Exemplo:

letter-spacing: 5px;

 

word-spacing: Controla o espaçamento entre as palavras de um texto. Exemplo:

word-spacing: 10px;

 

line-height: Controla a altura entre as linhas do texto de um paragrafo. Exemplo:

line-height: 25px;

 

text-align: Controla o posicionamento horizontal do conteúdo de um elemento. Os valores possíveis são: left, right, center e justify. Exemplo:

text-align: center;

 

text-decoration: Define um efeito decorativo no texto. Podendo entre eles ser: none (sem decoração); underline (sublinhado); line-through(linha cortando o texto); e blink (efeito piscante). Exemplo:

text-decoration: underline;

 

text-transform: Controla os efeitos de capitalização do texto. Com ela, podemos definir a caixa das letras (minúsculas e maiusculas). Os valores possíveis são:

  • capitalize – transforma o primeiro caracter de cada palavra em maiúscula
  • uppercase – transforma todas as letras de todas as palavras em maiúsculas
  • lowercase – transforma todas as letras de todas as palavras em minúsculas
  • none – cancela algum valor que tenha sido herdado
text-transform: uppercase;

 

text-indent: Define o tamanho da endentação para a primeira linha do texto contida em um bloco, ou seja, o deslocamento para a direita de um paragrafo. Exemplo:

text-indent: 20px;

 

color: Define a cor do texto de um texto. Exemplos:

color: red;

color: rgb(255,0,0);

color: #FF0000;

 

font: Propriedade para definir em um único local vários estilos para a fonte. A sintaxe geral para font: [style] [variant] [weight] [size] [/line-height] [family]. Exemplo:

font: normal small-caps bold 14px "Comic Sans MS", sans-serif;

Nota: Os valores size e family são obrigatórios. Os demais são facultativos (se você os omitir será adotado o valor default ou herdado do elemento pai).

 

width: Define o comprimento (largura) de um elemento. Exemplo:

width: 100px;

 

height: Define a altura de um elemento. Exemplo:

height: 50px;

 

border: Define bordas para um elemento. Exemplo:

border:1px solid #CCC;

border-bottom:5px solid #97B2B9;

 

background: Define as propriedades relacionadas ao fundo de exibição. Exemplo:

background:url("images/fundo-topo.png") no-repeat;

 

margin: Controla as margens de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens.

margin: 15px;

margin: 10px 1px 5px 20px;

A última atribuição do exemplo acima é equivalente a:

margin-top: 10px;

margin-right: 1px;

margin-bottom: 5px;

margin-left: 20px;

 

padding: Controla os espaçamentos de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, aos espaçamentos superior, direito, inferior e esquerdo. Se for fornecido apenas um valor, ele é aplicado aos quatro espaçamentos.

padding: 5px;

padding: 10px 5px 5px 10px;

 

float: Esta regra faz com que o box seja retirado de sua posição  no fluxo do documento e flutuado para a direita ou esquerda. O espaço original ocupado pelo box não será deixado livre, mas preenchido pelo elemento que segue no fluxo do documento. Exemplo:

float: left;

float: right;