En TecnoHispanos queremos que aprendas html, pero no el académico. Queremos que seas capaz de defenderte en el duro mundo de la creación de páginas web. Por eso te traemos otra entrega de HTML de Guerra. En esta ocasión, aprenderemos como modificar texto con CSS.
Los Cascading Style Sheets, o CSS, como se les conoce abreviadamente, son hojas de estilo en cascada. Esto en teoría significa que en ellas defines la apariencia de algún tag de html y todos los tags que esten anidados en el, heredan esa apariencia.
Esto te da una gran ventaja. Puedes crear una sola hoja de estilo y luego, al hacer tus páginas HTML, enlazarlas a esa hoja de estilo, de manera que todas las páginas de tu sitio adquieran una apariencia similar. Y adicionalmente, si te cansaste de un color o tipo de letra, lo cambias y cambia todo tu sitio simultáneamente.
Una hoja de estilo CSS es un archivo de texto, igual que los html, pero que se guarda con una extensión *.css
Hay varias maneras de aplicar los CSS. Pero la más útil es enlazar todas tus páginas html y definir la apariencia de los tags, o de secciones de texto independientes.
Veamos como se hace:
Digamos que tienes tu página index.html de la lección anterior:
<html>
<head>
Cabezal
</head>
<body>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo<br />
pero con corte de línea.</p>
</body>
</html>
En esta página, en la sección del cabezal a la cual llamaremos de ahora en adelante <head>, meteremos el link a la página de estilo. Hagamos la hoja de estilo. Pongámosle un nombre original, nunca antes puesto: estilo.css
Ahora pongamos el link:
<html>
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo<br />
pero con corte de línea.</p>
</body>
</html>
Guarda tu página index.html y estilo.css en el mismo directorio para los efectos de este artículo.
Ahora, ya podemos ir modificando estilo.css, lo cual a su vez modificará la apariencia de index.html. La ventaja de esto, como ya hemos visto es que podemos controlar “a control remoto” la apariencia de todas las páginas de nuestro sitio. Todas las que estén enlazadas a la hoja estilos.css tomarán sus atributos.
Modifiquemos el texto de los párrafos. Para esto, lo que tenemos que hacer es definir el estilo para los tags “p” o “P”. Abre tu hoja de estilo en un editor de texto o en un editor específico para hojas de estilo (yo utilizo el TopStyle de BradSoft), y agrega lo siguiente:
P {
font-size : 10px;
font-family : Verdana, Arial, sans-serif;
}
Guarda tu hoja estilo.css y luego recarga tu página web index.html. ¿Hubo cambios? Si los hubo, y tu texto cambio a el tipo de letra Verdana, vamos bien. Si no, empieza el artículo nuevamente.
Digamos que queremos agregarle un color rojo a las letras, haríamos lo siguiente:
P {
font-size : 10px;
font-family : Verdana, Arial, sans-serif;
color: Red;
}
¿Pero que pasa si queremos tener el texto digamos un párrafo en negro y solo un parrafo en rojo? Es sencillo, utilizando el atributo class. Veamos:
<html>
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<p>Este es el primer párrafo</p>
<p class=”concolor”>Este es el segundo párrafo, que sale en rojo.</p>
</body>
</html>
Como ves, le hemos agrado el atributo “class” a el segundo párrafo. Mientras no edites estilo.css, no pasa nada, pero en el momento que ponemos lo siguiente:
P {
font-size : 10px;
font-family : Verdana, Arial, sans-serif;
}
.concolor {
font-size : 10px;
font-family : Verdana, Arial, sans-serif;
color: Red;
}
Fíjate lo que hemos hecho, hemos agregado una clase, o class que se llama concolor. Tu puedes ponerle el nombre que tu quieras, como por ejemplo textoRojo. Fíjate también que las clases llevan un puntito al principio, .concolor
El punto va solo en el archivo estilo.css, no en el html.
¿Fácil eh? ¿Pero que pasa ahora si quiero tener un párrafo en el cual solo una palabra va en rojo? Lo haríamos asi:
<html>
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo, el cual lleva esta palabra en <span class=”concolor”>rojo</span>.</p>
</body>
</html>
¿Ves? Ahora lo que hicimos fue definir un SPAN, el cual queremos que se muestre rojo.
Con esto terminamos la reunión de hoy. Ya tienes una buena idea de cómo editar el texto en tu página y cambiarle la apariencia utilizando los CSS.