A sintaxe do CSS

Ultimamente tenho estado mais presente no fórum de Web Standards do iEvolution e tenho percebido que muita gente tem confundido, ou não compreendido direito as CSS. Frases do tipo Estou fazendo uns scripts CSS pro meu site e…, ou ainda que parâmetros CSS usar nesse caso?, e também: <script type="text/javascript" src="estilos.css"></script> têm aparecido com frequência lá no fórum.

E eu, como disseminador dos web standards, obviamente, não podia ficar parado diante de uma situação dessa. E é por isso que decidi escrever um pouco sobre a sintaxe do CSS. Bom, então vamos lá.

O básico do básico

Primeiramente, é preciso deixar bem claro o que CSS não é. CSS não é uma linguagem de programação, como Javascript, ASP, PHP, etc. Portanto, não existem scripts CSS ou parâmetros CSS.
CSS também não é uma linguagem de marcação, como o HTML ou XHTML e, por isso, não existem tags CSS.

O básico

Depois de ver o que CSS não é, vejamos o que ele é e qual sua sintaxe correta.
CSS é uma linguagem de formatação, ou seja, é a linguagem usada para dar forma ao seu código de marcação, seja ele HTML ou XHTML. Simples, não? Sua sintaxe é mais simples ainda. Observe:


seletor { propriedade: valor; }

Ou, pra citar um exemplo mais prático:


body { background-color: black; }

O que você vê acima é uma regra CSS, vamos quebrá-la em pedaços pra ficar mais fácil a compreensão.

  1. O seletor


    body

    O seletor é basicamente a tag (ou tags) que você quer estilizar. Para uma explicação mais detalhada sobre seletores, leia este excelente texto do Maujor.

  2. A declaração


    background-color: black;

    Isto é uma declaração CSS. Uma declaração CSS é composta por uma propriedade, seguida de dois-pontos, e um valor; declarações CSS devem vir seguidas de um ponto-e-vírgula, para indicar um “fim de comando”, caso contrário sua declaração pode não ser interpretada corretamente, assim como a declaração que a seguir. No caso de uma regra com uma única declaração ou da última declaração de uma regra, o ponto-e-vírgula é opcional, mas é de boa prática usá-lo assim mesmo.

Além disso, todo o conjunto de declarações deve estar entre chaves { }, para que os browsers consigam fazer distinção entre seletores, declarações e para que possa entender onde começa e termina cada regra.

Bom, pessoal, é isso. Espero ter conseguido ajudar àqueles que têm (ou melhor, tinham. hehe) dificuldades em relação à sintaxe do CSS. Quanto aos meus leitores mais experientes no assunto, peço desculpas pelo conteúdo de nível básico (que não é o foco do meu blog), mas senti muito a necessidade de falar algo sobre isso aqui. E, já que você chegou até aqui, que tal acrescentar algo? Não sei porquê, mas sempre fico com a impressão de que faltou algo a ser falado…

PS.: Preciso sair desse WordPress urgente! Não aguento mais esses templates! rsrs

5 Comentários

Arquivado em Artigos, CSS, Web Standards

5 Respostas para “A sintaxe do CSS

  1. Muito bom o artigo Jader, show de bola…
    O pessoal tem confundido muito mesmo as coisas e mesmo a gente falando, explicando, alguns insistem no erro.
    Parabens!
    Abraço

  2. Fleury

    Parabéns pela iniciativa Jader, ótimo artigo!

    Abraços.

  3. Muito bem! Muita gente ainda fica reclamando de bugs de navegador enquanto não sabe nem escrever CSS corretamente.

    Parabéns!

  4. Excelente artigo Jader.
    Antes de aprender CSS é necessário este básico básico.
    Abraços.

  5. Laís

    Ei valeu vc vai me ajudar com um trabalho Escolar(preciso tirar nota 10,0, para ficar de recuperação hahaha…., meu professor me odeia), mas mesmo assim sou feliz
    bom só falta saber o que é XML, HTML, XHTML.1
    Até um dia…………….Abraços de todos de meu grupo