CSS pela W3schools (Parte 1) - Uma introdução
Estive na w3schools vendo algumas especificações, a forma correta de fazer as coisas e lendo tudo de novo como quem não soubesse nada. Por isso surgiu a idéia de escrever, traduzir em forma de resumo, o que a w3schools ensina em termos CSS básico.
Parte 2: Sintaxe CSS
Vamos ver aqui a sintaxe básica de CSS. Outros exemplos mais avançados farão parte de um outro artigo, convém aprender o simples, principalmente tratando de CSS.
A sintaxe padrão é composta por um "selector" que normalmente está associado a um elemento ou tag Html. Exemplo: p, body, a, font, table. E através deste podemos definir para toda a página como é que estes elementos devem ficar.
A outra parte é composta pela propriedade que queremos manipular sobre o "selector" e, naturalmente, o valor associado que vai fazer variar as formatações. Deste modo, para definir um estilo para um link, teríamos:
Neste caso, temos apenas uma propriedade, caso tenhamos mais propriedades estes deverão ser separados por ";", por exemplo:
Outras características/sintaxe vamos ver nos próximos tópicos, incluindo um caso prático de formatação utilizando folhas de estilos.
A sintaxe padrão é composta por um "selector" que normalmente está associado a um elemento ou tag Html. Exemplo: p, body, a, font, table. E através deste podemos definir para toda a página como é que estes elementos devem ficar.
A outra parte é composta pela propriedade que queremos manipular sobre o "selector" e, naturalmente, o valor associado que vai fazer variar as formatações. Deste modo, para definir um estilo para um link, teríamos:
a{color:#cccccc} ou seja selector{propriedade:valor}.
Neste caso, temos apenas uma propriedade, caso tenhamos mais propriedades estes deverão ser separados por ";", por exemplo:
a{color:#cccccc;font-size:15pt;text-decoration:none;}
Agrupando vários elementos
Podemos ainda dizer que todos os "Headers", H1,H2,H3,H4 são iguais, isto é, tem o mesmo estilo. Como?
h1,h2,h3,h4,h5,h6
{
color: green
}
{
color: green
}
Outras características/sintaxe vamos ver nos próximos tópicos, incluindo um caso prático de formatação utilizando folhas de estilos.