ACTIVIDAD # 2 - LENGUAJE CSS
¿Qué es CSS?
CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets).
Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir,
cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje HTML que se encarga del
contenido básico de las páginas.
Se les denomina hojas de estilo «en cascada» porque puedes tener varias hojas y una de ellas con
las propiedades heredadas (o «en cascada») de otras.
Para muchas personas una simple plantilla de blog es suficiente. Aun así, cuando quieras
personalizar la apariencia de un sitio necesitarás implementar CSS que, en conjunto con un
buen CMS, te ayudará a potenciar el alcance de tu contenido.
¿Para qué sirve CSS?
Con CSS puedes crear reglas para decirle a tu sitio web cómo quieres mostrar la información y
guardar los comandos para elementos de estilo (como fuentes, colores, tamaños, etc.) separados
de los que configuran el contenido.
Además, puedes crear formatos específicos útiles para comunicar tus ideas y producir experiencias
más agradables visualmente para los usuarios del sitio web.
Ventajas de CSS
El lenguaje CSS tiene la ventaja de ser mucho más simple, por lo que implica menos código y
probabilidad de errores, así como una mayor velocidad de carga y facilidad de lectura. Además,
con él tienes una mayor gama de posibilidades de edición para hacer que tu sitio luzca tal como
quieres.
Al desarrollar una página web es necesario hacer énfasis en la importancia de los elementos
visuales para comunicar un mensaje. La presentación de los datos de una empresa y la usabilidad
de la plataforma son factores fundamentales para atraer visitantes a tu sitio y retener su atención
en el contenido que presentas. Algunas ventajas adicionales en el uso de CSS son que:
Optimiza la edición
Los sitios web de algunas empresas contienen grandes cantidades de información que deben ser
accesibles a los usuarios. Homologar los estilos de todos los accesos a esta información puede ser
complicado si no se cuenta con una herramienta que facilite el proceso. CSS permite crear estilos
que pueden aplicarse a todas las páginas de un sitio web. Esto ahorra tiempo y posibilita crear una
imagen de la marca a través de tipografías, colores y recursos visuales.
Facilita la accesibilidad al usuario
La multiplicidad de visitantes de un sitio web es tan amplia como la diversidad de dispositivos
utilizados para acceder a ellos. Al momento de diseñar una página es necesario tener presentes las
posibilidades de interacción y diferencias en la presentación de contenidos en distintos
dispositivos. Adecuar la plataforma para medios de acceso como teléfonos, tabletas,
computadoras de escritorio o laptops puede resultar una tarea complicada.CSS tiene la ventaja de
facilitar la accesibilidad al usuario, gracias a las hojas de estilo estandarizadas.
Promueve la creatividad
El uso de CSS para la construcción de páginas web tiene la ventaja de permitir explotar la
creatividad de los diseñadores de manera rápida e intuitiva. Esto acelera el proceso de
personalización de los sitios, que pueden ser construidos con especificaciones claras o bien
sujetarse a las particularidades de los distintos navegadores.
Al construir una imagen de marca es importante modificar, innovar y proponer soluciones. CSS
simplifica esta tarea para los desarrolladores.
Prioriza la limpieza del código
Una estrategia común, pero poco eficiente, consiste en escribir las instrucciones de un programa
en lenguaje HTML. Esto implica la redacción de una gran cantidad de líneas de código que se
intercalan con el contenido de un sitio web.
Al utilizar CSS puedes separar todo el código relacionado con el estilo de un sitio web
del contenido base de una página, que puede estar en lenguaje HTML. De este modo, mantienes
una limpieza en ambos conjuntos de información y evitarás tener líneas de código de
contenido interfiriendo entre sí.
¿Cómo funciona CSS?
CSS funciona como complemento a la información que forma parte de un sitio web. Mientras que
el código en HTML incluye todos los datos, el código en CSS se encarga de darles formato y
presentarlos visualmente a través de un navegador.
Al acceder a un sitio web el navegador debe rastrear la información contenida en el HTML y
traducirla a un DOM (o modelo de objetos del documento). Estos objetos deberán ser conjuntados
con los bloques de código correspondientes en CSS para que el estilo elegido sea aplicado a ellos y
aparezcan en el formato asignado en el computador.
EJERCICIO
Teniendo como base el ejercicio de la actividad # 1. Abra el explorador y cree una carpeta en la
raíz llamada Diseño_Web dentro de esa carpeta cree otras dos carpetas llamadas css y media.
Dentro de la carpeta Diseño_Web guarde el archivo koala.html creado en la actividad # 1. Dentro
de la carpeta media guarde los archivos koala.jpg y logotipo.gif. Ahora entre a Sublime Text y cree
un archivo llamado estilo.css y escriba el siguiente código:
Recuerde que este archivo debe quedar guardado dentro de la carpeta css que creó
anteriormente.
Cerciórese que la ruta de las imágenes del archivo HTML queden de la siguiente manera en las
respectivas líneas del archivo koala.html:
<img src="media/logotipo.gif" width="189" height="57" alt="logo" />
<img src="media/koala.jpg" width="200" height="200" alt="foto" />
Al finalizar pruebe abrir el archivo koala.html en el navegador. Verá la diferencia ahora de la hoja
de estilos con respecto a como se veía cuando solo tenia el html.
