background: #ffffff url(endereço_da_imagem) top left no-repeat fixed;

Valores

• attachment
• color
• image
• position
• repeat

Você também pode definir os valores individualmente.

Background Attachment

Se você estiver utilizando uma imagem de fundo em seu site, você pode definir em background attachment para que ele fique fixo, para parecer que o texto está flutuando sob o background ou scroll, para que ele role junto com a página.

Valores

• fixed
• scroll

Background Color

Para especificar a cor de fundo de um elemento, utilize-se da propriedade Background Color:

background-color: valor;

Valores

• Nome da cor
• Número hexadecimal
• Código da cor RGB
• Transparent

Background Image

Para especificar uma imagem de fundo para um elemento, utilize a propriedade Background Image:

background-image: url(endereço_da_imagem);

Valores

• url
• none

Background Position

Você pode posicionar a imagem utilizada no fundo de qualquer elemento, para isso utilize-se da propriedade Background Position:

background-position: value;

Valores

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-% y-%
• x-pos y-pos

Background Repeat

Você pode ajustar uma imagem de fundo usada em qualquer elemento para que ela se repita nos eixos x e y, basta utilizar a propriedade Background Repeat:

background-repeat: valor;

Valores

• no-repeat
• repeat
• repeat-x
• repeat-y

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding
• Guia CSS – 7ª Parte: Margens

• a:link {color: #009900;}
• a:visited {color: #999999;}
• a:hover {color: #333333;}
• a:focus {color: #333333;}
• a:active {color: #009900;}

Agora vamos ver o que cada uma delas significa:

a:link {color: #009900;}

Usado para estilizar os links da página quando não está ocorrendo nenhum evento.

a:visited {color: #999999;}

Usado para estilizar os links da página quando o mesmo já foi visitado.

a:hover {color: #333333;}

Usado para estilizar os links da página quando o usuário coloca o mouse sobre o link.

a:focus {color: #333333;}

Praticamente a mesma função que a:active, mas com uma diferença, está é para usuários que não estão usando o mouse e estão navegando através do teclado, ele tem a função de alterar a cor do link quando o usuário está “tabulando”(usando a tecla tab), para alternar entre os links da página.

a:active {color: #009900;}

Usado para estilizar os links da página enquanto o mesmo é pressionado.

Pseudo classes

Você pode estilizar os links em diferentes partes da sua página utilizando as pseudo classes, por exemplo, você pode ter diferentes cores para um menu e outras cores para os links do conteúdo do seu site:

• #content a:link {color: #009900;}
• #content a:visited {color: #999999;}
• #content a:hover {color: #333333;}
• #content a:focus {color: #333333;}
• #content a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID content terão as condições citadas acima, mas vamos dizer que você tem um menu que quer deixar com as cores dos links diferentes do conteúdo:

• #menu a:link {color: #009900;}
• #menu a:visited {color: #999999;}
• #menu a:hover {color: #333333;}
• #menu a:focus {color: #333333;}
• #menu a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID menu terão as condições citadas acima. Você também poderia utilizar classes ao invés de ID’s.

• a.menu:link {color: #009900;}
• a.menu:visited {color: #999999;}
• a.menu:hover {color: #333333;}
• a.menu:focus {color: #333333;}
• a.menu:active {color: #009900;}

Neste caso, nosso HTML ficaria da seguinte forma:

<a class="menu" href="" title="" rel="">Link aqui</a>

Também pode ser declarado dessa forma:

• .menu a:link {color: #009900;}
• .menu a:visited {color: #999999;}
• .menu a:hover {color: #333333;}
• .menu a:focus {color: #333333;}
• .menu a:active {color: #009900;}

Nosso HTML ficaria assim:

<div class="menu">
<a href="" title="" rel="">Link aqui</a>
</div>

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding
• Guia CSS – 7ª Parte: Margens

Com a propriedade font podemos alterar o estilo(style), o peso(weight), o variant(mostrar o texto em maiúsculas), o tamanho(size), o line-height(altura da linha), e a própria propriedade font.

font: italic bold normal small/1.4em Verdana, sans-serif;

o código acima pode ser lido da seguinte maneira: Da esquerda pra direita, o primeiro item deixaria nosso texto em itálico, com um peso bold, o variant normal, um tamanho relativo, depois a altura da linha setada em 1.4em e a font definida como Verdana, ou se não for encontrada no sistema, sans-serif.

Font-family

Aqui é onde definimos uma “família de fontes”. A 2 possíveis valores:

• Nome da Família
• Família Genérica

Se você adicionar um nome da família, é aconselhável também adicionar a família genéria em sua extremidade. Por que isso é priorizado na lista. Assim, se o usuário não tiver o nome o nome da font especificado em font-family, ele usará a mesma família genérica.

font-family: Verdana, sans-serif;

Font-size

Para alterar o tamanho do nosso texto, utilizamos a propriedade font-size:

font-size: valor;

Também pode ser usado:

• xx-large
• x-large
• larger
• large
• medium
• small
• smaller
• x-small
• xx-small
• length
• % (porcentagem)

Font-style

Você pode ajustar o estilo do seu texto com a propriedade font-style:

font-style: valor;

Valores aceitos:

• normal
• itailc
• oblique

Font-variant

Você pode definir se seu texto deve ser motrado em maiúsculas com a propriedade font-variant:

font-variant: valor;

Valores aceitos:

• normal
• small-caps

Font-weight

Você pode controlar o peso da sua fonte com a propriedade font-weight:

font-weight: valor;

Valores aceitos:

• lighter
• normal
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• bold
• bolder

Gostou, então comente, deixe seu feedback!!!

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding
• Guia CSS – 7ª Parte: Margens

Você pode ajustar as cores do seu texto da seguinte forma:

cor: valor;

Os valores aceitos são:

• Nome da cor: Exemplo: (black, red…)
• Número Hexadecimal: Exemplo: (#ffffff, #000000)
• Código da cor RGB: Exemplo: ( rgb(255, 0, 0), rgb(0, 0, 0) )

Letter Spacing

Ou espaço entre as letras, pode ser ajustado da seguinte forma, deixando o valor em 0, impede que o texto justifique. Ele também aceita valores negativos.

letter-spacing: valor;

Valores aceitos:

• normal
• comprimento

Text Align

Você pode alinhar seu texto da seguinte forma:

text-align: valor;

Valores aceitos:

• left
• right
• center
• justify

Text Decoration

Tem como função efetuar decorações em seu texto

text-decoration: valor;

Valores aceitos:

• none
• underline
• overline
• line through
• blink

Text Indent

Tem como função identar o seu texto, ele suporta valores positivos e negativos.

text-indent: valor;

Valores aceitos:

• comprimento
• porcentagem

Text Transform

Você pode controlar o tamanho das letras do seu texto com essa propriedade, podendo deixar por exemplo, todo o texto em maiúsculo ou em minúsculo.

text-transform: valor;

Valores aceitos:

• none
• capitalize
• lowercase
• uppercase

White Space

Você pode controlar os espaços em branco dos elementos (x)HTML com essa propriedade:

Define como o espaço em branco do elemento é gerenciado (se as linhas devem ser quebradas para que apareçam na tela ou não (nowrap) ou se os espaços em branco, tabulações, etc. devem ser considerados (pre).

white-space: valor;

Valores aceitos:

• normal
• pre
• nowrap

Word Spacing

Tem como função ajustar o espaço entre as palavras, ele aceita valores positivos e negativos.

word-spacing: valor;

Valores aceitos:

• normal
• comprimento

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 8ª parte: Padding
• Guia CSS – 7ª Parte: Margens

padding-top: valor;
padding-right: valor;
padding-bottom: valor;
padding-left: valor;

Você também pode declarar esses valores para padding em uma única propriedade:

padding: 10px 10px 10px 10px;

Se você for declarar o padding como acima, ele segue a seguinte ordem:

• top
• right
• bottom
• left

Declarando apenas um valor, ele é ajustado para todos os lados:

padding: 10px;

Declarando apenas 2 ou 3 valores, funcionaria da seguinte forma:

padding: 10px 10px; Aqui o primeiro valor ajusta o padding para top e bottom e o segundo valor para left e right.

padding: 10px 10px 10px; Aqui o primeiro valor ajusta o padding para top, o segundo para left e right e o terceiro para bottom.

Como você pode reparar no exemplo abaixo, a div container tem um padding de 20px:

#container {
    width:760px;
    margin:0 auto;
    padding:20px;
    border:1px solid #000;
    background:#FFF;
}

Isso colocaria o conteúdo de container a 20px de sua borda.

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 7ª Parte: Margens

margin-top: valor definido pelo usuário ou auto;
margin-right: valor definido pelo usuário ou auto;
margin-bottom: valor definido pelo usuário ou auto;
margin-left: valor definido pelo usuário ou auto;

Você tem a escolha de 3 valores para a propriedade margem, que são as seguintes:

• Comprimento: em pixels
• Porcentagem
• Auto

É possível declarar todos os valores para margem em uma única propriedade:

margin:15px 15px 15px 15px;

A ordem da declaração acima fica da seguinte forma:

• Top: Alto
• Right: Direita
• Bottom: Abaixo
• Left: Esquerda

Se apenas um valor for declarado, ele é ajustado para todas as margens:

margin: 15px;

Você pode também declarar 2 ou 3 valores, onde:

margin: 15px 15px;

O primeiro valor é para a margem de cima e baixo, e o segundo valor é para a margem esquerda e direita, ou:

margin: 15px 15px 15px;

O primeiro valor é para a margem do topo, o segundo para as margens esquerda e direita e o terceiro para a margem de baixo. A propriedade margin também aceita valores negativos, como você pode ver abaixo:

margin: -15px;

Os elementos como parágrafo tem margens por defeito em alguns browsers, para corrigir esse erro, é só definir a margem como 0:

p { margin: 0; }

Quando você for declarar valores iguais a 0 para margens, não é necessário declarar 0px, só é necessário declarar 0.

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding

<span class="italico">Esse texto irá ficar em itálico</span>

O CSS fica da seguinte forma:

.italico { font-style:italic; }

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding

Por exemplo, você define uma divisão dentro de um arquivo (x)HTML colocando o seguinte código dentro das tags <body></body>:

<div>
Aqui vai o conteúdo do site
</div>

E na hora de aplicar algum estilo você deve prosseguir da seguinte forma, o HTML fica assim:

<div id="container">
Aqui vai o conteúdo do site
</div>

E aqui um exemplo do CSS:

#container{
  width:760px;
  margin:0 auto;
  padding:15px;
  border:1px solid #666;
  background:#FFF;
}

Tudo dentro dessa divisão será denominado pelo estilo da divisão “container”.

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding

Vamos pegar como exemplo uma div que contém o nosso site:

<div id="container">
Aqui vai o conteúdo do site
</div>

Como pode ver acima, eu resolvi usar ID para o meu “container” por que eu vou usálo uma única vez em minha página, e é ele quem irá conter todo o meu site. Agora o nosso CSS fica da seguinte forma:

#container {
  width:760px;
  margin:0 auto;
  padding:15px;
  border: 1px solid #666;
  background:#FFF;
}

Como pode reparar os seletores de ID começam com um sinal de #, ao invés de ( . )

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding

p {
   font-size:1.6em;
   color:#F00;
}

Tudo bem, mas eu quero que uma parte do meu parágrafo fique em verde e negrito, aí é que iremos usar uma classe, então, vamos criar a mesma:

.boldgreen {
  color: #008080;
  font-weight: bold;
}

Para uma melhor compreensão, veja um exemplo em funcionamento. Como você pode reparar, os seletores de classe começam com (.), e quanto ao nome das mesmas, elas ficam ao seu critério.

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding

seletor { propriedade:valor }

Onde: O seletor é o elemento (x)HTML que você deseja denominar, a propriedade é o valor real da propriedade, e o valor é o estilo que se aplica a essa prorpiedade. Cada seletor pode ter propriedades múltiplas, e cada propriedade dentro desse seletor pode ter valores independentes. A propriedade e o valor são separados por dois pontos e ficam contidos dentro de 2 colchetes. As propriedades múltiplas são separadas por ponto e vírgula. Os valores múltiplos dentro de uma propriedade são separados por vírgula, e se um valor individual contiver mais de uma palavra, você deve colocá-lo dentro de uma citação. Abaixo você pode ver um exemplo:

body {
     background:#cccccc;
     font-family:"Trebuchet MS", Verdana, Arial, serif;
}

Como podem ver acima, eu separei o valor da propriedade font-family por vírgula, e coloquei a fonte Trebuchet MS dentro de uma citação. O resultado no navegador seria que o corpo da página teria a cor cinza e as fontes seriam as que eu defini alí, pelo menos as que a grande maioria dos usuários tem instaladas no computador.

Herança

Quando você aninha um elemento dentro de outro, o elemento aninhado herdará as propriedades atribuídas ao elemento container. A menos que você modifique os valores dos elementos internos independentemente. Por exemplo, a fonte declarada no body, será herdada por todos os elementos de nosso documento, ao menos que você declare um outro valor para qualquer outro seletor.

body { font-family:Arial, Verdana, serif; }

Como podem ver acima, todos o texto de nosso documento terá a fonte Arial, ao menos, que por exemplo, você queira alterar a fonte do título da página:

h1 { font-family:Georgia, sans-serif; }

A partir de agora, todo <h1> de nossa página terá a fonte Georgia. Mas há casos onde os elementos aninhados não herdam as propriedades dos outros elementos, por exemplo, se ajustar-mos a margem do nosso body a 10px, os elementos contidos dentro do mesmo não herdarão essa propriedade por defeito:

body { margin:10px; }

Combinando Seletores

Você pode combinar elementos dentro de um seletor na seguinte forma:

h1, h2, h3, h4, h5, h6 {
     color:#CCCCCC;
     font-family:Georgia, sans-serif;
}

Como vcês podem ver no código acima, eu agrupei todos os seletores de título, e os separei por vírgula, o resultado é que todos os títulos terão a cor cinza e a fonte será Georgia, caso o usuário não tenha a fonte instalada no micro, ela passa a ser sans-serif.

Comentários

Os comentários são muito úteis para lhe ajudar a entender por que você usou determinada propriedade, ou até mesmo para relembrar quem é quem no seu código. Também é muito útil para aquelas pessoas que querem estudar o seu código. Abaixo você pode ver um exemplo de comentário em CSS:

/* Isso aqui é um comentário */

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding

As CSS (folhas de estilo em cascata), permitem que você separe toda a formatação do seu site do código (x)HTML. Enquanto você trabalha encima do HTML, o CSS fica por conta da formatação das fontes, cores, background, bordas, efeitos em links, etc., tudo isso concentrado em um arquivo. Existem várias maneiras de se usar o CSS, seja ela internamente ou externamente.

Utilizando estilos internamente

Quando estamos usando estilos internos, nós simplesmente colocamos o nosso CSS dentro das tags <head></head> do nosso código (x)HTML. Você pode ver um exemplo logo abaixo:

<html>
<head>
<title></title>
<style type="text/css">
Aqui você coloca o código CSS
</style>
</head>
<body>
</body>
</html>

Nesse método toda cada página (x)HTML terá seu respectivo código CSS para a formatação da página. Esse método é ideal para aqueles sites de uma página ou para quem está iniciando no assunto.

Utilizando estilos externamente

Utilizar CSS externamente é tão fácil quanto internamente, o que muda aqui é que você ira criar um arquivo com a extensão .css e colocar em seu (x)HTML uma chamada para esse arquivo. Assim ficaria da seguinte forma:

<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />

Ou também utilizando o método @import:

<style type="text/css">@import url(nome_do_arquivo.css)</style>

O nosso código (x)HTML ficaria da seguinte forma:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />
</head>
<body>
</body>
</html>

Agora com @import:

<html>
<head>
<title></title>
<style type="text/css">@import url(nome_do_arquivo.css)</style>
</head>
<body>
</body>
</html>

A vantagem de se usar CSS externamente é que quando você precisar fazer algumas mudanças em seu site, basta fazer as alterações no arquivo CSS que é ocorrida uma alteração global em todo o su site. Por exemplo, se você tem 1000 páginas com um título <h2> em vermelho, caso queira alterar a cor para preto, é só alterar uma linha em seu arquivo CSS que todas as 1000 páginas terão os títulos alterados.

Estilos Inline

Os estilos inline são definidos ao longo do elemento (x)HTML que você denominou:

<p style="color: #ff0000;">Esse parágrafo terá a cor vermelho</p>

As desvantagens de se usar estilos inline é que você só irá poder fazer alterações nos elementos em que você formatou. Com tudo isso que foi mostrado chegamos a seguinte conclusão:

• A estilização de suas páginas se torna flexível
• O tamanho de seus arquivos fica reduzido
• Facilidade na manutenção

Tradução do artigo original de: CSS Basics.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Guia CSS – 12ª parte: A propriedade background
• Guia CSS – 11ª parte: Links e pseudo classes
• Guia CSS – 10ª parte: Propriedade font em CSS
• Guia CSS – 9ª parte: Propriedade texto em CSS
• Guia CSS – 8ª parte: Padding