Espaçamento externo
margin
Cria um espaço fora do elemento, empurrando os outros elementos para longe dele. Pode ser usado para afastar um parágrafo do outro.
margin: 4px
margin: 16px
verbete · propriedades essenciais
Guia de referência
Um catálogo com várias propriedades CSS. Explore o que cada uma faz e escolha as regras certas para completar o desafio.
Cor de fundo
background-color
Pinta a caixinha invisível que existe atrás de cada parágrafo — não a letra, mas o fundo dela. Sem o traço entre as duas palavras, o navegador não entende o comando.
background-color: gray
background-color: black
background-color: blue
Arredondamento de borda
border-radius
Deixa os cantos de um elemento arredondados. Quanto maior o valor, mais redondo fica o canto.
border-radius: 4px
border-radius: 12px
Cor da letra
color
Pinta o texto em si — as letras. O valor é o nome da cor em inglês (como red, blue, green, white, black) ou um código de cor.
color: red
color: blue
color: white
Tamanho da fonte
font-size
Define o tamanho do texto. Pode ser usado com várias unidades de medida, como px (pixels), em ou rem.
font-size: 12px
font-size: 16px
font-size: 24px
Borda
border
Adiciona uma linha ao redor do elemento. Você define a espessura, o estilo (solid, dashed, dotted) e a cor.
border: 1px solid black
border: 2px dashed red
Alinhamento do texto
text-align
Decide para onde as linhas do parágrafo se distribuem em relação à página.
left alinha à esquerda, right à direita, center centraliza, e justify estica o texto para encostar nas duas margens.
text-align: right →
text-align: center
text-align: justify. Este texto se estica para encostar nas duas bordas, esquerda e direita, ao mesmo tempo.
Espaçamento interno
padding
Cria um espaço dentro do elemento, empurrando o conteúdo para longe das bordas.
padding: 4px
padding: 16px
Peso da fonte
font-weight
Define a espessura da letra. Valores comuns são normal ou bold (negrito).
font-weight: normal
font-weight: bold
Decoração de texto
text-decoration
Adiciona linhas ao texto, como sublinhado (underline) ou tachado (line-through).
underline
line-through
Sombra
box-shadow
Adiciona uma sombra atrás do elemento. Útil para dar sensação de profundidade e destacar caixas na tela.
box-shadow
Opacidade
opacity
Controla a transparência de um elemento. Vai de 0 (invisível) até 1 (totalmente visível).
opacity: 0.4
opacity: 1
missão · o diário do programador
O Desafio
Uma página com 4 parágrafos, escrita só com as tags que vocês já viram — <html>, <head>, <body> e <p> — estilizada inteiramente pelo CSS.
- Escreva um texto de sua preferência com exatamente 4 parágrafos.
- A estrutura HTML usa só as tags já estudadas — nada de tags novas.
- Toda a aparência vem do CSS. Cabe a você interpretar onde usar id (para elementos únicos) e onde usar class (para estilizar em grupo).
O título
Sendo um elemento único e exclusivo na página, ele precisa do seletor apropriado. Posicione o texto bem no centro da tela e dê a ele uma coloração azulada para destacar.
O corpo do texto (Parágrafos 2 e 3)
Esses dois parágrafos compartilham exatamente o mesmo visual. Use a forma correta de agrupar estilos no CSS para evitar repetição. O texto deve se esticar para tocar as duas margens ao mesmo tempo, e o bloco inteiro deve ter um fundo acinzentado.
A assinatura
Outro elemento que só aparece uma vez no seu diário. Empurre-o lá para o canto direito e crie um contraste forte: o fundo do bloco deve ser preto, e as palavras precisam ser brancas.
Confere antes de entregar
gabarito · visual esperado
Como deve ficar
Este é o visual esperado após você aplicar as regras corretas no seu CSS. Note como o texto se comporta em cada bloco.
