CSS

Tradução em progresso.

Cascading Stylesheets — ou CSS — é a segunda tecnologia que você deve aprender após HTML. Onde HTML é usado para definir a estrutura e a semântica do seu conteúdo, CSS é usado para estilizá-lo and lay it out. Por exemplo, você pode usar o CSS para alterar a fonte, cor, tamanho e espaçamento do seu conteúdo, dividí-lo em multiplas colunas, ou adicionar animações e outros recursos de decoração.

Percurso de aprendizagem

Você realmente deve aprender o básico de HTML antes de tentar algo com CSS. Nós recomendamos que você comece através da nossa Introdução ao HTML e no primeiro módulo você vai aprender sobre:

  • CSS, começando com a introdução ao módulo CSS
  • Módulos HTML mais avançados
  • JavaScript, e como utiliza-lo para adicionar funcionalidade dinâmica as páginas da web

Nós recomendamos que você aprenda HTML e CSS ao mesmo tempo, movendo-se para trás e para frente entre os dois temas. Isso por que HTML é muito mais interessante com CSS e você não pode aprender realmente CSS sem conhecer HTML.

Antes de iniciar este tópico, você também deve ter pelo menos familiaridade básica com o uso de computadores, e utilizar a Web passivamente (isto é, apenas navegando e consumindo conteúdo.) Você deve ter uma configuração básica de ambiente de trabalho, conforme detalhado no Instalando o software básico, e entender como criar e gerenciar arquivos, conforme detalhado em Lidando com arquivos — ambos são partes do nosso Como começar com a web módulo completo de iniciante.

É recomendável que você trabalhe através do Como começar com a web antes de começar este tema, não é absolutamente necessário; muito do que é abordado no artigo básico de CSS também é coberto em nossa introdução ao módulo CSS, embora com muito mais detalhes.

Módulos

Este tópico contém os seguintes módulos em uma ordem sugerida para trabalhar através deles. Você deve definitivamente começar com o primeiro.

Introdução ao CSS
Este módulo é uma introdução com as noções básicas de como CSS funciona, incluindo seletores e propriedades, escrever regras CSS, aplicando CSS para HTML, como especificar comprimento, cor e outras unidades em CSS, cascata e herança, noções básicas de box model e depuração CSS.
Estilo de texto
Aqui nós olhamos os estilos de texto, incluindo a configuração da fonte, negrito, itálico, 
linha e espaçamento das letras, além de sombras e outros componentes de texto. Nós usamos este módulo para personalizar fontes para sua página, e estilizar listas e links.
Caixas de estilo
Próxima, procuramos as caixas de estilo, um dos passos fundamentais para elaborar uma página web. Neste módulo nós recapitulamos a caixa modelo para então controlarmos o layout da caixa modelo por configuração do padding, borders e margens, configurando background colors personalizadas, imagens e outros componentes, componentes elegantes tais como sombras e filtros nas caixas.
CSS layout
Neste ponto, nós olharemos os fundamentos CSS, como estilizar o texto, e como estilizar e manipular as caixas que estão alocadas. Agora é hora de olhar como pôr suas caixas no lugar certo em relação ao viewport,  e outros. Nós temos cobertos os pré-requisitos necessários para então poder agora aprofundar no layout CSS, olhar em diferentes configurações de telas, tradicionais métodosenvolvendo float e posicionamento, além de novos ferramentas de flanged layouts como flexbox.
Design Responsivo (TBD)
Com tantos tipos diferentes de sispositivos capazes de navegar pela internet nos dias de hoje, design web responsivo (RWD) se tornou uma habilidade primordial para o desenvolvimento web. Esse módulo irá cobrir os principios básicos e ferramentas do RWD, explicar como aplicar diferentes arquivos CSS à um documento a depender de dos recursos do dispositivo como largura de tela, orientação, e resolução, e explorar tecnologias disponíveis para servir diferentes vídeos e imagens dependendo de tais recursos.
Animações e transformações (TBD)
Duas das áreas mais interessantes do CSS são a habilidade de manipular elementos (ex. mover, rotacionar e inclinação), e animar elementos suavemente (ex. de uma cor ou posição para outra). Esse módulo explora como implementar as transformações e animações.

Resolvendo problemas de CSS comuns

Use CSS para resolver problemas comuns proporcione links para seções de conteúdo explicando como usar CSS para resolver problemas muito comuns na criação de páginas web: Estilizando boxes.

Veja também

CSS no MDN
O principal ponto de entrada para documentação CSS no MDN, desde referências detalhadas a tutoriais avançados.
Referência CSS
Um guia de referência abrangente para todos os muitos recursos da linguagem CSS - se você quiser saber quais valores uma propriedade pode tomar, por exemplo, este é um ótimo lugar para começar.

Etiquetas do documento e colaboradores

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