Introducción

Hola y bienvenido/a, a un nuevo post. Hoy te hablaré sobre un tema muy interesante que como desarrollador debes conocer, ya que es una parte esencial del diseño web y la aplicación de estilos a las páginas web. ¿De qué te estoy hablando? De CSS, que significa Hojas de Estilo en Cascada, o en inglés, Cascading Style Sheets. Si no sabes qué es CSS, continúa leyendo.

CSS, es como si fuera, la ropa que vestimos, eso transformado al desarrollo web sería equivalente a la ropa (colores) que viste a una página web, mientras que HTML, es con lo que se construye el esqueleto de una página web, con CSS pintamos de colores dicha web.

En este post daremos un recorrido introductorio a CSS y a su funcionamiento, veremos su sintaxis básica, cómo se crea una regla de estilo, conoceremos su concepto. Asimismo, veremos algunos conceptos básicos como regla, propiedad y valor. También veremos cómo crear reglas de estilo básicas para estilizar ciertos elementos HTML. Además, conocerás de forma general conceptos como diseño responsive, modelo de cajas, y te presentaré algunas ventajas y desventajas que definen lo bueno y malo de utilizar CSS. Te proporcionaré recursos útiles y referencias que te servirán para adentrarte aún más en el mundo del diseño web y específicamente en CSS.

Así que esto se pondrá interesante por esa razón te invito a seguir leyendo, porque no habrá desperdicio de contenido

Concepto simple de CSS

Comencemos hablando de CSS, o Cascading Style Sheets, CSS es una herramienta esencial en el mundo del diseño web, ya que es el medio o técnica que utilizamos cuando queremos darle estilos a una página web. CSS trabaja en conjunto con HTML el cual proporciona la estructura de una página web.

Con CSS podemos trasformar una página web simple y visiblemente fea, en algo visualmente atractivo y profesional. Pero en si ¿qué es CSS?

¿Qué es CSS?

Un concepto más formal sería el siguiente, CSS es un lenguaje de hojas de estilo que se utiliza para describir la presentación de un documento escrito en HTML. CSS controla cómo se visualiza el contenido en la pantalla, en papel, en la voz o en otras formas. Por ejemplo, con CSS, puedes controlar el color del texto, el tamaño de la fuente, el espaciado entre párrafos, cómo se dividen las columnas, y mucho más.

Un poco de historia y evolución de CSS

Si eres desarrollador de la vieja escuela, recordaras cuando teníamos que definir estilos dentro de las etiquetas del HTML, ¿recuerdas cómo se veía el código? Eso era algo un poco tedioso, ya que para aplicar estilos se utilizaban los atributos de las etiquetas HTML, lo que hacía que el mantenimiento y la modificación de los estilos fueran una completa odisea, especialmente cuando queríamos cambiar las propiedades de un elemento en específico, esto además de ser, poco productivo, también era poco eficiente.

Con la introducción de CSS, los estilos se pueden definir en un archivo separado, lo que permite una mayor flexibilidad y un mayor control sobre la apariencia de un sitio web.

Además, al separar la estructura del contenido, se facilita el mantenimiento y la modificación de los estilos, ya que solo es necesario modificar un archivo CSS en lugar de varias etiquetas HTML.

A lo largo de los años, CSS ha evolucionado y se han introducido nuevas características y funcionalidades. Algunos hitos importantes en la evolución de CSS son:

• CSS1: Fue la primera versión de CSS, lanzada en 1996. Introdujo las reglas básicas de estilo, como la definición de colores, fuentes, márgenes y bordes.
• CSS2: Lanzada en 1998, esta versión agregó nuevas características como posicionamiento, flotación, animaciones y transformaciones.
• CSS3: Esta versión, lanzada en 1999, introdujo una serie de módulos que añadieron aún más funcionalidades a CSS, como sombras, gradientes, transiciones y animaciones avanzadas.
• CSS4: Aunque no existe una versión oficial de CSS4, se han introducido nuevos módulos y características bajo este nombre. Estas incluyen funcionalidades como Flexbox, subgrid, soporte para fuentes variables y estilos de impresión mejorados, container queries entre otras novedades.

Además de estas versiones oficiales, también se han introducido una serie de propuestas y especificaciones en curso, como CSS Grid Layout y CSS Custom Properties, entre otras nuevas funcionalidades (que quizás las veamos en un post futuro), que continúan expandiendo las capacidades de CSS y permiten a los desarrolladores crear diseños más complejos y personalizados.

¿Cómo se aplican los estilos CSS a páginas HTML?

CSS puede aplicarse a HTML de tres maneras diferentes, cada una con sus ventajas y usos específicos:

• CSS inline: Se utiliza para aplicar estilos únicos a un elemento individual. Aunque es útil para pruebas rápidas, su uso no se recomienda para estilos a gran escala debido a su naturaleza no escalable.
• CSS interno: Se coloca dentro de la etiqueta <head> de un documento HTML. Es ideal para estilos específicos de una sola página. Es el segundo método que más se utiliza de las tres formas que hay para insertar estilos CSS en una página web
• CSS externo: Se utiliza para definir estilos en un archivo separado, que luego se enlaza a un documento HTML. Esta es la práctica más recomendada, ya que mantiene los estilos organizados y facilita el mantenimiento de sitios web más grandes.

Formas de insertar CSS en una página web

CSS en linea

Se aplican directamente a los elementos HTML mediante el atributo style.

<p style="color: blue; font-size: 20px;">Este es un párrafo con estilo en línea.</p>

CSS interno

Se colocan dentro de la etiqueta <style> en la sección <head> del documento HTML.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Este es un párrafo con estilo interno.</p>
</body>
</html>

CSS externo

Los estilos se escriben en un archivo separado con extensión .css, que luego se vincula al documento HTML.

CSS

body {
  background-color: lightgray;
}

h1 {
  color: green;
}

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Este es un encabezado con estilo externo.</h1>
</body>
</html>

En este ejemplo, el archivo styles.css define que el cuerpo de la página tendrá un fondo gris claro y todos los encabezados <h1> serán de color verde. El archivo CSS se vincula al HTML mediante la etiqueta <link>.

Conceptos Básicos de CSS

CSS cuenta con una serie de conceptos básicos que es necesario que conozcas y que te familiarices con ellos, ya que te los encontraras por todos lados de aquí en adelante, son los siguientes:

• Hoja de estilo (CSS): Documento que contiene las reglas CSS. Se crea un archivo .css separado y se vincula al documento HTML.
• Selector: Es la parte de una regla de estilo que indica a qué elemento o elementos HTML se aplicará esa regla. Puede ser un nombre de etiqueta, una clase, un identificador, entre otros.
• Regla de estilo: Esta compuesta por una declaración de la forma, propiedad – valor.
• Declaración: Es una combinación de una propiedad y su valor, separados por dos puntos (:). puede haber múltiples declaraciones en una regla de estilo.
• Propiedad: Es la característica que recibirá determinado elemento HTML, por ejemplo; color de fuente, color de fondo, tamaño de fuente etc.
• Valor: Es el resultado final que ha recibido la propiedad, por ejemplo; color: red, background-color; blue, Font-size; 25px
• Clase: Es un nombre que se le asigna a uno o varios elementos HTML para aplicar un estilo específico. Se utiliza el selector de clase seguido de un punto para aplicar estilos a elementos con esa clase.
• ID: Es similar a una clase, pero se le asigna a un único elemento HTML. Se utiliza el selector de ID seguido de un signo numeral (#) para aplicar estilos a ese único elemento.
• Pseudo-clases y pseudo-elementos: Son selectores especiales que permiten aplicar estilos a elementos en estados específicos o a partes específicas de un elemento. Por ejemplo, con :hover aplicamos estilos cuando el cursor se sitúa sobre un elemento.
• Herencia: Es el mecanismo por el cual un elemento HTML puede heredar estilos de un elemento padre, estos estilos aplicados a un elemento padre, también se heredan a sus elementos hijos, a menos que se anulen explícitamente.
• Especificidad: Es la forma en que CSS determina qué regla de estilo se aplicará cuando hay múltiples reglas que coinciden con un mismo elemento. La especificidad se basa en el tipo de selector, la clase, el ID y otros factores.

Sintaxis de algunos de los selectores mas usados

Siempre es bueno que te vayas familiarizando con la sintaxis de algunos selectores, ya que por medio de estos, es que podemos llegar a aplicar estilos a cualquier elemento HTML

/* Selector de tipo (o etiqueta): Selecciona elementos por su nombre de etiqueta */
p {
    /* Estilos para <p> */
}

/* Selector de clase: Selecciona elementos por el atributo de clase */
.mi-clase {
    /* Estilos para .mi-clase */
}

/* Selector de ID: Selecciona un elemento por su atributo de identificación único */
#mi-id {
    /* Estilos para #mi-id */
}

/* Selector de descendientes: Selecciona todos los elementos que son descendientes de un elemento específico */
div p {
    /* Estilos para <p> dentro de <div> */
}

/* Selector de hijos directos: Selecciona los hijos directos de un elemento */
ul > li {
    /* Estilos para <li> que son hijos directos de <ul> */
}

/* Selector de adyacentes directos (hermanos adyacentes): Selecciona un elemento que es inmediatamente precedido por otro */
h1 + p {
    /* Estilos para <p> que sigue inmediatamente a <h1> */
}

/* Selector de atributos: Selecciona elementos basado en un atributo y su valor */
input[type="text"] {
    /* Estilos para <input> de tipo "text" */
}

/* Selector universal: Selecciona todos los elementos en la página */
* {
    /* Estilos globales */
}

/* Selector de pseudo-clases: Selecciona elementos en un estado específico */
a:hover {
    /* Estilos para <a> en estado hover */
}

/* Selector de pseudo-elementos: Selecciona una parte específica de un elemento */
p::first-line {
    /* Estilos para la primera línea de <p> */
}

Ventajas y Desventajas de Usar CSS

Así como todos en la vida, muchas tecnologías también pueden tener sus virtudes y limitantes, y CCS también cuenta con ciertas ventajas y desventajas, conozcamos algunas de ellas, ya que es importantes que sepamos bien lo que estamos utilizando en nuestros proyectos, ya que de eso depende la calidad de un proyecto verdaderamente profesional.

Ventajas

• Control del diseño: CSS ofrece la posibilidad de tener un control detallado sobre cómo se presentan los elementos en diferentes dispositivos y tamaños de pantalla.
• Optimización del rendimiento: CSS reduce el tiempo de carga de la página al minimizar el código HTML, por eso la importancia de utilizar preferiblemente estilos externos
• Consistencia en el diseño web: CSS facilita la aplicación de un estilo uniforme en todo el sitio web, mejorando la coherencia visual.
• Mantenibilidad: Con CSS, actualizar o cambiar el diseño del sitio web es mucho más sencillo y menos propenso a errores.
• Accesibilidad: Mejora la accesibilidad al permitir cambios en la presentación visual para adaptarse a diferentes necesidades de los usuarios.
• Diseño Responsivo: CSS facilita la creación de diseños que se adaptan a diferentes tamaños de pantalla, este es un aspecto clave para la accesibilidad móvil.

Desventajas

• Complejidad inicial: Puede ser abrumador para los principiantes debido a la variedad de propiedades y selectores.
• Compatibilidad entre navegadores: Aunque ha mejorado, aún existen diferencias en cómo los navegadores interpretan CSS, aunque en cada actualización, esa brecha se hi ido reduciendo cada vez más.
• Dependencia de las actualizaciones del navegador: Algunas propiedades más nuevas de CSS no son compatibles con versiones antiguas de navegadores.
• Riesgo de sobrecarga de código: Sin una gestión adecuada, las hojas de estilo pueden volverse extensas y difíciles de mantener.
• Problemas de rendimiento en sitios grandes: En sitios web muy grandes, la gestión ineficiente de CSS puede llevar a problemas de rendimiento

Modelo de Cajas (Box Model)

Un concepto al cual nos tendremos que acostumbrar y muy bien, es El modelo de cajas de CSS, ya que es fundamental para entender cómo se manejan los elementos en una página web. Cada elemento se representa como una caja rectangular, o así es interpretado por los navegadores.

El modelo de cajas define cómo estas cajas interactúan entre sí. El mismo Incluye márgenes (margins), bordes (borders), relleno (padding) y el área de contenido (content area).

Comprender cómo se calcula el tamaño total de estos elementos, puede hacer una gran diferencia entre un diseño web efectivo. Y uno que no lo sea.

Términos importantes del modelo de cajas

A continuación, te presento los términos importantes relacionados con el Box Model o modelo de cajas en CSS:

• Contenido (Content): Es el área donde se muestra el contenido real del elemento, como texto, imágenes o cualquier otro elemento HTML contenido dentro de él.
• Relleno (Padding): Es el espacio entre el contenido y el borde del elemento, también es posible especificar un relleno para cada lado de forma individual (arriba, derecha, abajo, izquierda) o de forma general para todos los lados.
• Borde (Border): Es la línea que rodea el contenido y el relleno de un elemento, puede tener diferentes estilos, colores y tamaños.
• Margen (Margin): Es el espacio entre el borde del elemento y los elementos adyacentes. Al igual que el relleno, se puede especificar un margen individual o general para cada lado.
• Ancho (Width): Es la medida horizontal del contenido del elemento, incluyendo el relleno, pero excluyendo el margen y el borde.
• Alto (Height): Es la medida vertical del contenido del elemento, incluyendo el relleno, pero excluyendo el margen y el borde.
• Box-sizing: Es una propiedad de CSS que determina cómo se calcula el tamaño total de un elemento, incluyendo o excluyendo el padding y el borde.
• Sus valores pueden ser:
  • content-box (tamaño del contenido),
  • padding-box (tamaño del contenido más el relleno)
  • border-box (tamaño del contenido más el relleno y el borde).
• Display: Es la propiedad de CSS que determina cómo se muestra un elemento en la página. Sus valores comunes pueden ser:
  • block (elemento de bloque)
  • inline (elemento en línea)
  • inline-block (elemento en línea con propiedades de bloque).

Conocer el funcionamiento correcto de estos términos es sin ninguna duda una ventaja para los desarrolladores, ya que de esto depende su desempeño eficiente en la industria al momento de crear proyectos reales.

Ejemplo de como funciona el Modelo de Cajas

Ejemplo básico

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    background-color: lightblue;
  }
</style>
</head>
<body>

<div class="box">Este es un cuadro simple</div>

</body>
</html>

En este ejemplo, hay un <div> con la clase .box. La caja tiene un ancho (width) de 200px, un relleno (padding) de 20px en todos los lados, un borde (border) de 5px y un margen (margin) de 10px. El background-color se aplica al área del relleno y el contenido.

Ejemplo con múltiples cajas

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 150px;
    padding: 10px;
    margin: 15px;
    border: 3px dashed red;
    float: left;
    background-color: lightgreen;
  }
</style>
</head>
<body>

<div class="box">Caja 1</div>
<div class="box">Caja 2</div>
<div class="box">Caja 3</div>

</body>
</html>

Aquí, hay tres cajas con la misma clase .box. Cada una tiene sus propias propiedades de margen, borde, relleno y contenido. Usando float: left;, estas cajas se alinearán horizontalmente si el ancho del contenedor lo permite.

Ejemplo con margen automático (centrado)

<!DOCTYPE html>
<html>
<head>
<style>
  .center-box {
    width: 50%;
    padding: 20px;
    margin: 0 auto; /* Centra la caja */
    border: 2px solid purple;
    background-color: lightyellow;
  }
</style>
</head>
<body>

<div class="center-box">Caja centrada</div>

</body>
</html>

Este ejemplo muestra cómo centrar una caja. La caja tiene un ancho del 50% del contenedor (generalmente el cuerpo de la página), un margen automático (margin: 0 auto;) que la centra horizontalmente, y un estilo de borde y fondo específico.

Diseño responsivo con CSS

Vaya concepto con el que nos topamos, el diseño responsive, el cual implica la intervención de varias técnicas que en la actualidad nos facilitan la vida a la hora de querer adaptar el contenido a determinado tamaño de pantalla.

El primer concepto es el de Media Queries, por medio de esta técnica podemos implementar distintos tamaño y medidas de forma preestablecida para que se adapten al tamaño (el que sea) de pantalla en donde sea que se muestre el contenido, esto es una gran virtud de las Media Queries, lo cual las vuelve una opción muy importante para toma en cuenta

Pues esto abre las posibilidades a tener sitios más accesibles para todas las personas sin excepción alguna y desde la mayoría o casi todos los dispositivos desde donde se acceden al contenido.

Flexbox es otra técnica estupenda en lo que respecta a crear contenido que se adapte a cualquier dispositivo, sin embargo, se hace énfasis en su limitación (si lo fuera) de trabajar de forma unidimensional, es decir, en una sola dirección, lo que significa que es posible posicionar elementos de forma horizontal o de forma vertical, lo cual lo vuelve estupendo para crear menús de navegación que se adaptan perfectamente a la pantalla mas que todo en dispositivos móviles  

Por último, pero no menos importante tenemos a CSS Grid Layout, quizás mi favorita, y tengo razones de sobra para pensar así, debido a la gran facilidad y flexibilidad que se tiene al utilizar CSS Grid para crear diseños responsive.

La mayor fortaleza de CSS Grid es su capacidad de posicionar elementos tanto de forma vertical como horizontal, lo que lo convierte en una técnica bidimensional, por tanto, eso nos permite tener infinitas posibilidades a la hora de crear diseños adaptables a cualquier tipo de pantalla

Es importantes que tengas en cuenta que en este post solo se están viendo generalidades de estos conceptos, ya que cada uno por sí solo fácilmente podría llevarse un par de posts, por tanto, te invito a estar pendiente, ya que estaré publicando y analizando detenida y detalladamente cada una de estas técnicas, ya que el caso lo amerita.

Ahora veremos unos cuantos ejemplos para que veas el funcionamiento tanto de CSS Grid, Flexbox como las Media Queries, vamos allá:

Ejemplo de Flexbox

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 20px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>

En este ejemplo, .flex-container es un contenedor Flexbox. Los <div> dentro de él se alinearán horizontalmente, con márgenes y paddings especificados.

Ejemplo de CSS Grid

<!DOCTYPE html>
<html>
<head>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
  }

  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>

Aquí, grid-container define un contenedor de Grid con tres columnas (debido a grid-template-columns: auto auto auto;). Cada <div> dentro del contenedor se coloca en una celda de la cuadrícula.

Ejemplo con media queries

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: lightblue;
  }

  .container {
    padding: 20px;
    text-align: center;
    background-color: lightgray;
  }

  /* Media query para pantallas de ancho menor a 600px */
  @media (max-width: 600px) {
    body {
      background-color: lightcoral;
    }

    .container {
      background-color: lightgreen;
      font-size: 20px;
    }
  }
</style>
</head>
<body>

<div class="container">
  <p>Cambia el tamaño de la ventana del navegador para ver el efecto de la media query.</p>
</div>

</body>
</html>

En este ejemplo, cuando la ventana del navegador es más ancha que 600px, el fondo del body es azul claro y el fondo del .container es gris claro.

Sin embargo, cuando el ancho de la ventana se reduce a menos de 600px, las Media Queries se activan y cambian el fondo del body a coral claro y el del .container a verde claro, además de aumentar el tamaño de la fuente en .container

Herramientas y recursos para aprender CSS

Aquí hay algunas herramientas y recursos excelentes para aprender CSS. Incluyo enlaces para que puedas acceder fácilmente a cada uno, te invito a experimentar con cada uno, eso sí, más de alguno tiene su nivel de complejidad que probablemente te podría abrumar, por tanto, te recomiendo cautela y avances hasta donde tu conocimiento actual te lo permite.

• Documentación Oficial de CSS (MDN): La documentación más completa y actualizada sobre CSS. Incluye guías de conceptos, tutoriales y ejemplos prácticos.
• Freecodecamp – Aprende CSS: Curso interactivo gratuito para aprender CSS paso a paso desde cero. Con desafíos de código integrados.
• CSS Diner: Juego divertido para practicar selectores CSS. Se van presentando desafíos progresivos.
• Flexbox Froggy: Juego para aprender Flexbox mediante puzles con ranas. Disponible en español.
• CSS Grid Garden: Juego similar sobre CSS Grid Layout. Completa los niveles sembrando zanahorias
• Can I Use: Permite consultar compatibilidad de propiedades CSS en distintos navegadores y versiones. Muy útil.

Conclusión

En esta pequeña guía de CSS la cual he denominado “CSS para Principiantes Una Introducción completa para Adentrarse en el Diseño Web”, hemos cubierto temas esenciales como el concepto de CSS, su funcionamiento, su sintaxis básica, así como también, conceptos fundamentales que todo desarrollador principiante debería de conocer.

De igual forma, abarcamos términos claves como el concepto de Modelo de Cajas, Diseno responsive y otras técnicas avanzadas como lo son Flexbox y CSS Grid, las cuales nos permiten tener infinitas posibilidades para estilizar y ordenas de la manera que queramos nuestros proyectos, finalmente, se adjunta algunos recursos muy útiles que pueden servir como punto de partida para profundizar aún más en el mundo del diseño web y específicamente en CSS

Por tanto, si este post te fue de utilidad y crees que te aportó algún valor, te invito a que lo compartas con tus amigos, colegas y redes sociales, para así esparcir aún más el conocimiento. No olvides dejar tu comentario acerca de qué te pareció este tema, tu feedback es muy importante para mí. Te espero en el próximo post; por ahora, es todo y en serio, gracias por leer. ¡Gracias totales!