CSS Diseño Web
Bienvenidos sean todos y cada uno de Uds. a un nuevo número de “Como dominar CSS sin salir del escritorio”, la saga que pretende adentrarnos en el aprendizaje de las hojas de estilo y como aplicarlas adecuadamente a nuestros sitios Web.
Hoy retomaremos exactamente donde quedamos en la última ocasión y seguiremos viendo algunos conceptos importantes para aplicar.
El detalle, como siempre, después del salto.
Nota: Recomendamos leer los números anteriores antes de empezar con este. Pueden encontrarlos todos en el siguiente enlace.
Tal como recordarán, los contenidos para la edición de hoy son:
Así que sin más, vamos al detalle:
Como hemos visto en los números anteriores de esta guía, hemos podido definir estilos de acuerdo a distintas propiedades, tanto a nivel individual de cada etiqueta, como a nivel de página. Cada una de esas modalidades presenta ventajas y desventajas de acuerdo a lo que necesitemos.
Hoy presentaremos un nuevo estilo que responde a la siguiente pregunta: ¿Qué pasa si queremos que una marca tenga distintos estilos dependiendo donde se encuentre?.
Para eso la primera respuesta sería aplicar los estilos a nivel de marca individual, pero termina siendo bastante engorroso y complicado de actualizar, lo que nos puede llevar a equivocaciones y una mala presentación de nuestro sitio Web a los visitantes.
Una buena alternativa es definir el estilo de esa marca a nivel de página, pero estableciendo como condición que si esa marca se encuentra contenida en otra marca en especial se estilice de una forma, y si se encuentra contenida en otra, se estilice de forma diferente.
Para esto, solo debemos definir los estilos a nivel de página y anteponer a cada instancia de la etiqueta, la otra marca donde estará contenida.
Veamos un ejemplo donde todo quedará más claro:
Ejemplo: Definir 2 estilos para una etiqueta <b>. Si esta contenida en un encabezado que sea de color rojo, y si esta contenida en un parrafo, que sea de color verde.
<html>
<head>
<title> Ejemplo 3-1 </title>
<style type=”text/css”>
h1 b
{
color:#ff0000;
}
p b
{
color:#00ff00;
}
</style>
</head>
<body>
<h1> Aqui aplicamos <b>el primer estilo. </b></h1>
<p> Y aqui <b>el segundo.</b></p>
</body>
</html>
Como podemos notar, la misma marca (<b>), se comporta de forma distinta dependiendo de la que la contiene.
Hay que tener mucho ojo al definir el estilo que solo sean separados por un espacio. Si separamos por una coma, aplicará el mismo estilo a las 2 etiquetas. Por ejemplo:
h1 b{ : aplica el estilo a la marca <b> dentro de <h1>
h1,b{ : aplica el estilo tanto a la marca <b> como a la <h1>
Hasta el momento habíamos visto 2 formas de definir estilos. La primera mediante la estilización individual de cada marca HTML que utilizamos y la segunda haciendo una estilización general a nivel de página. Cada una con sus ventajas y desventajas, son utilizadas para cuando tenemos una sola página que deseamos estilizar.
Una tercera forma, mucho mejor y más utilizada, es definir los estilos en un archivo externo de extensión .CSS y enlazar cada página a ese archivo, con lo que heredará sus estilos y los aplicará a cada marca que corresponda.
Esta modalidad presenta una serie de ventajas, como el poder separar definitivamente lo que es estilo y estructura en 2 archivos distintos (uno CSS y uno HTML), así como entregar una facilidad tremenda de actualizar los estilos, ya que cada vez que necesitemos hacerlo solo modificaremos un archivo y no cada una de las páginas que contenga un estilo en particular, algo tremendamente útil si nuestro sitio Web contiene múltiples páginas.
La mejor forma de entender como hacer este proceso es mediante un ejemplo, veamos:
Ejemplo: Definir los estilos de una página en un archivo externo.
Lo primero que haremos será crear un archivo llamado estilos.css donde definiremos todos los estilos de nuestra página.
h1
{
color:#ff0000;
}
body
{
background-color:#000000;
}
p
{
color:#ffffff;
font-family: Arial;
}Guardamos este archivo como estilos.css
Y ahora que tenemos nuestro archivo externo, veamos como quedaría nuestro HTML:
<html>
<head>
<title> Ejemplo 3-2 </title>
<link rel=”StyleSheet” href=”estilos.css” type=”text/css”>
</head>
<body>
<h1> Texto de ejemplo 1 </h1>
<p> Texto de ejemplo 2 </p>
</body>
</html>
Como podemos ver, hemos utilizado una nueva etiqueta:
<link rel=”StyleSheet” href=”estilos.css” type=”text/css”>
Esa etiqueta es la estándar para llamar archivos externos de estilo, utiliza el atributo rel que siempre toma el valor StyleSheet para las hojas de estilo, luego el atributo href que contiene la ruta y nombre del archivo externo y el atributo type, para indicar que es lo que llamamos.
Si abrimos ese HTML en un navegador, nuestra página debería tener fondo negro, el primer texto en rojo y el segundo en blanco y con letra Arial, ya que referencia a los estilos definidos en el archivo externo.
Como podemos ver no es de gran dificultad definir los estilos en un archivo externo y presenta una serie de atractivas ventajas.
En muchas ocasiones querremos definir un estilo para múltiples marcas HTML y utilizarlo muchas veces dentro de una misma página. Una posibilidad es definir el estilo individualmente para cada etiqueta, pero si lo vamos a estar reutilizando sin modificarlo, es bastante engorroso y largo de hacer.
Para esto en CSS están definidas las clases, las cuales nos permiten definir un estilo en particular bajo un nombre y utilizar ese estilo en todas las etiquetas que estimemos pertinente. Al igual que en las etiquetas, en una clase podemos definir una serie de propiedades de estilo, tanto para texto, como colores y otros.
Luego, para usarlas, las llamamos desde el archivo HTML. En la etiqueta que necesitemos, solo añadimos dentro de ella el atributo style=”nombre de la clase” y este será aplicado igual que si estuviese definido para esa etiqueta en particular.
Para definir una clase en una hoja de estilo, solo debemos anteponer un punto ( . ) antes del nombre y así será reconocida.
Veamos un ejemplo
Ejemplo: Definir en un archivo externo una clase llamada uno la cual debe utilizar una fuente de tipo Arial, de color rojo y luego llamarla desde distintas etiquetas.
Nuestro archivo externo:
.uno
{
font-family: Arial;
color: #ff0000;
}
Guardamos ese archivo como estilos.css y a continuación hacemos el HTML:
<html>
<head>
<title> Ejemplo 3-3 </title>
<link rel=”StyleSheet” href=”estilos.css” type=”text/css”>
</head>
<body>
<h1 style=”uno”>Texto ejemplo 1</h1>
<p style=”uno”> Texto ejemplo 2</p>
<h2 style=”uno> Texto ejemplo 3</h2>
Si abrimos el archivo HTML en nuestro navegador podremos comprobar que los 3 textos, tanto el encabezado 1, como el parrafo y el encabezado 2 tienen el mismo estilo, ya que cada uno de ellos estilizó haciendo referencia a la clase uno creada en el archivo estilos.css
Las clases pueden ser utilizadas todas las veces que se quiera, sin importar la marca que la referencie o el lugar dentro de la página HTML.
Y con esto hemos terminado la edición de hoy de “Como dominar CSS sin salir del escritorio”. Hemos visto algunos conceptos bastante importantes y ya sabemos como llamar a un archivo de estilo externo, la forma en la que trabajaremos de ahora en adelante.
En la próxima edición:
Como siempre, recuerden que este tutorial ha sido:
Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habiltiada a continuación.
Esperamos que haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
Deja un comentario