Gente, antes de tudo eu quero pedir que não repassem, não rebloguem, enfim, não tirem esse tutorial daqui.  Peço com muito carinho, não retirem os créditos, porque foi muito trabalhoso de fazer isso aqui.  E se esse tutorial lhe foi útil, por favor, credite.  Não custa nada, e ainda me deixa feliz. Se eu ver qualquer plágio por aí, o tutorial vai ser retirado.  Tutorial totalmente desenvolvido por Carol.

Vou explicar aqui cada comando do css.  O css é a parte entre <style> e </style> que comanda o gráfico e o design do theme.  Os código ficam entre chaves {} e cada um tem uma função.

width: determina a largura de um objeto.  {width: LARGURApx;}.  {min-width: LARGURApx} serve para indicar a largura mínima do objeto.  {max-width: LARGURApx} serve para indicar a largura máxima do objeto.

height: determina a altura de um objeto.  {height: ALTURApx;}.  {min-height: ALTURApx} serve para indicar a altura mínima do objeto.  {max-height: ALTURApx} serve para indicar a altura máxima do objeto.

background: determina o fundo do seu objeto.  Pode conter uma cor {background-color: #COR} ou uma url {background: url(‘URL_DA_IMAGEM’)}

background-repeat: determina se o background repete, ou não.  Pode ser {background-repeat: repeat;} para repetir e {background-repeat: no-repeat;} para não repetir, {background-repeat: repeat-x;} para repetir para os lados e {background-repeat: repeat-y;} para repetir para cima ou para baixo.

background-attachment: determina se o background é fixo, ou móvel.  Pode ser: {background-attachment: fixed;} para ficar fixo, ou {background-attachment: scroll;} para ficar móvel.

border: determina um contorno para o seu objeto.  Pode ser atribuído apenas para o topo {border-top: TAMANHOpx solid #COR;}, para a base {border-bottom: TAMANHOpx solid #COR;} para o lado direito {border-right: TAMANHOpx solid #COR;} e para o lado esquerdo {border-left: TAMANHOpx solid #COR;}

solid: determina uma borda/contorno/linha sólida.

dashed: determina uma borda/contorno/linha tracejada.

dotted: determina uma borda/contorno/linha pontilhada.

border-radius: determina se as bordas são arredondadas ou não.  Quanto maior o tamanho, mais arredondado fica.  Pode ser {border-radius: SIZEpx;} para todas as bordas ficarem arredondadas, e o código para arredondar somente dois lados, ou um só, pode ser gerado nesse site.

color: determina a cor do texto {color: #COR;}

position: super importante, determina se o objeto vai ficar fixo ou móvel.  Pode ser {position: fixed;} para ficar fixo, ou {position: absolute} para ficar móvel.

float: determina a posição do objeto.  Pode ser {float: left} para a esquerda, ou {float: right;} para a direita, ou {float: center} para ficar no meio/centro.

margin: determina a distância entre o objeto e uma direção.  Pode ser {margin-top: DISTÂNCIApx;} para indicar a distância entre o topo e o objeto, {margin-bottom: DISTÂNCIApx;} para indicar a distância entre a base inferior e o objeto, {margin-left: DISTÂNCIApx;} para indicar a distância entre a margem esquerda e o objeto, {margin-right: DISTÂNCIApx;} para indicar a distância entre a margem direita e o objeto.

font-family: determina a fonte usada no texto.  {font-family: FONTE;}

text-align: determina o alinhamento do texto.  Pode ser {text-align: left;} para ficar a esquerda, ou {text-align: right;} para ficar a direita, ou {text-align: center;} para ficar no meio/centro.

font-size: determina o tamanho do texto.  {font-size: TAMANHOpx;}

padding: é a distância entre a borda e o conteúdo do objeto.  Pode ser {padding: DISTÂNCIApx;} para a distância ser atribuída a todas as bordas, {padding-top: DISTÂNCIApx;} para a distância ser atribuída à margem do topo, {padding-bottom: DISTÂNCIApx;} para a distância ser atribuída à margem da base inferior, {padding-left: DISTÂNCIApx;} para a distância ser atribuída à margem da esquerda, ou {padding-right: DISTÂNCIApx;} para a distância ser atribuída à margem da direita.  É esse código que faz o menu esticar quando passa o mouse, no menu hover.

Gente, existem muitos outros códigos.  Eu só coloquei os básicos e essenciais, mas conhecendo bem esses, você já consegue fazer muita coisa.  Não esqueça de creditar.

{Carol}