Princípios Básicos do CSS (Parte 1)

Twitter

BlogBlogs

Digg

Delicious

Rec6

Galera, resolvi dar uma parada com o especial Código Blogger, para podermos passar alguns fundamentos em CSS antes de continuarmos.

Se você não faz a mínima idéia do que é CSS, veja nossa outra postagem Para que serve o CSS.

Bom.. CSS é coisa simples. Vamos começar com a declaração específica desta linguagem:

seletor { propriedade: valor }

Seletor é o elemento ao qual você pretende atribuir determinado estilo. Pode ser uma TAG HTML (p, div, table, h1, img etc..)

uma classe (.sidebar, .cabeçalho1, .cabeçalho2 etc..)

um ID (#Feed1, #LinkList1, #HTML1 etc..)

ou uma junção desses três.

Propriedade é o que você pretende mudar ou criar. É a propriedade que será modificada ou criada dentro do elemento que você escolheu.

Exemplos: color, font-size, background-color, height, width, margin etc..

Valor é a qualificação ou quantificação que você atribui à propriedade escolhida.

Exemplos: blue, 11px, green, 100%, 975px, 1.5em etc..

Um exemplo disso tudo você tem abaixo:

div {
color: rgb(0, 172, 255);
background: url('figura_de_fundo.png');
margin: 5px;
margin-right: 7px;
font-size: 13px;
}

O div é o seletor, ou seja, o elemento HTML ao qual as características serão atribuídas.

As propriedades são: color, background, margin, margin-right e font-size.

E os valores, é claro, são: rgb(0, 172, 255), url('figura_de_fundo.png'), 5px, 7px e 13px.

Note que depois de cada declaração nós utilizamos o ponto-e-vírgula ; Essa declaração é obrigatória, portanto, não se esqueça.

Obs.: Ela é facultativa no último elemento, mas é recomendado colocar mesmo assim, para não causar problema depois.

E não se preocupe que nós ainda faremos uma lista com as principais propriedades para você saber o que pode e não pode fazer com seus seletores.

Tudo certo, minha gente? Lembrem-se que qualquer problema é só comentar, ok? Ficarei muito feliz em responder às perguntas.

Então, entendido isso, vamos aprender como utilizar melhor os seletores.