Propriedades do CSS e como utilizar - Parte 1

CSS é uma linguagem de estilização em cascata que pode ser um pesadelo para quem está começando, por causa da grande possibilidade de formas para se estilizar um elemento.

Aqui vão algumas propriedades e como utilizá-las:

• margin
  Adiciona uma área de margem aos quatro lados de um elemento (topo, direita, fundo e esquerda).

margin: auto;  /*adiciona margem automática*/

margin: 10px 10px; /*o primeiro valor é para cima e baixo e o segundo valor é para esquerda e direita*/

margin: 10px 10px 10px 10px; /*ordem dos valores, do primeiro ao último: topo, direita, fundo, esquerda*/

margin: 10px; /*define a margem para os 4 lados*/

Além do px, existe a unidade em.

Também é possível definir a margem individualmente, utilizando:

margin-top: 10px; /*adiciona margem ao topo*/

margin-right: 10px; /*adiciona margem à direita*/ 

margin-bottom: 10px; /*adiciona margem ao fundo*/ 

margin-left: 10px; /*adiciona margem à esquerda*/

• padding
  Adiciona um espaçamento entre o conteúdo e a sua borda. Assim como margin, o padding é um "atalho" para os quatro lados do elemento.

padding: auto; /*adiciona espaçamento automático*/

padding: 10px 10px; /*o primeiro valor é para cima e baixo e o segundo valor é para esquerda e direita*/

padding: 10px 10px 10px 10px; /*ordem dos valores, do primeiro ao último: topo, direita, fundo, esquerda*/

padding: 10px; /*define o espaçamento para os 4 lados*/

Além do px, existe a unidade em.

Também é possível definir o padding individualmente, utilizando:

padding-top: 10px; /*adiciona espaçamento ao topo*/

padding-right: 10px; /*adiciona espaçamento à direita*/ 

padding-bottom: 10px; /*adiciona espaçamento ao fundo*/ 

padding-left: 10px; /*adiciona espaçamento à esquerda*/

• border
  Define uma borda ao elemento. Border é um atalho para escrever, de forma resumida, a altura, o estilo e a cor da borda.

Exemplo:

border: 1px solid red;

Onde, 1px é a altura, solid é o estilo e red é a cor.

Também é possível definir individualmente, mas é mais comum o uso dessa maneira.

• display
  Define a forma que o elemento vai ser tratado/exibido pelo navegador.

Existem alguns tipos e os mais comuns são:

display: inline; 

Faz com que os elementos tenha uma visualização em linha e, quando em maior quantidade, ficam um ao lado do outro. Os exemplos mais comuns de elementos que se comportam dessa maneira são as tags HTML: a, span, strong, b, entre outras.

display: block; 

Faz com que os elementos ocupem todo o tamanho do elemento que eles estão inseridos, gerando uma quebra de linha, ou seja, fazendo com que fiquem um abaixo do outro.
Exemplos das tags HTML que se comportam dessa maneira: p, div, ol, ul, header, main, footer, entre outras.

display: inline-block; 

Beleza, mas e como funcionaria o inline-block?
Ele tem uma mistura dos dois, tanto do inline, como do block, como o próprio nome já diz. A diferença é que, definindo um elemento como inline-block, é possível alterar algumas coisas que o inline sozinho não permite.

Simplificando, com o inline-block você terá o comportamento de um elemento inline, porém permitindo que altere as margens, altura, largura e padding do seu elemento assim como um elemento do tipo block.

• width
  Determina a largura de um elemento.

Dependendo da utilização no projeto, pode ter medidas como, por exemplo:

width: auto; /*O próprio navegador calculará a largura*/

width: 2em; /*unidade de medida em*/

width: 20px; /*unidade de medida px*/

width: 100%; /*porcentagem*/

• height
  Determina a altura de um elemento.

Dependendo da utilização no projeto, também pode ter medidas como, por exemplo:

height: auto; /*O próprio navegador calculará a altura*/

height: 2em; /*unidade de medida em*/

height: 20px; /*unidade de medida px*/

height: 100%; /*porcentagem*/

• text-align
  Define como os elementos de texto serão alinhados.

Podem ser:

text-align: left; /*Alinha à esquerda*/

text-align: right; /*Alinha à direita*/

text-align: center; /*Alinha ao centro*/

text-align: justify; /*Alinha o texto dando um espaçamento entre as palavras*/

• text-decoration
  Define uma decoração adicionada ao texto e é um "atalho" para:

text-decoration-line: ; /*decoração da linha*/

text-decoration-color: ; /*cor da decoração*/

text-decoration-style: ; /*estilo de decoração*/

Geralmente se utiliza só o atalho text-decoration e, como exemplo, os valores podem ser:

text-decoration: none; /*sem decoração de texto - retira a que existir*/

text-decoration: underline; /*cria uma linha acima do texto*/

text-decoration: line-through; /*cria uma linha no meio do texto (riscado)*/

text-decoration: overline; /*cria uma linha abaixo do texto*/

• color
  Adiciona cor a um elemento de texto.

Exemplo:

color: red; /*cor vermelha*/

color: #000000; /*cor preta*/

color: rgb(0, 0, 255); /*cor azul*/

E aí, te ajudou de alguma forma ou tem algo a acrescentar?
Diz aqui nos comentários e logo logo faço uma parte 2 com mais propriedades!