Exercícios: CSS

• Desenvolvimento de Aplicações Web
• COLTEC/UFMG
• Professor: João Eduardo Montandon

CSS Zen Garden

O projeto CSS Zen Garden é um site criado por Dave Shea que tem como objetivo demonstrar o poder do CSS no design web. O conceito é simples: fornecer um único arquivo HTML básico e uma variedade de arquivos CSS diferentes que mudam a aparência do site sem modificar a estrutura HTML. O projeto se tornou uma vitrine para designers e desenvolvedores demonstrarem suas habilidades em design usando apenas CSS.

Os participantes são incentivados a criar designs inovadores, criativos e impressionantes, mostrando o que pode ser alcançado usando CSS. Os designers podem baixar o HTML fornecido e criar uma folha de estilo personalizada para transformar o site em sua própria obra de arte. O site é atualizado regularmente com novos designs apresentados pelos participantes e continua sendo uma plataforma popular para testar as habilidades de design e programação.

O objetivo desta atividade é criar seu próprio layout CSS!

Instruções

Você deverá entregar a atividade por meio dos arquivos index.html e style.css.

Para realização e entrega dos exercícios, siga as instruções disponíveis na página da disciplina. Para cada questão, gere um commit específico!!

Parte I: Introdução

Aparência geral da página

A primeira etapa a se fazer ao estilizar uma página é definir uma aparência geral. Mais especificamente, você deverá customizar as seguintes características da página:

• Fonte geral da página não serifada
  • Escolha dentre uma das opções presentes aqui.
• Paleta de cores básica (cor de fundo e cor da fonte), onde a cor de fundo deverá ser escura, e a cor da fonte deverá ser clara.
  • Recomendo o uso da ferramenta Adobe Kuler.

Para isso, você deverá:

1. Defina um tamanho fixo de fonte geral pra página inteira (html).
2. Adicionar ao body da página o estilo de fonte, uma cor de fundo, e cor para fonte
3. Identar os parágrafos em pelo menos 1rem

Títulos

1. Alinhe todos os títulos da página para centro ou a direita
2. Defina o tamanho dos títulos h1 em 1.8rem
3. Defina o tamanho dos títulos h2 em 1.4rem
4. Defina o tamanho dos títulos h3 em 1.2rem

Seções de resumo e principal

Localize os elementos que representam a seção de resumo e principal da página, e aplique a elas:

1. Alinhamento a direita ou centralizado para a seção de resumo
2. Espaçamento entre as linhas de 1.5 para os parágrafos da seção principal

Links e abreviaturas

Customize todos os links e abreviaturas (<abbr>) da página da seguinte forma:

1. A fonte em negrito (700) para os links, e uma cor diferente da padrão
2. A mesma cor aplicada no link deverá ser aplicada para as abreviaturas

Parte II: Box model

Parte III: Page Layout

Parte IV: Estilos Avançados