Ya sea que lo sepa o no, está aprovechando CSS casi cada vez que abre 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 «He hecho sitios web antes y fue fácil, nunca necesité ningún CSS». y eso es verdad No necesita CSS para hacer un sitio agradable y funcional, pero es muy probable que su sitio podría haber sido más pequeño, más limpio, más consistente y mejor si hubiera elegido CSS desde el principio. Hoy le mostraremos los conceptos básicos de lo que CSS puede hacer. Esta guía no lo llevará de un principiante a un diseñador web galardonado, pero lo ayudará a comprender cómo funciona CSS y cómo puede gastarle MUCHO tiempo y esfuerzo.
vista rápida
CSS (hoja de estilo en cascada) está destinado a hacer una cosa: administrar la presentación de su sitio. Esto puede sonar simple, pero téngalo en cuenta a medida que continuamos. Una cosa importante que se debe quitar de ese hecho es que la presentación NO es el trabajo de HTML. HTML define la estructura de su página (qué es un encabezado, 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 darle una idea de lo que CSS debe corregir, eche un vistazo a este código HTML:
<html>
<head>
<title>My Homepage</title>
</head>
<body>
<h1><font face="verdana" color="green">Breaking News!</font></h1>
<p><font face="verdana" color="blue">Greatest web site ever is currently under development.</font></p>
<br />
<br />
<h1><font face="verdana" color="green">Other news</font></h1>
<p><font face="verdana" color="blue">Aliens have invaded too.</font></p>
<br />
<br />
</body>
</html>Que aparece en su navegador como algo como esto:
Hay una serie de problemas potenciales aquí. Para empezar, está colocando información de fuente y color cada vez que se dibuja un nuevo encabezado o párrafo. Cada elemento nuevo en el sitio necesitaría definiciones de fuente y color idénticas, aunque sean las mismas para cada título y párrafo. Esto equivale a un montón de ancho de banda desperdiciado si tiene muchas entradas.
El siguiente es el problema de la escalabilidad. Si tiene 100 entradas en esta página de noticias y decide que los titulares deben ser rojos, tiene mucho trabajo por delante para cambiar cada etiqueta de titular 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 «presentativos», no «estructurales». Las etiquetas de fuente, color y salto de línea se relacionan con la forma en que se presenta la página y no tienen nada que ver con la estructura de la página. HTML no se adapta bien a la presentación, es mejor dejar ese trabajo a CSS, como mostraremos a continuación.
Diseñando con CSS
Entonces, ¿cómo podemos eliminar todas esas etiquetas adicionales? ¿Cómo podemos reducir el tamaño de la página manteniendo nuestros colores y diseño? Bueno, la imagen podría definir en un solo lugar cómo deberían verse TODOS sus titulares (digamos, texto verde grande). Entonces no necesita definir el color para cada título único. Lo mismo se aplica a los párrafos. Si desea que todo el texto del párrafo sea azul, simplemente configúrelo como una regla CSS para la etiqueta «p». Todos los demás párrafos tendrán texto azul, sin que tengas que especificarlo cada vez.
CSS se enseña mejor con el ejemplo. Comencemos definiendo exactamente las reglas descritas anteriormente: todos los titulares deben ser verdes y todos los párrafos deben ser azules. Usando el editor de texto de su elección, inicie un nuevo archivo llamado style.css y agregue el siguiente texto:
h1 { color:green;}
p { color:blue;}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 de enlace y luego eliminar todas las etiquetas de fuentes inútiles del HTML. Cuando termine, debería verse algo como esto:
<html>
<head>
<title>My Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Breaking News!</h1>
<p>Greatest web site ever is currently under development.</p>
<h1>Other news</h1>
<p>Aliens have invaded too.</p>
</body>
</html>Un poco más limpio, ¿eh? Ya hemos reducido el tamaño total de nuestro sitio, y eso fue con solo 2 entradas en nuestro «blog».
CSS para diseño
Claro, puede hacer que sus 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 hacer eso, debe poder afectar el diseño de su sitio, brindándole control no solo sobre cómo se ven las cosas sino también hacia dónde van. El poder completo de CSS sobre el diseño del sitio está mucho más allá del alcance de esta guía, por lo que presentaremos el concepto a través de un único escenario común: una barra lateral de navegación.
Crear algo como esto es asombrosamente simple en CSS. Regrese a su archivo style.css y agregue la siguiente sección:
#sidebar {
width:100px;
height:200px;
border-style:solid;
float:left;
margin-right:15px;
}Tome nota del # al comienzo de la barra lateral del nombre. En resumen, esto le dice a CSS que estamos trabajando con un nuevo nombre de elemento único que inventamos, en lugar de una etiqueta integrada como h1 o p. La explicación larga involucra la diferencia entre una identificación y una clase, y se explica en detalle aquí.
Debería poder ver varias partes importantes aquí. Primero, creamos una nueva ID llamada barra lateral, le dimos una altura y un ancho específicos, un borde sólido y especificamos que debería tener un margen de 15 px en el lado derecho. Le hemos dicho que flote en el lado izquierdo de la pantalla, con otros elementos de la página (como su texto) fluyendo a su alrededor. Puede activar este elemento agregando una etiqueta de barra lateral al cuerpo de su HTML, algo como esto.
<div id="sidebar">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>¡Y ahora, cuando abres tu página, está tu nueva barra lateral!
Conclusión
Claramente, solo hemos comenzado a arañar la superficie de las capacidades de CSS, pero esperamos que quede claro que estos principios básicos se pueden aplicar a mucho más de lo que hemos hecho aquí. Las manipulaciones de texto se pueden usar para dar formato al texto de innumerables maneras y, al modificar el concepto de la barra lateral, puede crear infinitas variaciones del diseño del sitio. Para estudios adicionales, este autor recomienda encarecidamente la sección CSS de W3Schools.com.
Credito de imagen: geirane