{"id":53375,"date":"2026-05-28T15:01:57","date_gmt":"2026-05-28T08:01:57","guid":{"rendered":"\/es\/tutoriales\/?p=53375"},"modified":"2026-05-28T15:01:59","modified_gmt":"2026-05-28T08:01:59","slug":"clase-css","status":"publish","type":"post","link":"\/es\/tutoriales\/clase-css","title":{"rendered":"\u00bfQu\u00e9 es una clase CSS? Gu\u00eda completa para usar el selector CSS"},"content":{"rendered":"

Una clase CSS es un atributo que se usa en HTML para seleccionar e indicar el estilo de elementos específicos<\/strong>. Te permite aplicar al mismo tiempo el mismo conjunto de reglas de estilo, como el color, el tamaño de la fuente o el espaciado, a varios elementos en lugar de programar cada uno por separado.<\/p>

Sigue estos pasos para usar una clase CSS para dar estilo a tu web:<\/p>

    \n
  1. Abre tu hoja de estilos CSS<\/strong>. Este es el archivo (como style.css<\/strong>) en el que escribirás las reglas de estilo.<\/li>\n\n\n\n
  2. Define la clase CSS<\/strong>. Crea una “regla” dándole un nombre a tu clase, como .my-class<\/strong>, e indicando sus propiedades, como color: blue;.<\/li>\n\n\n\n
  3. Abre tu documento HTML<\/strong>. Este es el archivo (como index.html<\/strong>) que contiene el contenido al que quieres dar estilo.<\/li>\n\n\n\n
  4. Encuentra el elemento HTML al que quieres dar estilo<\/strong>. Identifica el elemento que quieres cambiar, como un párrafo <\/strong> o una división <\/strong>.<\/li>\n\n\n\n
  5. Asigna la clase CSS al elemento HTML<\/strong>. Añade el atributo class=”my-class”<\/strong> a la etiqueta de apertura del elemento para vincularlo con la regla de estilo que definiste.<\/li>\n<\/ol>

    ¿Cómo funciona una clase CSS?<\/h2>

    Una clase de Hojas de Estilo en Cascada (CSS)<\/a> funciona al crear una “etiqueta” reutilizable que vincula la estructura de tu Lenguaje de Marcado de Hipertexto (HTML) con tus reglas de CSS<\/strong>.<\/p>

    Cuando asignas una clase a un elemento HTML<\/a>, le indicas al navegador que busque la definición de estilo de esa clase en la hoja de estilos e la aplique a ese elemento específico.<\/p>

    Esto crea una separación de responsabilidades muy eficaz. Tu archivo HTML se encarga del contenido (“qué”), mientras que tu hoja de estilos se encarga de la presentación (“cómo se ve”).<\/p>

    Por ejemplo, imagina que tienes cinco cuadros de “alerta” en tu web y que todos necesitan un borde rojo e texto en negrita. En lugar de dar estilo a cada cuadro por separado, puedes crear una sola clase llamada .alert<\/strong> en tu CSS.<\/p>

    Luego, solo añades class=”alert”<\/strong> a cada una de las cinco cajas en tu HTML. Si más adelante decides cambiar el borde a azul, solo tendrás que hacerlo una vez en la definición de tu clase .alert<\/strong> e automáticamente se actualizarán las cinco cajas.<\/p>

    ¿Cómo usar una clase de CSS para dar estilo a un elemento HTML?<\/h2>

    Para dar estilo a un elemento HTML con una clase CSS, abre tu hoja de estilos CSS e define las reglas de estilo. Luego, abre tu archivo HTML, busca el elemento al que quieras dar estilo e indícale esa clase CSS<\/strong>.<\/p>

    1. Abre tu hoja de estilos CSS<\/h3>

    Primero, necesitas un lugar donde escribir tus reglas de CSS. Tienes dos opciones:<\/p>