La construcción de un sitio web desde cero Parte II:. La adición de estilo (CSS).
Lo que haremos
En este capítulo vamos a:
- Crear una hoja de estilo CSS para el sitio
- Añadir un enlace a la hoja de estilos en nuestras páginas
Crear una hoja de estilos CSS
En la carpeta demoweb, crear un nuevo archivo con el nombre site.css.
Coloque el código siguiente en el archivo 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;
}El archivo CSS anterior define los estilos que se utilizarán para:
- El elemento de cuerpo HTML <body>
- El elemento HTML con id = "principal"
- El elemento de encabezado HTML <h1>
Editar la página inicial
En la carpeta demoweb, editar el archivo index.html.
Cambiar el contenido del archivo a lo siguiente:
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>
Inténtalo tú mismo "La página principal de arriba, es una copia de la página de inicio del capítulo anterior.
Hemos añadido un enlace a una hoja de estilo, y un <div id = "principal"> elemento para definir una "sección" en el contenido.
Los cambios están marcados en rojo.
Editar Sobre la página
Para completar su trabajo, hacer los mismos cambios en about.html.
1. Añadir un enlace a la hoja de estilo.
2. Añadir un <div id = "principal"> 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>
Inténtalo tú mismo "Lee mas
Más información acerca de CSS en nuestro Tutorial CSS .