¿Qué es una clase CSS? Guía completa para usar el selector CSS
May 28, 2026
/
Faradilla A.
/
6 min de lectura
Una clase CSS es un atributo que se usa en HTML para seleccionar e indicar el estilo de elementos específicos. 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.
Sigue estos pasos para usar una clase CSS para dar estilo a tu web:
- Abre tu hoja de estilos CSS. Este es el archivo (como style.css) en el que escribirás las reglas de estilo.
- Define la clase CSS. Crea una “regla” dándole un nombre a tu clase, como .my-class, e indicando sus propiedades, como color: blue;.
- Abre tu documento HTML. Este es el archivo (como index.html) que contiene el contenido al que quieres dar estilo.
- Encuentra el elemento HTML al que quieres dar estilo. Identifica el elemento que quieres cambiar, como un párrafo o una división .
- Asigna la clase CSS al elemento HTML. Añade el atributo class=”my-class” a la etiqueta de apertura del elemento para vincularlo con la regla de estilo que definiste.
¿Cómo funciona una clase CSS?
Una clase de Hojas de Estilo en Cascada (CSS) funciona al crear una “etiqueta” reutilizable que vincula la estructura de tu Lenguaje de Marcado de Hipertexto (HTML) con tus reglas de CSS.
Cuando asignas una clase a un elemento HTML, 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.
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”).
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 en tu CSS.
Luego, solo añades class=”alert” 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 e automáticamente se actualizarán las cinco cajas.
¿Cómo usar una clase de CSS para dar estilo a un elemento HTML?
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.
1. Abre tu hoja de estilos CSS
Primero, necesitas un lugar donde escribir tus reglas de CSS. Tienes dos opciones:
- CSS interno. Puedes colocar las reglas CSS directamente dentro del documento HTML entre las etiquetas <style></style>, que normalmente se ubican en la sección <head>. Este método es rápido para proyectos pequeños o pruebas, aunque puede hacer que el archivo HTML se vea sobrecargado.
- Hoja de estilos externa. Este es el método recomendado para la mayoría de los proyectos. Creas un archivo separado con la extensión .css, como style.css. Esto mantiene tus estilos organizados y separados de tu contenido.
Luego enlazas este archivo con tu documento HTML añadiendo una etiqueta dentro de la sección:
<head> <link rel="stylesheet" href="style.css"> </head>
Durante el resto de este tutorial, asumiremos que usas un archivo externo style.css.
2. Define la clase CSS
En tu archivo style.css, define una clase escribiendo un punto (.) seguido de un nombre que elijas. Este nombre es el selector. Luego, añade llaves {} e introduce dentro tus propiedades de CSS (las reglas).
.highlight {
font-weight: bold;
color: green;
background-color: #f0f0f0;
}Este código crea una clase llamada highlight. Cualquier elemento HTML al que le asignes esta clase tendrá texto verde en negrita sobre un fondo gris claro.
También puedes crear selectores más específicos. Por ejemplo, para aplicar estilo solo a los elementos <h1> que están dentro de un elemento con la clase highlight, escribe:
.highlight h1 {
/* This rule only applies to h1 tags inside .highlight */
color: red;
}3. Abre tu documento HTML
Ahora, abre el archivo HTML, por ejemplo, index.html, que contiene el contenido al que quieres dar estilo. Puedes hacerlo con cualquier editor de texto, como VS Code, o directamente desde el administrador de archivos de tu proveedor de Hosting.
Los clientes del Hosting web administrado de Hostinger pueden acceder al administrador de archivos desde hPanel → Sitios web → Panel → Administrador de archivos. Luego, busca y haz doble clic en el archivo HTML para abrir el editor de código.
4. Encuentra el elemento HTML al que quieres dar estilo
Revisa tu código HTML e identifica el elemento o los elementos a los que quieres dar estilo. Por ejemplo, podrías tener varios párrafos (<p>) que sirvan como advertencias o quizá quieras dar estilo a un <div> específico que contiene la biografía de una persona autora.
Piensa en qué elementos comparten un propósito o tipo de contenido en común. Por ejemplo, todas las etiquetas <h2> podrían compartir una clase, mientras que todos los botones de llamada a la acción podrían compartir otra. Agrupar los elementos de forma lógica es clave para usar las clases de manera eficaz.
💡 Consejo
Para revisar la estructura del código de tu web en la parte visible, usa la herramienta Inspeccionar elemento de tu navegador web. Accede a él haciendo clic derecho en la pantalla y seleccionando Inspeccionar.
5. Asigna la clase CSS al elemento HTML
Para aplicar tu regla de CSS, añade el atributo class a la etiqueta de apertura del elemento HTML. El valor del atributo debe ser el nombre de la clase que definiste en tu archivo CSS, pero sin el punto.
Usa la clase .highlight y aplícala a un párrafo:
<p class="highlight">This paragraph will be bold, green, and have a gray background.</p>
Puedes aplicar esta clase a tantos elementos como quieras:
<div class="highlight">This whole division gets the style.</div> <p>This is a normal paragraph.</p> <p class="highlight">This paragraph also gets the style.</p>
Después de guardar tus archivos HTML e CSS, abre el archivo HTML en tu navegador. Verás los estilos aplicados a los elementos que marcaste con la clase.
Beneficios de usar clases CSS
Usar clases CSS ofrece varias ventajas importantes en el desarrollo web, especialmente en términos de eficiencia, organización y facilidad de mantenimiento.
- Reutilización. Esta es una de las mayores ventajas. Puedes definir una regla de estilo una sola vez, por ejemplo .button-primary, y aplicar esa clase a todos los botones principales de tu sitio web. Así evitarás escribir código repetitivo para cada botón.
- Facilidad de mantenimiento. Cuando necesites actualizar el diseño de tu sitio web, las clases facilitan mucho el proceso. Por ejemplo, para cambiar el color de todos los botones principales, solo tendrás que modificar una vez la definición de la clase .button-primary en tu archivo CSS. El cambio se aplicará automáticamente a todos los elementos que utilicen esa clase.
- Organización y legibilidad. Las clases ayudan a separar el contenido (HTML) de la presentación (CSS). Esta separación hace que el código sea más limpio, semántico y mucho más fácil de leer, entender y depurar.
- Flexibilidad. Un elemento HTML puede tener varias clases al mismo tiempo. Por ejemplo, <button class=”button button-primary”> puede heredar los estilos base de .button y los estilos de color específicos de .button-primary. Este enfoque flexible y modular permite crear diseños más complejos combinando clases simples.
Consejos para dominar las clases de CSS
Dominar las clases de CSS implica ir más allá de simplemente hacer que funcionen y aplicar buenas prácticas para escribir código limpio, escalable e fácil de mantener. A continuación, encontrarás consejos que te ayudarán a escribir CSS como un profesional.
Usa nombres claros y descriptivos
El nombre de una clase debe describir qué es el elemento o por qué tiene ese estilo, no cómo está estilizado. Por ejemplo, un nombre como .alert-danger es más descriptivo y reutilizable que .red-text-bold.
Si después decides que las alertas de peligro sean azules, el nombre .alert-danger seguirá teniendo sentido, pero .red-text-bold resultará confuso. Usa nombres claros y lógicos que describan el propósito del componente.
Aprovecha otros selectores de CSS
Las clases no son la única forma de seleccionar elementos. Comprender otros selectores te ayuda a escribir CSS de forma más eficiente.
- Selector de ID. Un ID (#my-id) es similar a una clase, pero debe ser único para un solo elemento de una página. Es más específico que una clase, lo que significa que sus reglas siempre prevalecen si hay un conflicto.
- Selector de elementos. Puedes dar estilo a todos los elementos de un tipo determinado, como p o h2. Esto es ideal para establecer estilos básicos, como un tamaño de fuente predeterminado para todos los párrafos.
- Combinadores. Puedes combinar selectores para ser más específico. Por ejemplo .sidebar p selecciona solo los párrafos que están dentro de un elemento con la clase sidebar.
Minimiza las propiedades en una clase
Crea clases pequeñas e reutilizables que hagan bien una sola cosa. Por ejemplo, en lugar de una clase grande como.page-sidebar-box que define el diseño, el color e el tipo de letra, podrías crear varias clases: .box (para el diseño), .sidebar-theme (para el color) e .featured-text (para el tipo de letra).
Luego puedes combinarlas en tu HTML: <div class=”box sidebar-theme featured-text”>. Este enfoque modular facilita la reutilización y el mantenimiento del código.
Organiza las clases CSS en grupos
A medida que tu archivo style.css crece, puede volverse difícil de administrar. Organiza tus clases agrupándolas con comentarios.
Por ejemplo, puedes crear secciones para “Diseño”, “Botones”, “Formularios” y “Tipografía”. Esto hace que sea mucho más fácil encontrar y editar tus estilos más adelante.
/* --- Button Styles --- */
.button {
/* base button styles */
padding: 10px 15px;
border-radius: 5px;
}
.button-primary {
/* primary button styles */
background-color: blue;
color: white;
}
/* --- Form Styles --- */
.form-input {
/* input styles */
border: 1px solid #ccc;
padding: 8px;
}El siguiente paso en tu aprendizaje de CSS
Después de dominar los fundamentos de las clases de CSS, los siguientes pasos en tu proceso de aprendizaje deben centrarse en el diseño adaptable e técnicas avanzadas de diseño. Quienes visiten tu web la verán desde teléfonos, tabletas e computadoras de escritorio, por eso adaptar tus estilos es clave.
Una parte fundamental de esto es entender los puntos de quiebre de CSS, que te permiten aplicar distintos estilos según el tamaño de pantalla de quien visita tu web. Esta es la clave para que tu web se vea genial en cualquier dispositivo.
A medida que sigues creando proyectos más complejos, es útil contar con una guía de referencia. Guarda en tus marcadores nuestra guía rápida de CSS para consultar rápidamente propiedades, selectores e sintaxis.
Todo el contenido tutorial en este sitio web está sujeto a los estándares y valores editoriales más rigurosos de Hostinger.
Faradilla, or Ninda, is a Content Marketing Specialist with a passion for technology, a curiosity for digital marketing trends, and a love for languages. When she's not writing Hostinger tutorials, you can find her learning about life sciences. Follow her on LinkedIn.
