✅Introducción al CSS: Estructura Básica, Reglas y Ejemplos Prácticos

El CSS es muy sencillo de aprender, aunque al principio pueda parecer algo complejo. Al igual que sucede con HTML, en un solo día es posible entender su funcionamiento básico y empezar a realizar modificaciones simples en cualquier sitio web.

CSS es la clave para transformar una página estática en una interfaz atractiva, profesional y adaptada a cualquier dispositivo. Aquí te explico de forma sencilla cómo funciona, su estructura y algunos ejemplos prácticos para que puedas empezar a personalizar tu web hoy mismo.

¿Qué es CSS y qué permite hacer?

CSS (Cascading Style Sheets) es el lenguaje que da diseño y estilo a las páginas web. Mientras que HTML define la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de que todo luzca bien, respetando márgenes, colores, tipografías, alineaciones y más.

Con CSS se puede:

• Personalizar colores y tipografías.
• Ajustar márgenes, paddings y disposición de elementos.
• Crear animaciones y transiciones suaves.
• Aplicar estilos al interactuar con la web (hover, active).
• Hacer que la web sea responsive (que se adapte a móviles y tablets).

La estructura básica de CSS

Cualquier bloque de código CSS sigue la misma lógica:

selector {
   propiedad: valor;
}

Explicación rápida:

• Selector: el elemento al que se le aplicará el estilo (por ejemplo, p, .clase, #id).
• Propiedad: lo que se quiere modificar (color, tamaño, margen…).
• Valor: el ajuste que se le da (ejemplo: red, 20px, center).
• Punto y coma (;): separa cada regla.
• Llaves {}: delimitan el bloque de código.

Ejemplo simple:

h1 {
   color: blue;
   font-size: 32px;
   margin-bottom: 20px;
}

Este código hará que todos los títulos h1 sean azules, tengan una fuente grande y un margen inferior.

Selectores en CSS: ¿cuándo usar punto, almohadilla o ninguno?

En CSS, los selectores se utilizan para apuntar a los elementos HTML que se quieren estilizar. Según el tipo de selector, se debe usar un símbolo específico o ninguno. Aquí te explico las diferencias básicas:

1. Selector de clase (. punto)

El punto (.) se utiliza para seleccionar elementos que tienen una clase específica.
En HTML, las clases se declaran con class="nombre", y en CSS se llaman usando un punto.

Ejemplo:

<p class="destacado">Este párrafo tiene una clase.</p>

.destacado {
   color: red;
   font-weight: bold;
}

Aquí, .destacado es un selector de clase que aplicará sus estilos a cualquier elemento que tenga esa clase.

Se usa cuando se quiere aplicar estilos a múltiples elementos que comparten la misma clase.

2. Selector de ID (# almohadilla)

La almohadilla (#) se usa para seleccionar un elemento que tiene un ID único.
En HTML, los IDs se declaran con id="nombre", y en CSS se llaman usando #.

Ejemplo:

<h1 id="titulo-principal">Hola Mundo</h1>

#titulo-principal {
   font-size: 36px;
   color: blue;
}

En este caso, #titulo-principal es un selector que solo aplicará el estilo a un único elemento con ese ID.

Se usa para elementos únicos que no se repiten, como encabezados o contenedores específicos.

3. Selector de etiqueta (sin símbolo)

Cuando no se utiliza ningún símbolo, CSS selecciona directamente una etiqueta HTML.

Ejemplo:

<p>Este párrafo es general.</p>
<p>Este también.</p>

p {
   font-size: 18px;
   line-height: 1.5;
}

Aquí, p selecciona todos los párrafos (<p>) de la página y les aplica los estilos.

Se usa cuando se quiere afectar a todos los elementos de un tipo (todos los h1, todos los div, etc.).

¿Y si los combino?

Es muy común combinar selectores para ser más específico:

p.destacado {
   color: green;
}

Este selector afectará solo a los párrafos <p> que además tengan la clase destacado.

También es posible usar combinaciones de ID y etiquetas:

#contenedor p {
   margin-bottom: 20px;
}

Aquí, se aplicará el margen solo a los <p> que estén dentro de un elemento con el ID contenedor.

Resumen rápido:

Propiedades básicas que puedes usar

• color: color del texto.
• background-color: color de fondo.
• padding: espacio interno entre el borde y el contenido.
• margin: espacio exterior respecto a otros elementos.
• font-size: tamaño de la fuente.
• border: bordes.
• text-align: alineación del texto.
• width y height: ancho y alto.

Tabla de propiedades CSS y ejemplos de valores

Pseudoclases: hover, active y más

Las pseudoclases permiten aplicar estilos cuando el usuario interactúa con la web.

Ejemplos prácticos:

a:hover {
   color: #13b0a0;
   text-decoration: underline;
}

button:active {
   background-color: #009975;
}

• :hover: cambia el estilo al pasar el cursor por encima.
• :active: cambia el estilo cuando el elemento está siendo presionado.

Animaciones simples con CSS

CSS también permite crear animaciones sin necesidad de JavaScript.

Ejemplo de «fade in»:

@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}

.box {
   animation: fadeIn 2s ease-in;
}

La caja .box aparecerá con una transición de opacidad suave durante 2 segundos.

Efecto de «zoom» al pasar el ratón:

button:hover {
   transform: scale(1.1);
   transition: transform 0.3s ease;
}

Media Queries: hacer tu web responsive

Con media queries, CSS permite adaptar el diseño según el tamaño de pantalla, algo esencial para que tu web funcione bien en móviles y tablets.

Estructura de una media query:

@media (max-width: 768px) {
   selector {
      propiedad: valor;
   }
}

Esta media query aplicará los estilos solo cuando la pantalla sea de 768 píxeles o menos (típico de tablets o móviles).

Ejemplo práctico:

@media (max-width: 768px) {
   h1 {
      font-size: 24px;
      text-align: center;
   }

   .container {
      padding: 10px;
   }
}

En pantallas pequeñas:

• El título h1 será más pequeño y estará centrado.
• La clase .container tendrá menos padding para ahorrar espacio.

También se pueden usar otros rangos:

@media (min-width: 1024px) {
   /* Estilos para pantallas grandes (ordenadores de escritorio) */
}

¿Qué se puede lograr con CSS?

• Crear diseños profesionales sin depender de constructores visuales.
• Personalizar cualquier tema o plantilla.
• Ajustar pequeños detalles sin modificar el código PHP.
• Mejorar la experiencia de usuario con transiciones, animaciones y efectos visuales.
• Adaptar la web a cualquier dispositivo con media queries.

Conclusión

Saber CSS es una habilidad imprescindible, incluso para realizar modificaciones pequeñas como cambiar colores, ajustar márgenes o personalizar botones. Con solo entender la estructura y practicar un par de horas, es posible darle un toque único a cualquier página web y tener el control total del diseño.

Dominar lo básico de CSS te ahorrará mucho tiempo y te permitirá adaptar cualquier sitio web a tu estilo o al de tus clientes.