Aplicaremos um pouco de estilo em nossa página usando CSS. Dentro da pasta css, crie um arquivo sobre.css, que conterá nosso código de estilo para essa página.
Em primeiro lugar, precisamos carregar o arquivo sobre.cssdentro da página sobre.html com a tag <link> dentro da tag<head>:
<link rel="stylesheet" href="css/sobre.css">
Para o elemento <body>, altere a sua cor e sua fonte base por meio das propriedades color e font-family:
body {
color: #333333;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
O título principal deve ter um fundo estampado com a imagemimg/sobre-background.jpg. Use a propriedade background-imagepra isso. Aproveite e coloque uma borda sutil nos subtítulos, para ajudar a separar o conteúdo.
h1 {
background-image: url(../img/sobre-background.jpg);
}
h2 {
border-bottom: 2px solid #333333;
}
Acerte também a renderização das figuras. Coloque um fundo cinza, uma borda sutil, deixe a legenda em itálico com font-stylee alinhe a imagem e a legenda no centro com text-align.
figure {
background-color: #F2EDED;
border: 1px solid #ccc;
text-align: center;
}
figcaption {
font-style: italic;
}
Teste o resultado no navegador. Nossa página começa a pegar o estilo da página final!
Nenhum comentário:
Postar um comentário