Hoja de Estilos

Ahora hablaremos sobre el amigo mas poderoso que tiene el Html estoy hablando de los Estilos Css.

Como su mismo nombre lo dice, los Estilos Css nos permiten administrar los estilos de toda una web desde solo una hoja, ahorrándonos con eso acumulamiento de código html y por ende dándonos una página web mas liviana.

Veamoslo mejor con un Ejemplo:

Supongamos que nuestro amigo websito tiene su página web de juegos y como le va tan bien pues aumento su contenido y llegó a tener 50 páginas html, bastante no? El esta muy contento pero de pronto se da cuenta que el tipo, tamaño y color de la letra que tiene en todas sus páginas no son las mejores y quiere cambiarlas por otras que sea vean mejor. Que hace nuestro amigo websito, pues va página tras página cambiando el código de todos los párrafos de su web, se imaginan? 50 páginas! Pobre websito verdad?.

Pero Axel quien es Websito y porque es tan tonto?

Oseaaaa… Websito es nuestro amigo imaginario (plop) y no es que sea tonto esque el no conoce los Estilos Css, imagínense que todo ese trabajo websito lo pudo haber echo en solo 1 línea! Si una línea! en su hoja de Estilos si esque hubiera trabajado con ella claro, interesante no? Y los estilos no quedan ahí puedes hacer muchas mas cosas con esta pequeña hoja, quieres aprender y aplicarlo a tu web? Pues vamos por ello.

Primero vamos a poner toda lo que tenemos en un Div, se que aun no saben lo que es un div pero eso lo veremos la siguiente lección por ahora solo quiero que me crean y confíen en mi.

Recuerden que todo lo que vamos a mostrar en nuestra web se hace desde el body así que en la pestaña Código encerramos todo el contenido que tenemos entre las etiquetas: <div> y </div>.
Nuestro código nos quedaría así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body>
<div>
<p>“Este es el primer texto de nuestra página!!” </p>
<p>Segundo parrafo, pueden poner lo que ustedes quieran </p>
<p>Wow tanto codigo, aprendiendo ahora a cambiar de linea.. <br />
Y wualaaa ya esta! </p>
<br />
<a href="www.axside.com" ><img src="imagenes/objeto1.jpg" alt="texto alternativo" width="150" height="150" border="0" longdesc="Descripción larga"></a><br />
página creada con ayuda de <a href="http://www.axside.com" target="_blank">Axside</a>
</div>
</body>
</html>

Si vamos a la pestaña Diseño vamos a poner observar que todo nuestro contenido se ah encerrado en una especie de rectángulo punteado, ese es nuestro div, nos facilitara la vida como veremos mas adelante. Ahora si creemos nuestra hoja de estilos.

Creamos un nuevo Documento, ya saben como:

Archivo > Nuevo

En la siguiente ventana que les aparece asegúrense ahora de marcar en página básica ya no html sino CSS como la imagen:

Tenemos una nueva hoja, esta es diferente de la html verdad, no trae ningún código, esa será nuestra hoja de estilos, por ahora no escribiremos nada solo la guardaremos.

Si vemos bien a la nueva hoja que creamos le asignaron el nombre Untitle-1 seguido por un asterisco, ese asterisco quiere decir que la hoja aun no esta guardada. Guardamos la hoja dando a:

Archivo > Guardar Como

O también dándole click derecho a la pestaña Untitle-1* seleccionando Guardar Como.

El nombre de nuestra hoja de estilos será: “estilos.css” sin las comillas, le ponemos ese nombre con toda su extensión y lo guardamos.

En la paleta archivos nos debería aparecer como acá:

Ahora bien, nosotros tenemos que decirle a nuestra página index que tiene obedecer a nuestra hoja de estilos que acabamos de crear, esto lo hacemos fácilmente colocando un código en cualquier parte entre las etiquetas <head> y </head> de nuestro index.

El código es:

Recuerden que si ustedes cambian el nombre de su hoja de estilos también deben cambiar la última parte del código para enlazar su hoja de estilos reemplazando “estilos.css” por el nombre que ustedes le hayan puesto.

Nuestro código final nos quedara así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>

<body>
<div>
<p>“Este es nuestro primer texto!. que emoción!!” </p>
<p>En Como Crear tu propia web aprenderemos un poco mas de html </p>
<p>Wow tanto codigo, aprendiendo ahora a cambiar de linea.. <br />
Y wualaaa ya esta! </p>
<br />

<img src="imagenes/objeto1.jpg" alt="texto alternativo" width="150" height="150" longdesc="Descripción larga">
</div>
</body>
</html>

Ahora si tenemos nuestra hoja de estilos creada y enlazada pasemos a la practica y jugemos un poco con todo lo que los Estilos Css nos da, vamos.

<<<<< Anterior Siguiente >>>>>