CSS

# = id
. = class

Exemplos:

#para {
  text-align: center;
  color: red;

}

.center {
  text-align: center;
  color: red;

}

Propriedades tipográficas e fontes

font-family: tipo de fonte

h1 { 

 font-family: serif; 

} 

h2 { 

 font-family: sans-serif; 

} 

p { 

  font-family: monospace; 

}

text-align: alinhamento do texto

p { 

  text-align: right; 

}

center,justify,left


É possível configurar também uma série de espaçamentos de texto com o CSS: 

p { 

  line-height: 3px; /* tamanho da altura de cada linha */  

  letter-spacing: 3px; /* tamanho do espaço entre cada letra */ 

  word-spacing: 5px; /* tamanho do espaço entre cada palavra */ 

  text-indent: 30px; /* tamanho da margem da primeira linha do texto */ 

}

Imagem de fundo:

h1 {
  background-image: url(link-da-imagem.jpg);
}

Bordas:

body { 

  border-color: red; 

  border-style: solid; 

  border-width: 1px; 

}

ou

body { 

  border: 1px solid red; 

}

Cores:

h1 { 

  color: red; 

} 

h2 { 

  background-color: yellow; 

}

RGB:

h3 { 

  color: rgb(255, 200, 0); 

}

notação hexadecimal

h3 { 

  background-color: #f2eded; 

}

Espaçamento, margem e dimensões

Padding (Espaçamento)

• padding-top
• padding-right
• padding-bottom
• padding-left

Se passados quatro valores, serão aplicados respectivamente a padding-top, padding-right, padding-bottom e padding-left. Para facilitar a memorização dessa ordem, basta lembrar que os valores são aplicados em sentido horário.

p {
  padding: 10px 20px 15px 5px;
}

Margin (margem)




margin-top
margin-right
margin-bottom
margin-left


p {
  margin: 10px 20px 15px 5px;
}




Há ainda uma maneira de permitir que o navegador defina qual será a dimensão da propriedade padding ou margin conforme o espaço disponível na tela: definimos o valor auto para os espaçamentos que quisermos.







p {
  margin: 0 auto;
}







Dimensões

É possível determinar as dimensões de um elemento, por exemplo:
p {
  background-color: red;
  height: 300px;
  width: 300px;
}