CSS (Cascading Style Sheets), que podríamos traducir como hojas de estilo en cascada, es un lenguaje que se utiliza conjuntamente con HTML para aplicar diseño a una página web. Estas hojas de estilo permiten una separación real entre contenido y apartado gráfico. Esto quiere decir que con HTML nos preocuparemos en meter el contenido de la web (párrafos de texto, imágenes, enlaces, etc. ) y con CSS haremos que dicho contenido resulte atractivo (definiendo colores en los textos, tamaños, imágenes de fondo, etc.).
Haciendo esta separación entre lo que es contenido y lo que es el apartado gráfico conseguimos varias ventajas de las cuales, a groso modo, algunas de ellas intentaré detallar. En primer lugar organización, ya que ambos aspectos están diferenciados, podremos modificar los estilos de una web sin tener que modificar nada directamente en las etiquetas HTML. Por otro lado, ahora podremos acceder a ciertas propiedades de CSS con JavaScript a las que antes no teníamos acceso (o al menos era mucho más complejo modificar), así podemos hacer que la web sea estéticamente más dinámica. Por último, al haber esta separación física entre HTML y CSS, desde algunos navegadores se pueden personalizar los estilos (textos más grande o colores más llamativos) o simplemente desactivarlos. Esto es de gran utilidad para personas con deficiencias visuales, lo que hace que la web se más accesible.
El sistema de implementación es sencillo. Dentro de las etiquetas de HTML se pone un marcador para poder localizarlas después dentro del archivo CSS. Este marcador puede ser bien un id (id) cuando el elemento será único o una clase cuando pueda repetirse, por ejemplo:
<p id="estilo-id"> texto ejemplo </p>
<p class="estilo-clase"> texto ejemplo </p>Aquí, la palabra estilo dentro de la etiqueta de párrafo, nos permite localizar la etiqueta a la que daremos estilo y luego desde CSS le daremos el estilo (color, tamaño, etc.). Cuando el marcador que usamos es un id lo referenciaremos con # y cuando sea una clase con ., por ejemplo:
#estilo-id{
color:#ffffff;
}
.estilo-clase{
color:#ffffff;
}Habitualmente las hojas de estilo las definiremos en un archivo externo que vincularemos dentro de un docuemento HTML, lo que permite a una web tener unos estilos conjuntos en todas sus páginas. Esto facilita la actualización y el mantenimiento del sitio, ya que sólo es necesario cambiar el archivo CSS en un lugar para aplicar los cambios en todas las páginas del sitio.
Deja una respuesta