MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

CSS (Cascading Style Sheet - Folha de Estilo em Cascata) é usado para estilizar e criar layout web - Por exemplo para alterar fonte, cor, tamanho e espaçamento do conteúdo, dividir o conteudo em múltiplas colunas, ou adicionar animações e outros componentes decorativos. Este módulo te coloca no caminho da maestrias em CSS com o basico de como ele funciona, incluindo seletores, propriedades, escrita dentro dos padrões CSS, aplicação de CSS para HTML, como especificar tamanho, cor, e outras propriedades CSS, cascata e herança, e  debugar CSS.

Pré-requisitos

Antes de iniciar este módulo, você deve ter:

  1. Familiaridade com o uso de computadores, e usar a web passivamente (i.e. somente repare nisto, consumindo o conteúdo).
  2. Um ambiente de trabalho básico configurado como detalhado em instalação do software básico, e um entendimento de como criar e gerenciar arquivos, tais como podemos ver em Lidando com arquivos.
  3. Familiaridade básica com HTML, tais como discutido em Introdução ao HTML.

Nota: Se você está trabalhando num computador/tablet ou em outros dispositivos onde você não tem a habilidade para criar arquivos ou não pode, você pode tentar exibir (na maior parte dos casos) o código exemplo em um site de codificação online como JSBin ou Thimble.

Guias


Este módulo contém os seguintes artigos, ao qual levará você através de toda a base teórica de CSS, e providenciará ampla oportunidade para você testar algumas habilidades.

Como CSS funciona
Neste módulo nós iniciamos no campo teórico, entenda o que esta classe é, como o navegador torna dentro do HTML para um DOM, como CSS é aplicado em elementos do DOM, alguns exemplos básicos de sintáxe, e qual código é usado para atualizar a inclusão do nosso CSS em nossa página.

Sintaxe CSS
Próximo módulo nós mergulhamos dentro da sintáxe com muito mais detalhes, olhando como propriedades e valores são declarados, múltiplas declarações dentro de blocos de declaração, e blocos de declarações e seletores dentro das normas CSS. Nós terminamos o artigo olhando na sintáxe CSS  do componentes tais como comentários e espaços em branco.
Seletores
Seletore são mencionados no artigo seguinte, mas neste guia, nós vamos dentro de um monte  de detalhes, mostrar o que os seletores são e que eles fazem.
CSS valores e unidades
Há muitos tipos de propriedade CSS para conciderar, de numerosos valores para colorir funções que realizam uma certa ação (como embutir uma imagem de fundo, ou rodando um elemento.) Alguns destes precisam em unidades particulares para especificar o valor exato que eles estão representando - digamos que sua caixa seja de 30 pixels, ou 30 centímetros, ou 30 ems? Nestre guia nós olharemos valores comuns como tamanho, cor e funções simples e também explorar as unidades menos comuns como graus, e até valores numéricos únicos.
Cascata e herança
CSS tem dois sistemas diferentes, mas relacionados para resolver situações em que você tem conflitos de seletor (diferentes seletores selecionam os mesmos elementos, que ganham e acabam sendo aplicados?) E elementos aninhados dentro de outros elementos (parte do estilo aplicado aos elementos pai faz Sentido a ser herdado pelos elementos filho, alguns não.) Este artigo abrange ambos os sistemas em detalhe suficiente para ser útil, mas não impressionante.
O modelo de caixa
O modelo de caixa CSS é o fundamento de layout na web - Cada elemento é representado como um retângulo, com o conteúdo da caixa, padding, borda, e margem como as camadas de uma cebola. Como Navegador renderiza uma página, isto exercita qual o estilo será aplicado no conteúdo de cada caixa, quão variada a quantidade são as camadas da "cebola", e onde as caixas ficam em relação umas as outras. Antes de entender como criar o layout , você precisa entender o modelo de caixas.
Debugar CSS
No final deste módulo nós estudaremos o básico do debugging CSS, inclusive explorando o CSS aplicado na página, e outras ferramentas que podem ajudar você à encontrar erros no seu código CSS.

Avaliação

Na seguinte avaliação testará seu entendimento do básico CSS coberto no guia acima.
Fundamentos e compreenssão do CSS.
A seguinte declaração testará seu conhecimento em CSS básico  com alguns exercícios preparados para isto.

Veja também

Literatura Intermediária web: Introdução do CSS
Um excelente curso da fundação Mozilla que explora e testa um monte de habilidades falada sobre Introdução do módulo CSS. Aprender à estilizar elementos HTML em páginas usando CSS, seletores, atributos e valores.

Etiquetas do documento e colaboradores

 Colaboradores desta página: agathasilva28, ThiagoMSArrais, mak213k
 Última atualização por: agathasilva28,