Agregando estilo (CSS)

La construcción de un sitio web desde cero. Parte II: Agregando estilo (CSS).

Lo que haremos

En este capítulo vamos a:

Crear una hoja de estilos CSS

En la carpeta DemoWeb, cree un nuevo archivo llamado site.css.

Coloque el siguiente código dentro del 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 para ser usado cuando se utilizan para:

Edite la página inicial

En la carpeta DemoWeb, edite el archivo index.html.

Cambie el contenido del archivo a la siguiente:

index.html
<!DOCTYPE html>
<html>
<head>
<title>Nuestra empresa</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Bienvenido a nuestra empresa</h1>
<h2>Principales contenidos del sitio web:</h2>
<p>Paginas (HTML)</p>
<p>>Style Sheets (CSS)</p>
<p>Codigo (JavaScript)</p>
<p>Datos (Archivos y bases de datos)</p>
</div>
</body>
</html>

La página de inicio, encima, 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.

Edite la página Acerca de

Para completar su trabajo, hacer los mismos cambios en about.html.

1. Añadir un enlace a la hoja de estilos.

2. Añadir un <div id = "principal"> elemento.

index.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>

Privacidad | Legal | Sitemap | Google+