Sistemas sem Frescuras - #03 - CSS

Chegamos a terceira aula do nosso curso. Neste capítulo e no próximo vamos focar nas CSS. Quando criamos uma página web ou sistema baseado em browser (navegador) devemos separar o conteúdo da forma, ou seja: Enquanto o HTML-5 efetua a marcação do conteúdo, criando a semântica da página, o CSS se encarrega da forma como este conteúdo será apresentado ao cliente.

CSS é a sigla, em inglês, de Cascading Style Sheet que traduzido para o português significa Folha de Estilo em Cascata. Em resumo, são arquivos de texto que reúnem um conjunto de regras que atua sobre os marcadores do HTML.

Sintaxe

Como toda e qualquer linguagem, a CSS tem uma sintaxe que é baseada em: Seletor, Parâmetro e Valor, onde:

• Seletor é o marcador HTML onde se quer atuar. Ex.: <h1>, <p>, <div>;
• Parâmetro é a característica do seletor que será afetada. Ex.: cor, posição, visibilidade;
• Valor é a medida utilizada no parâmetro. Ex.: vermelho, a direita, invisível.

Estas informações são apresentadas na forma de código, conforme a ilustração a seguir:

Arquivos externos

A melhor maneira de implementar o código CSS em uma página ou grupo de páginas é  utilização de um arquivo css externo. Existem três vantagens principais nesta prática

• A marcação e a formatação ficam totalmente separadas.
• Alterações de forma em um projeto ficam mais simples.
• Podemos reutilizar estilos em outros projetos.

Conforme a figura acima, vemos que com uma única folha de estilos css podemos configurar o visual de vários arquivos html. Se desejarmos implementar uma mudança no lay-out basta trocar o arquivo css.

Espero que você goste desta aula.

Até a próxima.