Lo sepas o no, utilizas CSS cada vez que abres un navegador web. Es el sistema de plantillas utilizado por casi todos los sitios web modernos para dar a las páginas su diseño y apariencia. Algunos de ustedes pueden estar pensando “Hehecho sitios web antes y fue fácil, nunca necesité ningún CSS.” y eso es cierto. No necesitas CSS para hacer un sitio bonito y funcional, pero es muy probable que tu sitio podría haber sido más pequeño, más limpio, más consistente y más bonito si hubieras elegido CSS desde el principio. Hoy vamos a mostrarte lo más básico de lo que puede hacer CSS. Esta guía no te hará pasar de ser un principiante a ser un diseñador web premiado, pero te ayudará a entender cómo funciona el CSS y cómo puede hacerte perder mucho tiempo y esfuerzo.
Resumen rápido
CSS (Cascading Style Sheet) está destinado a hacer una cosa: gestionar la presentación de su sitio. Esto puede sonar simple, pero téngalo en cuenta mientras continuamos. Una cosa importante a tener en cuenta es que la presentación NO es el trabajo de HTML. HTML define la estructura de tu página (qué es una cabecera, qué es un pie de página, etc). CSS toma esa estructura y hace todo el trabajo con respecto a cómo se presenta esa estructura.
La forma incorrecta
Para que te hagas una idea de lo que el CSS debe arreglar, echa un vistazo a este código HTML:
<html> <head> <title>Mi página web</title> </head> <body> <h1><font face=”verdana” color=”green”>¡Noticias de última hora!</font></h1> <p><font face=”verdana” color=”blue”>El sitio web más grande de la historia está actualmente en desarrollo.</font></p> <br /> <h1><font face=”verdana” color=”green”>Otras noticias</font></h1> <p><font face=”verdana” color=”blue”>Los alienígenas también han invadido.</font></p> <br /> <br /> </body></html>
Que se muestra en tu navegador como algo así:
Aquí hay varios problemas potenciales. Para empezar, está colocando la información de la fuente y el color cada vez que se dibuja un nuevo encabezado o párrafo. Cada nuevo elemento en el sitio necesitaría definiciones idénticas de fuente y color, aunque sean las mismas para cada encabezado y párrafo. Esto supone un gran desperdicio de ancho de banda si tienes muchas entradas.
Luego está el problema de la escalabilidad. Si tienes 100 entradas en esta página de noticias, y decides que los titulares deben ser rojos, tienes mucho trabajo por delante para cambiar cada etiqueta de los titulares para mostrar el nuevo color.
En tercer lugar, y esto es una cuestión de “procedimiento adecuado”, esta página contiene varios elementos que son “de presentación”, no “estructurales”. Las etiquetas de fuente, color y salto de línea están relacionadas con la presentación de la página y no tienen nada que ver con la estructura de la misma. El HTML es poco adecuado para la presentación, ese trabajo es mejor dejarlo a CSS, como mostraremos a continuación.
Diseñar con CSS
Entonces, ¿cómo podemos eliminar todas esas etiquetas adicionales? ¿Cómo podemos reducir el tamaño de la página manteniendo los colores y el diseño? Bueno, la imagen podría definir en un solo lugar cómo deben ser TODOS tus titulares (digamos, texto verde grande). Entonces no necesitas definir el color para cada uno de los titulares. Lo mismo ocurre con los párrafos. Si quieres que todo el texto de los párrafos sea azul, sólo tienes que establecerlo como regla CSS para la etiqueta “p”. Todos los demás párrafos tendrán texto azul, sin que tengas que especificarlo cada vez.
La mejor forma de enseñar CSS es con el ejemplo. Empecemos por definir exactamente las reglas descritas anteriormente: todos los titulares deben ser verdes y todos los párrafos deben ser azules. Utilizando el editor de texto de su elección, inicie un nuevo archivo llamado style.css y añada el siguiente texto:
h1 {color:verde;}p {color:azul;}Esto define que todas las etiquetas h1 tienen texto verde, y todas las etiquetas p tienen texto azul.
Todo lo que tenemos que hacer ahora es conectarlo al HTML con la etiqueta link, y luego eliminar todas las etiquetas de fuente inútiles del HTML.
Una vez terminado, debería tener un aspecto similar al siguiente:
<html> <head> <title>Mi página web</title> <link rel=”stylesheet” type=”text/css” href=”style.css” /> </head> <body> <h1>¡Noticias de última hora!</h1> <p>El sitio web más grande de la historia está actualmente en desarrollo.</p> <h1>Otras noticias</h1> <p>Los alienígenas también han invadido.</p> <body></html>
Bastante más limpio, ¿no? Ya hemos reducido el tamaño total de nuestro sitio, y eso fue con sólo 2 entradas en nuestro “blog”.
CSS para el diseño
Claro que puede hacer que tus fuentes sean consistentes, pero eso por sí solo no es suficiente para hacer de CSS la herramienta completa para la presentación de sitios web. Para ello, debe ser capaz de afectar al diseño de tu sitio, dándote el control no sólo de cómo se ven las cosas sino de dónde van. Todo el poder de CSS sobre el diseño del sitio está más allá del alcance de esta guía, por lo que introduciremos el concepto a través de un único escenario común: una barra lateral de navegación.
Crear algo así es asombrosamente sencillo en CSS. Vuelve a tu archivo style.css y añade la siguiente sección
#sidebar{width:100px;height:200px;border-style:solid;float:left;margin-right:15px;}Tenga en cuenta el # al principio del nombre sidebar. En resumen – esto le dice a CSS que estamos trabajando con un nuevo nombre de elemento único que hemos inventado, en lugar de una etiqueta incorporada como h1 o p
. La explicación larga implica la diferencia entre un id y una clase, y se explica en detalle aquí.Deberías ser capaz de ver varias partes importantes aquí. Primero creamos un nuevo ID llamado sidebar, le dimos una altura y un ancho específicos, un borde sólido, y especificamos que debe tener un margen de 15px en el lado derecho. Le hemos dicho que flote en el lado izquierdo de la pantalla, con otros elementos de la página (como el texto) fluyendo a su alrededor. Puedes activar este elemento añadiendo una etiqueta de barra lateral
al cuerpo de tu HTML, algo así<div id=”sidebar”> <ul> <li>Estímulo 1</li> <li>Estímulo 2</li> <li>Estímulo 3</li> </ul> </div>
Y ahora cuando abras tu página, ¡está tu nueva barra lateral!
Conclusión
Está claro que sólo hemos empezado a arañar la superficie de las capacidades de CSS, pero esperamos que quede claro que estos principios básicos pueden aplicarse a mucho más de lo que hemos hecho aquí. Las manipulaciones de texto pueden usarse para formatear el texto de innumerables maneras, y modificando el concepto de barra lateral se pueden crear infinitas variaciones de diseño del sitio. Para profundizar, este autor recomienda encarecidamente la sección de CSS de W3Schools.com.