CSS: Folhas de Estilo em Cascata

A nossa Área de Aprendizagem de CSS apresenta múltiplos módulos que ensinam CSS desde o início  — não é necessário conhecimento prévio.

Introdução ao CSS

Este módulo permite-lhe começar com os básicos de como o CSS funciona, incluindo selectores e propriedades, escrever regras CSS, aplicar CSS a HTML, como especificar comprimento, cor e outras unidades em CSS, cascata e herança, modelos básicos de caixa e depuração de CSS.

Estilizar texto

Aqui aprendemos os fundamentos do estilo do texto, incluindo a definição da fonte, negrito e itálico, espaçamento entre linhas e letras, e sombras e outras características do texto. Nós terminamos o módulo, aplicando fontes personalizadas à sua página, e estilizando listas e links.

Estilizar caixas

A seguir, focamos em estilizar caixas, um dos passos fundamentais para a criação de uma página web. Neste módulo, recapitulamos o modelo da caixa e depois aprendemos a controlar a disposição das caixas, definindo preenchimentos, bordas e margens, cores de fundo personalizadas, imagens e outras características, bem como características mais avancadas como sombras e filtros nas caixas.

Disposição de CSS (layout)

Até agora, já analisámos os fundamentos do CSS, como estilizar os textos, e como estilizar e manipular as caixas que o seu conteúdo contém. Agora é altura de ver como colocar as suas caixas no lugar certo em relação ao viewport, e umas às outras. Cobrimos os pré-requisitos necessários para que possa agora mergulhar profundamente no layout do CSS, observando diferentes configurações de visualização, métodos tradicionais de layout envolvendo float e posicionamento, e novas ferramentas de posicionamento como o flexbox.

Referência

• CSS - Referência: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.
• CSS key concepts:
  • The syntax and forms of the language
  • Specificity, inheritance and the Cascade
  • Box model and margin collapse
  • The containing block
  • Stacking and block-formatting contexts
  • Initial, computed, used, and actual values
  • CSS shorthand properties
  • CSS Flexible Box Layout
  • CSS Grid Layout
  • Media queries

Cookbook

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

Ferramentas para o desenvolvimento de CSS

• You can use the W3C CSS Validation Service to check if your CSS is valid. This is an invaluable debugging tool.
• Firefox Developer Tools lets you view and edit a page's live CSS via the Inspector and Style Editor tools.
• The Web Developer extension for Firefox lets you track and edit live CSS on watched sites.
• The Web community has created various other miscellaneous CSS tools for you to use.

Erros de metadados

• Firefox: bug 1323667