CSS

CSS son las siglas en inglés de Cascading Style Sheets, es decir, Hojas de Estilo en Cascada. 

CSS es un lenguaje de diseño que permite definir la presentación y estilo de un documento HTML, es decir, controla la apariencia de una página web.

Funciona mediante la aplicación de reglas a los elementos HTML, permitiendo especificar cómo se debe mostrar una página web en el navegador. 

En resumen, CSS describe cómo se tiene que mostrar un documento definiendo su diseño, formato y layout. Para ello en él se incluyen aspectos como los colores, el diseño de las páginas y las tipografías a seguir entre otros muchos aspectos.

¿Qué es CSS? Definición técnica

CSS es un estándar desarrollado con el objetivo de separar el contenido de una web (HTML) de su presentación (CSS).

Antes de la llegada del CSS, el estilo de una página web se definía directamente dentro del código HTML. Esto dificulta el mantenimiento del sitio y la tarea de lograr un diseño coherente en toda la web.

Separando el diseño del contenido, el CSS permite a los desarrolladores y diseñadores web modificar elementos y realizar cambios en un solo lugar y que estos cambios se apliquen a toda la web.

Componentes básicos de CSS

Para entender mejor cómo funciona CSS, es necesario conocer los componentes básicos de este lenguaje:

1. Selectores. Determinan el elemento HTML al que se le va a aplicar el estilo o regla CSS.
2. Declaraciones. Son unidades formadas por una propiedad de estilo y su valor. Ej. color: blue;
3. Propiedades: son las características de un elemento que podemos modificar. Algunos ejemplos de propiedades son:

a. Color
b. Background.color. Color de fondo.
c. font-family. Selecciona una fuente.
d. font-size. Determina el tamaño de la fuente

4. Valores. Expresan las diferentes opciones que puede tomar una propiedad, pueden ser palabras, números, porcentajes, etc.
5. Comentarios (/* */). Añaden notas sin que puedan ser interpretadas en el navegador.

Estos son los componentes más básicos que necesitas conocer antes de construir cualquier hoja de estilos en CSS.

Tipos de CSS

Existen tres tipos de CSS:

● Externo. Define los estilos desde un archivo .css externo y se enlaza al HTML mediante la etiqueta

<link>

. Es más organizado que los demás y favorece la reutilización de los estilos entre páginas.

● Interno. Se define en el encabezado del documento HTML, entre las etiquetas <style type="text/css"> </style> . Permitiendo aplicar diferentes estilos a todo un documento sin repetir el código en cada elemento. No es recomendable para sitios grandes por falta de organización, pero sí que es útil para pruebas o estilos puntuales en una sola página.

● En línea. Se emplea para dar estilo a un elemento concreto dentro del HTML. No se recomienda en otros casos ya que la gestión del sitio web se convierte en algo muy complicado cuando solo se utiliza CSS en línea.

Ventajas del uso de CSS

El uso de CSS otorga numerosas ventajas a los diseñadores y desarrolladores web:

● Accesibilidad y usabilidad del sitio. Permite adaptar fácilmente el diseño, tamaño o colores para mejorar la experiencia de usuario.

● Facilita los cambios. Con CSS podrás realizar cambios en el diseño de manera sencilla, sin tener que modificar el código HTML, solo tendrás que editar el CSS.

● La separación entre el HTML (estructura y contenido) y el CSS (presentación visual) es clara. Esto permite una mejor legibilidad del código y aumenta el rendimiento del sitio.

● Al utilizar CSS, podrás reutilizar estilos entre diferentes páginas, de esta forma podrás aplicar un mismo diseño a toda una página web.

● El diseño de una web será fácilmente adaptable entre dispositivos tan solo modificando el CSS.

Diferencias entre CSS y HTML

Aunque CSS y HTML están relacionados y se utilizan de forma conjunta en el desarrollo y diseño de una web, sus diferencias son claras:

● Propósito. HTML define la estructura y el contenido de una página web, mientras que CSS se encarga del diseño y del formato visual.

● Los elementos que utilizan no son iguales. Mientras que el lenguaje HTML utiliza etiquetas (como "p", "div" o "header"), CSS utiliza selectores para aplicar los diferentes estilos.

● Ambos son lenguajes, sin embargo, HTML es un lenguaje de marcado utilizado para estructurar documentos y CSS es un lenguaje de hojas de estilo para dar formato.

● Funcionalidad. Mientras el HTML se enfoca en la organización del contenido, CSS da estilo y forma a esos elementos, determinando su apariencia visual.