CSS Desde 0 – Parte 1


CSS(Cascade StyleSheet) es un lenguaje para dar estilo a la estructura creada con HTML, además para tener un control más preciso de la posición, color, alto, ancho, etc. de los elementos que se muestran en la pantalla, a través de reglas. Desde su creación resulto una solución muy eficaz a la hora de crear sitios Web ya que gracias a CSS se puede separar la estructura de la página de la presentación. El estándar actual es CSS3, norma que puede ser encontrada en w3school

A continuación les presentaremos una pequeña serie donde les ayudaremos a dar los primeros pasos en el mundo del maquetado.

Existen varias maneras de comenzar a utilizar CSS y aplicar estilos a los elementos de la página que estamos construyendo, gracias a la flexibilidad que nos brinda esta tecnología. La primera y (a mi modo de ver) más básica es aplicar estilos directamente a los elementos, es decir, si queremos que un párrafo tenga la letra de color rojo, que todo sea en mayúscula y que aparezca en negrita, pondríamos lo siguiente:

<p style="text-transform:uppercase; font-weight: bold; color: red;">aplicando css a un parrafo</p>

y el resultado sería:

aplicando css a un parrafo

Esta opción es válida cuando se tiene que aplicar un estilo en específico a un elemento, pero NO ES RECOMENDABLE ya que la línea se vuelve muy grande, le resta legibilidad al código y el mantenimiento del sitio se vuelve muy engorroso. A esta opción le llamaremos alfa

La segunda opción es dentro del tag (etiqueta) style. Esta opción se declara únicamente dentro de la sección del documento. El siguiente código ilustra mejor lo escrito anteriormente:

        <code>
         <!DOCTYPE html>
        <html>
          <head>
            <title>Ejemplo de estilos CSS en el propio documento</title>
            <style>
              p { text-transform:uppercase; font-weight: bold; color: red; }
        </style>
            </head>
        <body>
        <p>Un párrafo de texto.</p>
        </body>
        </html>

A esta opción le llamaremos beta

La tercera opción y la más generalizada, ya que está considerada como una buena práctica del uso de CSS es a través de un archivo externo que contenga los estilos que se aplicaran en la o las páginas de nuestro sitio.

Al igual que en el ejemplo anterior, nos centraremos en la sección de nuestro documento, pero esta vez no utilizaremos el tag style. Sería lo siguiente:

	<!DOCTYPE html>
	<html>
	  <head>
	     <title>Ejemplo de estilos CSS desde un archivo externo</title>
	  <link rel="stylesheet" type="text/css" href="/css/estilos.css">
	</head>
	  <body>
	    <p>Un párrafo de texto.</p>
	  </body>
	</html>

Pero, de donde salió el archivo estilos.css? La creación de un archivo css es muy sencilla, solamente tenemos que abrir un bloc de notas, declarar nuestros estilos y por ultimo salvar el documento, pero en vez de tener una extensión .txt, le pondríamos .css. A este método le llamaremos gamma.

Ahora el por qué de los nombres griegos a los diferentes métodos. Es importante tener en cuenta la prioridad de los estilos a la hora de declararlos ya que el navegador les da un nivel de importancia de unos con respecto a otros:

Alfa sobrescribe a Beta y este a su vez a Gamma, en otras palabras, tenemos un archivo CSS externo que contiene un estilo que le aplicamos a un elemento párrafo, si declaramos dentro del del documento entre los tags style otro estilo para el párrafo, el del archivo externo quedara suprimido, de la misma forma que si lo declaramos directamente en el párrafo. Aun así sigue siendo recomendado utilizar archivos externos y no declararlos en línea a no ser que sea sumamente necesario. Incluso hay prioridades entre los archivos externos, el último que sea incluido tiene más prioridad que los anteriores

La regla CSS

Las reglas CSS son cada uno de los estilos que conforman el archivo y están compuestas por varias partes las cuales se muestran a continuación:

p {color: blue}

La regla completa va desde el elemento p hasta la llave de cierre }, es decir todo es la regla. p es el selector que no es más que el elemento al que se le aplica el estilo, color es una propiedad de tantas que puede tener un párrafo y que vamos a modificar y blue es el valor. Siempre tenemos que tener bien en cuenta cuando apliquemos estilos directamente en los elementos de HTML, ya que podemos declarar que todos los párrafos serán de color rojo p {color: red} por algún requerimiento o restricción de la página en desarrollo y después declarar que serán azules p {color: blue}, situación que provocará una colisión de estilos y como ya explicamos anteriormente, el navegador priorizará la última regla declarada.

Comentarios

Por un momento me cuestione si tocar este tema ya que por su sencillez pensé que no merecía unas líneas, pero recordé las veces en las que me encontrado perdido en una hoja CSS con más de 400 líneas y hacer búsquedas a ciegas, hasta que comencé a agregar comentarios a los estilos, lo cual es muy importante para el diseñador de páginas web ya que para futuros mantenimientos resultan mucho más fáciles localizar dichos estilos.

Agregar un comentario en una hoja CSS es tan fácil como esto:

/*Soy un comentario CSS*/

Podemos tener comentarios de varias lineas:

	/*Soy un comentario CSS
	en varias lineas
	*/

Este formato de comentarios es válido solamente en las hojas CSS, si queremos agregar comentarios en la página HTML, entonces seria de la siguiente manera:

<!--Soy un comentario HTML-->

Hasta aqui esta primera parte de nuestra serie de artículos donde jugaremos a ser los creadores de nuestro pequeño mundo. Esperen nuestro próximo artículo donde cosas mas emocionantes ya tocan a la puerta.