Fundamentos de CSS

CSS (Cascading Style Sheets) es el lenguaje que le da estilo a tu página web, utilizado para describir la presentación de un documento HTML. Mientras HTML estructura el contenido de una página web, CSS se encarga de su apariencia visual: el diseño, los colores, el tamaño de las fuentes, la disposición de los elementos en la pantalla, entre otros aspectos.

¿Cómo afecta CSS a WordPress?

En WordPress, CSS es clave para hacer que tu sitio web tenga un aspecto único. Sin CSS, una página web sería solo texto e imágenes en un fondo blanco, sin ningún estilo atractivo. Cuando instalás un tema en WordPress, ese tema incluye una hoja de estilo CSS que define cómo se ve tu sitio. Cambiar o personalizar ese CSS te permite ajustar el diseño a tu gusto.

¿Por qué es importante CSS?

• Personalización: Permite personalizar completamente el aspecto de un sitio web. Desde pequeños cambios como el color de un botón, hasta el diseño completo de una página.

• Consistencia: Aplicando CSS a un sitio, se garantiza que todas las páginas mantengan el mismo estilo visual, asegurando una experiencia coherente para los usuarios.

• Separación de contenido y diseño: CSS permite separar el contenido HTML del diseño, lo que facilita tanto la creación de contenidos como su actualización. Esto mejora el rendimiento y la mantenibilidad de los sitios web.

¿Cómo funciona CSS?

CSS se basa en reglas que definen cómo los elementos HTML deben verse en la pantalla. Cada regla CSS incluye:

• Selectores: Determinan qué parte del HTML afectará la regla (ej: h1, p, .clase, #id).

• Propiedades y valores: Definen cómo se va a modificar el aspecto de esos elementos (ej: color: blue;, font-size: 16px;).

selector {
   propiedad: valor;
}

Principio de la Cascada en CSS

El principio de la cascada es fundamental para entender cómo funciona CSS. La cascada dicta cómo se aplican las reglas de estilo cuando existen múltiples reglas que afectan a un mismo elemento en una página web.

Básicamente, la cascada determina qué estilo tiene prioridad cuando hay varios estilos que podrían aplicarse al mismo elemento. El navegador decide cuál regla aplicar basándose en tres factores principales:

1. Especificidad: Cuánto “peso” tiene una regla. Cuanto más específico es un selector, más prioridad tendrá sobre otros menos específicos. Por ejemplo, un estilo definido para un id tiene mayor prioridad que uno definido para una clase.

p { color: blue; } /* Aplica a todos los párrafos */
.clase { color: red; } /* Aplica a todos los elementos con la clase */
#id { color: green; } /* Aplica solo al elemento con este id */

2. Orden de las reglas (Último en definirse, primero en aplicarse): Si dos reglas tienen la misma especificidad, la que se escribió más abajo en el archivo CSS es la que se aplica. Es decir, si se define el color de un texto dos veces con el mismo selector, se tomará el último valor.

h1 { color: red; } /* Primer regla */
h1 { color: blue; } /* Esta es la que se aplicará, por estar última */

3. Uso de !important: Una regla marcada con !important sobrescribe cualquier otra, sin importar la especificidad o el orden. Sin embargo, usar !important no es recomendable de forma frecuente, ya que dificulta la gestión de los estilos.

p { color: red !important; } /* Esta regla se aplicará aunque haya otras más específicas o definidas después */

¿Cómo funciona el CSS en WordPress?

En WordPress, CSS se aplica a través de archivos vinculados a los temas y plugins que estás usando. El archivo principal que contiene las reglas de estilo de un tema es el style.css. Este archivo está en la raíz de la carpeta del tema y define cómo se verán los elementos principales de tu sitio: los encabezados, párrafos, imágenes, botones, menús, etc.

Hoja de estilo (style.css): Es el archivo principal que define todos los estilos de un tema de WordPress. Aquí es donde se pueden agregar, modificar o eliminar reglas de estilo que afecten la apariencia del sitio.

¿Dónde se encuentra el CSS en WordPress?

1. Archivo style.css del tema: Como ya mencionamos, este archivo es el principal responsable del estilo visual del sitio. Se encuentra en la carpeta del tema activo y es donde WordPress busca por defecto los estilos aplicables a todo el sitio.

• Ubicación típica: /wp-content/themes/tu-tema/style.css

2. CSS personalizado en el Personalizador: WordPress te ofrece una herramienta más accesible para añadir CSS sin tocar el archivo style.css. Podés encontrarla en el panel de control de WordPress, yendo a Apariencia > Personalizar > CSS adicional. Aquí podés escribir reglas CSS que se aplicarán directamente al sitio, sin editar archivos manualmente.

3. Temas hijos (Child Themes): Es recomendable que, si vas a hacer muchas modificaciones en el CSS, utilices un tema hijo. Un tema hijo hereda todas las funcionalidades y estilos del tema padre, pero te permite modificar el CSS de manera independiente. Esto es útil para que tus personalizaciones no se pierdan cuando el tema original se actualice.