1. Estrutura

19/03/2013 | |
A primeira coisa que se deve saber é o que vem a ser css. Entendendo essa parte, aquilo que você achava ser grego, vai se tornar muito mais fácil e vai ser compreendido mais facilmente a partir das próximas lições que você vê ao lado. Então, você sabe o que é css? Mesmo conhecendo, você sabe explicar a alguém?

Antes de tudo, CSS é uma sigla que significa "Cascade Style Sheets", apenas a partir daí você vai ter uma noção básica do que seja. O CSS funciona em cascata (cascade), pois a partir dos códigos que você vai colocando, o funcionamento deles vai acontecer de cima para baixo e é acumulativo. O CSS serve para dar um estilo ao HTML. Ainda não entendeu? Vou explicar de uma maneira bem simples, te dando um exemplo do nosso dia-a-dia:

Quando escrevemos no bloco de notas, temos apenas aquela fonte básica e pronto, nem sequer pula uma linha sozinho, percebem que nós somos obrigados a apertar enter? Também perceberam que ao escrever aqui no blog a linha vai se criando sozinha? As letras são personalizadas e temos todo um modelo estilizado? É o que o CSS faz. O HTML é seco, sem formatação e sem delimitações e para dar um ar elegante as coisas utilizamos o nosso querido e amado css. Agora que já entenderam, vamos aprender a estrutura básica do código de css:

Seletor {

propriedade: valor;
propriedade: valor;

}

Essa é a base, mas ao que se refere? Antes de explicar, veja esse exemplo com o seletor, a propriedade e o valor definidos. Vai ajudar bastante a compreender tudo direitinho, pois isso você vai ver ou já viu bastante:

body {

font-size: 10px;
font-color: #ffccff;


O seletor é a mãe de todos, é o que você vai personalizar. Por exemplo, se você quer personalizar o título das postagens aqui no blogger, o seletor vai ser h3.post-title {.

A propriedade é o que, desse elemento, você deseja editar. Se quisermos mudar a cor do título da postagem, colocamos font-color:.

O valor é como você deseja personalizar. Se eu quero a cor rosa, basta colocar o código hexadecimal #ff587f e a letra ficará rosa. É apenas um exemplo para que entenda a estrutura, depois você vai aprender tudo nos conformes.

O mais importante: O seletor deve ser seguido de { e assim que você terminar com as propriedades e valores, deve fechar utilizando }. Sempre! O esquecimento de um desses vai fazer tudo ficar errado.

Até a próxima lição!