En el desarrollo web hay dos lenguajes que son utilizados de forma habitual en cualquier proyecto, el HTML y el CSS. Mientras que el HTML se encarga de la estructura y composición de la web, el lenguaje de programación CSS se centra en la apariencia y aspecto visual de la misma.
El uso de CSS junto a HTML ha permitido una mayor flexibilidad a la hora de diseñar un sitio web, consiguiendo mejorar su aspecto visual e incrementando su calidad y usabilidad.
A continuación, veremos qué es y para qué sirve CSS, explicando las características de funcionamiento más importantes de este lenguaje.
Qué es el lenguaje CSS
El lenguaje CSS (Cascading Style Sheets) o de hojas de estilo en cascada se utiliza para organizar la presentación y el apartado visual de una página web. El CSS es el encargado de controlar la apariencia de una web escrita en el lenguaje HTML. Cuando se desarrolla o diseña un sitio web con HTML, el código CSS se encarga de darle la apariencia que se desee.
Con HTML y CSS se tiene separada la estructura y la presentación de un sitio web, permitiendo que los cambios de aspecto del sitio no afecten a su funcionamiento.
Te puede interesar Cómo hacer una infografía para tu marca o negocio
Cómo funciona el lenguaje de programación CSS
CSS actúa como una capa entre el código HTML y los navegadores web que permite cambiar su aspecto de forma mucho más fácil y sencilla. Desde CSS se puede controlar la presentación de distintos elementos como las fuentes, los colores, márgenes, menús, etc. La estructura de la web se puede dividir por zonas y partes en CSS, asignando unas propiedades específicas para cada una. Modificando los valores de esas propiedades se puede ir cambiando el aspecto visual de la web.
Para utilizar CSS en un documento HTML se pueden utilizar dos formas, incluyéndose dentro del propio código HTML, o desde un archivo externo.
Insertar CSS en HTML
Para incluir código CSS dentro de una estructura HTML hay que hacerlo utilizando la etiqueta grupal de HTML “Style”. El código CSS debe incluirse dentro de esta etiqueta, como por ejemplo:
Con este código se le está indicando al HTML que todos los párrafos utilizarán la fuente Verdana y en color negro.
Te puede interesar Qué es un archivo index HTML y cómo puedes crear uno
Te puede interesar Cómo elaborar la ficha técnica de un producto en tu e-commerce
Utilizar un archivo de hoja de estilos
La forma habitual de trabajar con CSS es en un archivo independiente del HTML que se guarda en formato de texto .css. Para poder utilizar ese archivo que contiene el código CSS en un documento HTML hay que llamarlo desde la etiqueta “head”.
En el siguiente ejemplo podemos ver cómo se llama al archivo CSS (style.css) que contiene el código CSS, desde un documento HTML:
Hemos visto qué es CSS y cómo es fundamental para poder cambiar el aspecto visual de una página web sin tener que modificar su código HTML. Utilizando una hoja de estilo es mucho más sencillo realizar cualquier cambio visual dentro de un sitio web como el color de un texto, la ubicación de un menú o los márgenes de cualquier elemento.
CSS es un lenguaje muy sencillo e intuitivo que tiene una curva de aprendizaje muy suave, por lo que en poco tiempo se puede programar código avanzado para controlar todo el aspecto visual de una página.