Construindo um web site a partir do zero Parte II:. Adição de estilo (CSS).
O que nos faremos
Neste capítulo, iremos:
- Criar uma folha de estilo CSS para o site
- Adicione um link para a folha de estilo em nossas páginas
Criar uma folha de estilo CSS
Na pasta demoweb, crie um novo arquivo chamado Site.css.
Coloque o seguinte código dentro do arquivo CSS:
Site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}O arquivo CSS acima define os estilos a serem usados para:
- O elemento do corpo HTML <body>
- O elemento HTML com id = "main"
- O elemento de título HTML <h1>
Editar a página inicial
Na pasta demoweb, edite o arquivo index.html.
Alterar o conteúdo do arquivo para o seguinte:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
Tente você mesmo " A home page acima, é uma cópia da página inicial do capítulo anterior.
Nós adicionamos um link para uma folha de estilo, e uma <div id = "main"> elemento para definir uma "seção" no conteúdo.
As mudanças são marcados a vermelho.
Editar a página Sobre
Para completar o seu trabalho, fazer as mesmas mudanças na about.html.
1. Adicione um link para a folha de estilo.
2. Adicionar um <id = "main" div> elemento.
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
Tente você mesmo " Leia mais
Leia mais sobre CSS no nosso Tutorial CSS .