O que é CSS e como funciona

CSS é a sigla de Cascading Style Sheets, ou Folha de Estilos em Cascata. É a especificação que separa num arquivo as regras de estilização do conteúdo da página web, com fins de organização e manutenção.
2
1040

Talvez você não entenda bem só com esse conceito básico, é normal. Como muitos visitantes têm seus próprios blogs e sites, mas nem sempre tiveram tempo ou paciência para estudar design web, vamos deixar uma breve, mas didática explicação sobre o que é o CSS, como surgiu e sua utilidade.

Maquiagem digital para a web?

Algo assim, mas não tão simplista. Uma página de internet, ignoradas as formas como chegaram à sua tela, no fim das contas sempre se resumem a um monte de texto com formatação através de HTML, uma linguagem de marcação. Desde o começo da internet comercial, nos anos 90, até 1996, toda a formatação era feita dentro do HTML, com atributos aninhados.

Por exemplo, para inserir uma cor e imagem de fundo no corpo da página, o comum era algo como:

<body bgcolor="#000000" background="img/img.gif">

Funciona. Mas com o tempo, páginas foram ficando mais e mais enfeitadas, e a marcação estufada de enfeite. Veja a página oficial da Warner para o filme Space Jam, publicada em 1996: um bom retrato de como funcionava.

Mas logo alguém se deu conta de que aquilo era bagunçado demais. Melhor seria separar a marcação do conteúdo. É onde entra o CSS, derivado de formatos similares que já existiam, mas não eram padronizados.

Num arquivo separado do conteúdo (com a extensão .css), ficam regras que definem cores, posição de elementos e outros ajustes visuais. O conteúdo, à parte, tem só formatação básica como cabeçalhos e parágrafos.

  • Folha, pois é um documento, uma página com diversas regras, que o navegador (Chrome, Internet Explorer, Firefox, etc) lerá e entenderá as "ordens" a aplicar no HTML.
  • Estilos, pois cada regra do arquivo CSS "ordena" ao navegador aplicar um estilo a algum elemento da página.
  • E em Cascata, pois uma definição de estilo afeta vários elementos da página em sequência e com prioridades.

Organização

Com o CSS, a página fica separada da formatação. Assim, quando for preciso modificar um estilo, não será um por um como antigamente: altera-se a regra no arquivo .css para afetar todos os elementos que o utilizam.

Por exemplo: um atributo color, repetido em vários elementos font dentro de parágrafos do site:

<p><font color="#ffcc00">Este texto é amarelo no HTML</font></p>

Para mudar a cor, seria preciso alterar o valor em todos os elementos que o usassem.

Já com CSS, cada parágrafo teria uma classe:

<p class="amarelo">Este texto é amarelo no HTML</p>

E a classe no CSS:

.amarelo { color:#ffcc00 } // #ffcc00 é o hexadecimal da cor Tangerine Yellow

Basta uma alteração na folha de estilos para mudar todos que usam a classe:

.amarelo { color:#cc0000 } // hexadecimal da cor Boston University RED

Além de estilizar arquivos em HTML (PHP, ASP e outras linguagens dinâmicas resultam, depois de manipuladas e entregues pelo servidor, em páginas no formato HTML), o CSS também pode estilizar conteúdo de arquivos .XML e .XHTML.

Onde fica o CSS no WordPress

Tomando como exemplo o template padrão do WordPress até 2010, o Twentyten, encontramos seu arquivo de estilos no caminho pasta-raíz-do-blog/wp-content/themes/twentyten/style.css

O arquivo style.css é a folha de estilos padrão, portanto, quase sempre fazemos alteração no estilo do nosso blog editando este arquivo. Ocasionalmente, dependendo das características do template, ele poderá ter outras folhas de estilo para seções específicas, como rodapé, cabeçalho, etc, ou uma folha de estilos em outra pasta.

Estilos internos, externos e aninhados (inline)

As regras de estilização podem ser:

Externas: colocadas num arquivo no formato .CSS, e este chamado ao documento através de um meta link, geralmente na seção head da página, com uma chamada como:

<?php bloginfo('stylesheet_url');>

A parte do <?php bloginfo('stylesheet_url'); ?> é uma função em PHP do WordPress que indica o caminho para a folha de estilos. Esse trecho de código "chama" o arquivo da folha de estilos para ser carregada com a página do conteúdo, estilizando os elementos.

Internas: em vez de colocadas no arquivo .CSS, as regras vão dentro da seção head da página, seguindo o mesmo padrão do .CSS, entre tags style. Normalmente usadas para estilos que afetam uma única página, e portanto não precisam ser carregados em todas.

Mas note que é considerada uma prática ruim de design web. O ideal é sempre manter toda a estilização separada do conteúdo.

Exemplo:

<head>
<style>
p { font-size: 14px }
</style>
<!-- mais conteúdo da seção head -->
</head>

Inline: as regras são colocadas dentro do elemento que vai afetar. Por exemplo, se a regra só vai ser usada por um único parágrafo de uma página, a declaração seria algo como:

<p style="regra CSS aqui">

Isto afetaria apenas o conteúdo daquele parágrafo. Também deve ser evitado sempre que possível.

Formato de uma regra CSS

De forma simplificada, uma regra CSS é composta por:

Seletor

Indica qual elemento (um elemento padrão do HTML, como body, p, div, entre outros) ou classe / identificador será visado pela regra.

Exemplo: para atribuir uma classe a um parágrafo, poderia usar...

<p class="classe">

...e depois apontá-la no CSS pela regra .classe (ou se o elemento aparecer apenas uma vez na página, usar um id, apontado pelo seletor #).

.classe { font-size: 12pt }

Isso afetaria apenas aquele parágrafo e outras tags com a mesma classe, mas não todos os parágrafos.

Já para apontar uma regra a todos os parágrafos, não precisa do seletor de classe ou id, só o elemento p basta:

p { font-size: 12pt}

Propriedade

Atributo dentre os inúmeros existentes que vai determinar qual estilo será aplicado ao seletor alvo. Nos exemplos acima, usamos a propriedade font-size, que ajusta o tamanho da fonte.

Valor

Vai determinar como será a estilização feita pelo atributo escolhido. Nos exemplos anteriores, setamos o font-size primeiro em pixels (12px), depois em pontos (12pt).

Outro exemplo: na regra abaixo, usamos o seletor p, indicando que todas as tags p (parágrafo) da página serão afetadas, com o atributo font-weight (que determina o "peso" da fonte, entre vários valores), e o valor bold, que determina que a fonte ser áem negrito.

p {
    font-weight: bold;
}

O objetivo das explicações não é encerrar todas as questões sobre CSS (longe disso, por sinal), mas dar uma pequena prévia aos que não conhecem nada do assunto. Conforme a prática, você vai se familiarizar gradualmente com seletores, classes...

Um exemplo básico

Para facilitar, mais um exemplo rudimentar mas óbvio do funcionamento do CSS.

Vamos alterar a cor de fundo de uma página através de CSS. Supondo que uma página tenha fundo branco (padrão), acrescente ao seu arquivo style.css uma regra para a tag body —body é a tag, ou rótulo, HTML que aponta para todo o conteúdo da página. Qualquer estilo aplicado a essa tag afeta todo o "corpo" da página.

Com o seletor escolhido, começaria assim:

body {

A chave abre as declarações de estilo. Como o exemplo pretende apenas alterar a cor da página, vamos usar o atributo background-color.

Fica:

body {
    background-color:

Os dois pontos indicam que começa o valor. Vamos colocar nossa página com fundo preto. Podemos usar a declaração da cor pelo termo black, ou o valor hexadecimal do preto, que é #000000.

body {
    background-color:#000000
}

Feche a chave. Está fechada aquela regra relativa à tag body. Se houver mais de uma regra, elas devem ser separadas por ponto-e-vírgula.

Exemplo:

body {
    background-color:#000000;
    font-weight: bold;
}

Inserida outra regra, determinando que todas as fontes (texto) na página devem ter negrito. Note que a organização da regra não influi no funcionamento; por exemplo, assim funcionaria da mesma forma:

body { background-color:#000000; font-weight: bold }

Recomenda-se manter um padrão, senão, caso precise vasculhar um arquivo com centenas de regras, você fica perdido.

Se quiser mais exemplos, abra o style.css do seu blog e examine as regras. Elas parecerão complicadas, pois podem haver diversas agrupadas ou sem organização, mas conforme for aprendendo, você verá que não é tão chinês ou grego!

Logo falaremos mais sobre CSS. Até!

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

2 COMENTÁRIOS

    • Use:

      background-image:url(aqui-o-url-da-imagem.jpg);
      

      Pode ainda acrescentar valores como "no-repeat" (se quiser que a imagem apareça só uma vez e não se repita em efeito de ladrilho; "repeat-x" para repeti-la horizontalmente ou "repeat-y" para repetir na vertical. Pode também ajustar o alinhamento da imagem na página com "center", "left" ou "right".

      Exemplo: inserir uma imagem de fundo, que não se repita em ladrilho, fique no centro da página e no topo:

      background-image:url(imagem.jpg) no-repeat top center;
      

      É isso.

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui