Skip to content

gustavodepaula-daw/E02-CSS

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OBS: É importante que você gere um commit para cada parte da atividade que você concluir.

Notícia do dia: CSS

É hora de dar uma estilizada na página de notícia do dia, criada anteriormente no exercício de HTML.

Aparência Geral

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:

  1. Fonte geral da página não serifada
  2. Paleta de cores básica (cor de fundo e cor da fonte).
  3. Espaçamento da largura da página (entre 10% e 20%)

Estilo do título

É hora de customizar o título principal da página. O título deve chamar atenção mas não ser agressivo aos olhos do leitor.

  1. Aumente o tamanho da fonte para um tamanho que você considere agradável
  2. Centralize o texto
  3. Adicione um margin para prover um espaçamento pequeno entre o título e corpo da notícia
  4. Altere a cor de fundo para dar contraste com restante da página
    • É possível que seja necessário alterar a cor da fonte do título. Novamente, use o Adobe Kuler.
  5. Altere o padding do título para para aumentar o preenchimento do título.

Customizando subtítulo

O subtítulo deve possuir um estilo diferente do texto convencional, porém diferente do título principal.

  1. Alinhe subtítulo a direita
  2. Adicione um efeito na fonte, como itálico ou negrito

Parágrafos

Se você fez a parte 01 de forma correta, a fonte dos parágrafos já estão com a fonte devidamente estilizada. É necessário fazer alguns outros ajustes.

  1. Torne o texto justificado
  2. Aumente o espaçamento entre as linhas para um valor maior que o padrão.

Links

O estilo padrão dos links é simplesmente horrível!! Você pode dar um up alterando as seguintes propriedades:

  1. Adicione um efeito de negrito na fonte
  2. Altere as cores do link (padrão, hover, clicked, ativo, etc.). Novamente, utilize o Adobe Kuler para tal

About

Exercícios referentes a prática de CSS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 98.2%
  • HTML 1.8%