MyLeoNes™

Estilos com CSS — Informática, 11–13

O CSS controla o aspeto de uma página web sem mudar o seu conteúdo principal. Aprendes a separar o significado da aparência e depois defines cores, espaços, tamanhos e disposição com regras.

Conteúdo e aparência

Uma página web tem conteúdo, como um título ou um parágrafo, e também pode ter um estilo visual. O CSS contém instruções que dizem como devem parecer certos elementos: texto azul, margem larga ou duas colunas. A página pode manter a mesma mensagem enquanto o estilo muda.

Porque separar o estilo?

Se cada página misturasse as palavras com todas as instruções visuais, mudar uma cor ou corrigir a disposição obrigaria a editar muitos lugares. O CSS surgiu da necessidade de dar um estilo consistente a várias páginas e atualizá-las mais facilmente. Também permite adaptar o mesmo conteúdo a um telemóvel, a um ecrã grande ou a uma impressora.

Tornar um título azul

Imagina que uma página tem um título marcado como título. Primeiro, escolhes esse tipo de elemento como alvo. Depois, defines a cor do texto como azul e o tamanho como 24 píxeis. Quando o navegador carrega a página, todos os títulos correspondentes recebem essas definições. Alteras a regra uma vez e todos mudam em conjunto.

A armadilha de confundir estilo e conteúdo

É tentador usar o tamanho ou a cor para decidir o que algo significa, porque reparamos primeiro na aparência. Isso pode fazer uma página parecer certa, mas deixar a sua estrutura pouco clara para navegadores e tecnologias de apoio. Marca cada elemento pelo que é e usa CSS para decidir como deve parecer.

CSS em sites reais

Os sites do dia a dia usam CSS para texto legível, menus, cartões, espaços e disposições que cabem em ecrãs diferentes. Uma loja online pode manter a mesma informação do produto e mudar a aparência para um telemóvel ou computador. O CSS não cria factos nem dá sentido a uma imagem fraca; organiza a apresentação.

Continua a explorar

Outras línguas

A carregar o MyLeoNes™…