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.
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;
