Qué son las hojas de estilo CSS

Hoy os vengo a hablar de un concepto muy sonado en el diseño web, la base de todo lo que vemos delante de nuestro monitor cuando visitamos nuestras páginas favoritas y lo que hace que un rincón de internet sea más bonito visualmente y muchas cosas más. Hablo de las hojas de estilo, conocidas también como CSS. Estas hojas nos sirven tanto para dar aspecto, como organizar elementos de manera lógica y contribuir con la usabilidad del sitio. Pero no todo empieza en saber qué etiquetas poner. Antes de poner colores, debemos estructurar a nivel interno los objetos. En este post vamos a hacer un pequeño repaso al proceso a seguir y lo que podemos hacer con CSS.

Hojas de estilos: internas vs. externas 

Las hojas de estilos se pueden presentar en dos formatos: internas o externas. Las primeras son las que pondremos en el mismo documento .html y que afectarán únicamente a ese fichero, mientras que las externas las guardaremos con formato .css y afectan a todos los documentos (previamente deberemos enlazarlos). Esto nos sirve para dar unos estilos generales y luego especificar detalles con las internas, ya que estas tienen un grado de importancia mayor. Es decir, si nosotros decimos que todos los botones sean rojos, pero sólo en un documento queremos que sea azul, usaremos las internas para ser más precisos. Por lo que una combinación de ambas no es un disparate, no se reduce a usar unas u otras. Podemos enlazar los ficheros con la etiqueta link dentro del head.

Hoja de estilo CSS externa

Hoja de estilo CSS interna 

Cómo colocar los elementos en CSS 

Cuando usamos hojas de estilo, para colocar los elementos en el espacio, debemos imaginar que son burbujas de agua que tratan de flotar a la superficie, cosa que, de hecho, hace que haya una etiqueta llamada float por ese mismo motivo. Esto hace que nos ahorremos una técnica muy usada en los inicios de internet que era usar tablas para dar aspecto, algo que debemos evitar a toda costa porque se ha convertido en un recurso incorrecto. Las tablas sólo son para organizar datos, no para poner colores u otras acciones que hacen los css. ¿Cómo empezamos? Bien, lo primero que debemos tener en cuenta es usar las listas <li> para mostrar lo que necesitamos, como por ejemplo este formulario que hice hace un tiempo.

Como se observa, tenemos todos los elementos listados, incluso la imagen de ese simpático personaje de dibujos animados, seguidamente de los campos que queremos que el usuario rellene. Obviamente no es una web presentable para nada. No tiene gracia, pero fijáos que sin embargo si tiene lógica: primero una imagen, seguido del formulario, finalizando con el botón para mandar el formulario. Si ponemos en acción las hojas de estilo, el resultado es el siguiente.

Observamos que no sólo cambiamos los colores, tanto de fondo como del formulario, sino que también hemos modificado el tamaño de la imagen, y lo hemos colocado todo en el centro de la pantalla para que sea más cómodo.

Con las hojas de estilo podéis modificar lo que queráis de vuestra web, incluso dar sombreados a las imágenes sin necesidad de que pasen por un editor de imagen. Esto nos da a pensar que son muy útiles, y de hecho cuando se pide experiencia en desarrollo web, de demanda un conocimiento básico de CSS.

Pero las hojas de estilo no sólo son colores e imágenes. Hay muchos efectos que se pueden lograr gracias a su última versión, CSS3. Seguidamente os voy a mostrar unos cuantos bastante vistosos para que nos sirvan como demostración de que aprender este lenguaje puede dar mucha vida a nuestra web.

Efectos que pueden crearse con las hojas de estilo CSS

• Menús con transiciones, por ejemplo un menú que nos aparezcan las opciones con una transición de fundido.
• Botones con luz, por si queréis poner unos botones más originales para, por ejemplo, mostrar al usuario si algún servicio está disponible o no.
• Filtros para imágenes, antes he mencionado que también podéis aplicar ciertas modificaciones a imágenes sin necesidad de que pasen por un programa de retoque fotográfico. En este enlace hay un ejemplo de desenfoque, útil por si deseáis mostrar este efecto en una web relacionada con fotografía, o que sólo hayan imágenes sin difuminado para usuarios registrados, etc. (La cantidad de usos son tantos como los que vuestra imaginación os diga).
• Gráficos animados, esto si que es más visual, desde luego: un gráfico de barras animado que cambia en función de lo que el usuario desee.
• Y finalmente, después de estos ejemplos que podríais llegar a usar en vuestra web, os quiero dejar otra pequeña muestra de lo que podemos llegar a hacer con CSS, mezclado con JavaScript. Una combinación explosiva con resultados que nos harán la tarea de creer que seguimos en una página web bastante difícil. Os presento el sistema solar, con CSS.

Desde luego algo impresionante hasta que punto ha avanzado el desarrollo web, y es que cada vez se logran efectos más trabajados y complejos. De hecho se llegan a hacer juegos con HTML5 que se ejecutan directamente en el navegador, y con la magia de JavaScript y CSS, logramos resultados que, como hemos visto con el sistema solar, no envidian nada a aplicaciones que se ejecutan en dispositivos móviles, algo muy importante, ya que nos damos cuenta que, con lenguajes más simples, conseguimos productos igual de bonitos.

¿Habéis utilizado las hojas de estilo CSS? ¿Conocéis algún truco que os gustaría compartir?