Guía de Clases CSS para principiantes
Guía de Clases CSS para principiantes
  • Tiempo de lectura:15 minutos de lectura
  • Categoría de la entrada:Desarrollo Web / Webmaster

Imagina que estás diseñando una página web y deseas que un grupo de encabezados tenga un texto rojo grande, un grupo de botones tenga un texto blanco mediano y un grupo de párrafos tenga un texto azul pequeño.

Gracias a las clases de CSS, puedes hacer exactamente eso, exactamente lo que quieras hacer.

Las clases de CSS permiten aplicar propiedades de estilo únicas a cada grupo de elementos HTML para lograr la apariencia deseada en tu página web.

En esta publicación, cubriremos los términos fundamentales que necesitas conocer, sobre una clase CSS, un selector de clase o una especificación CSS.

Además, veremos cómo crear una clase en CSS y cómo usarla para diseñar tus páginas web.

¿Qué es una clase CSS?

Una clase CSS es un atributo que se utiliza para definir un grupo de elementos HTML con el fin de aplicar estilos y formatos únicos a esos elementos con CSS.

¿Cómo funciona una clase CSS?

Veamos un ejemplo de cómo funcionan las clases CSS. A continuación, imagina una página HTML simple con tres encabezados (elementos h2) y tres párrafos ( elementos p).

Aplicando una clase determinada a uno de los elementos, bien a h2 o bien a p, podrás hacer que todos los elementos iguales se personalicen con el estilo que desees.

¿Cómo crear una clase en CSS?

Intentemos hacer una clase CSS desde cero. Digamos que quieres hacer un párrafo de texto y darle estilo a ciertas palabras para darle más énfasis.

Puedes crear una clase CSS para las palabras especiales y luego asignar esa clase a las palabras individuales mediante etiquetas de intervalo.

Comienza por escribir los elementos HTML que deseas diseñar. En este caso, un párrafo de texto:

<p>Esto <span>es un texto</span> de <span>pruebas</span> que incluye <span>etiquetas</span> con elementos de span.</p>

Coloque etiquetas <span> alrededor de las palabras para las que diseñaremos una clase CSS.

A continuación, agregaremos atributos de clase a las etiquetas **<span>**.

Para ello, agregamos el atributo class=”nombre” a la etiqueta de apertura del elemento objetivo y reemplaza el nombre con un identificador único para la clase.

El código quedaría así:

<p>Esto <span class="color-azul">es un texto</span> de <span class="color-rojo">pruebas</span> que incluye <span class="color-azul">etiquetas</span> con elementos de span.</p>

Las clases “color-azul” y “color-rojo” correctamente escritas mediante el CSS, transformarían el color del texto de dentro de cada span.

Por ejemplo, color-azul podría definirse mediante el CSS tal que así:

.color-azul {
    color="blue";
    }

¿Dónde puedes agregar clases CSS en HTML?

Las clases CSS que se pueden agregar a cualquier elemento HTML. Entre algunos de los más comunes se encuentran:

  • Párrafo (<p>)
  • Cuerpo (<body>)
  • Título (<title>)
  • Encabezados (<h1>, <h2>, <h3>, etc.)
  • Citas en bloque (<blockquote>)
  • Intervalos (<span>)
  • Divisiones (<div>)
  • Imágenes (<img>)
  • Botones (<button>)
  • Incrustaciones (<embed>)
  • Enlaces (<a>)
  • Listas ordenadas y elementos de lista (<ol> y <li>, respectivamente)
  • Listas desordenadas y elementos de lista (<ul> y <li>, respectivamente)
  • Tablas (<table>)

En pocas palabras, si tienes un elemento HTML, puedes agregarle la clase CSS que desees.

¿Cuántas clases de CSS puedes agregar a un elemento?

Uno de los usos más comunes de la clase en CSS es agregar un estilo específico a un elemento específico.

No estás limitado a una sola clase por elemento. Puede especificar varias clases para cada párrafo individual, si quieres lograr cambiar el color o los márgenes mientras mantienes intacto el resto de estilos CSS.

En la práctica, puedes agregar tantas clases como desees a un solo elemento, pero merece la pena realizar un seguimiento de lo que estás cambiando para asegurarte de no repetir estilos.

¿Cuál es la diferencia entre clase o ID en HTML?

La diferencia entre clase e ID en HTML es que los ID son únicos y las clases no lo son.

En la práctica, eso significa que múltiples elementos en una página pueden tener una misma clase, mientras que los elementos pueden tener solamente un único ID y en cada página puede existir solamente un elemento con ese ID.

El uso de un ID permite ubicar fácilmente elementos específicos y asegurar que una misma ID no se repite en todos los elementos esenciales del código HTML.

¿Cuándo usar ID o una Clase?

Si bien no existe una regla estricta para usar ID frente a clase, el consenso sostiene que vale la pena usar ID para los elementos que aparecen una vez por página: Como los encabezados, el pie de página o un menú.

Mientras que las clases se usan para elementos más repetitivos: Como los párrafos, los enlaces o los botones.

Como se señaló anteriormente, los ID se pueden usar junto con las clases.

Por ejemplo, dos elementos de botón pueden tener las mismas clases para definir el tamaño y su estilo básico; pero pueden recibir un ID diferente capaz de determinar su posición en la página.

Una vez que hayas agregado una clase a un elemento, debes crear conjuntos de reglas para esas clases mediante CSS. Los conjuntos de reglas son líneas de código que indican al navegador cómo deben verse esos elementos en la parte frontal del sitio web.

Se pueden comenzar a crear conjuntos de reglas utilizando selectores de clase CSS y bloques de declaración.

Por último, debes crear conjuntos de reglas para las clases mediante CSS, esto se hace usando selectores de clase CSS y bloques de declaración.

¿Qué es un selector de clase en CSS? Puedes ojearlo en nuestro artículo sobre selectores de CSS 🔍

Debes tener en cuenta que el atributo de clase no cambia el contenido o el estilo del documento HTML por sí mismo.

Es decir, si simplemente agregas un atributo de clase a un elemento sin ningún CSS no cambiará la apariencia o el formato del elemento en la interfaz. Debes asignar las reglas CSS a la clase para que se muestren los cambios.

También ayuda a crear nombres de clase que describan el elemento en la clase.

En el ejemplo anterior, usamos los nombres .color-blue porque estábamos creando texto colorido. Debes procurar que los nombres sean lo suficiente descriptivos como para que alguien que lea el CSS, sea capaz de entender el propósito de la clase.

Los nombres de las clases pueden ser una o varias palabras. Si el nombre de una clase tiene varias palabras, usa guiones donde colocarías espacios.

Además, es una buena práctica el escribir los nombres de las clases en minúsculas. Algunos ejemplos de nombres de clases, podrían ser: .color-azul y .sombra-alta.

¿Cómo usar las clases CSS?

Ahora que entendemos qué es una clase CSS y cómo aparece en la sección del cuerpo de un archivo HTML, echemos un vistazo a los casos de uso comunes.

Clases CSS de Bootstrap

Muchos frameworks CSS hacen un uso intensivo de las clases CSS. Por ejemplo, Bootstrap CSS usa las clases para definir los elementos de página.

Veamos un ejemplo de cómo Bootstrap usa las clases CSS.

En Bootstrap CSS, la clase CSS .btn se puede usar con el elemento HTML **<button>** (así como con los elementos **<a>** y **<input>**).

Bootstrap contiene CSS que formatea automáticamente cualquier elemento definido con la clase .btn de cierta manera. Por lo tanto, simplemente agregando el atributo class=“btn” a un elemento, este cambiará su apariencia.

Más precisamente, agregar la clase .btn a un elemento establecerá una fuente y tamaño de fuente y si un visitante hace clic sobre el texto del botón, aparecerá un contorno de botón con bordes redondeados.

Bootstrap también tiene clases para diseñar botones de otras formas, como el color de fondo. Si añadimos la clase .btn-success o .btn-danger el botón se mostrará en colores verde o rojo respectivamente.

Con las clases CSS, Bootstrap nos permite diseñar rápidamente los elementos de una página simplemente agregando uno o más nombres de clase.

Las clases de CSS permiten formatear los diferentes tipos de elementos mientras se escribe menos código.

Selectores hijo o descendientes

El objetivo de las clases CSS es aplicar formato a elementos específicos. Con ese fin, los selectores hijos o descendientes son una gran adición a tu caja de herramientas.

Los selectores hijo permiten seleccionar elementos dentro de otros elementos.

Por ejemplo, es posible que ya hayas creado una clase para definir un estilo general para el párrafo o un texto del encabezado, pero deseas que ciertas palabras dentro del párrafo tengan su estilo propio.

Los selectores hijo permiten agregar estilos especiales a palabras específicas sin afectar al texto circundante ni cambiar el documento HTML.

Supongamos que aplicamos la clase .color-azul a un encabezado, pero deseamos cambiar el color de una palabra concreta dentro de este.

Envolveríamos la palabra concreta en un elemento span y luego agregaríamos otro conjunto de reglas con un selector descendiente: Después del selector de clase CSS .color-azul , agregamos un espacio o una coma y luego el selector de tipo span.

El HTML quedaría tal que así:

<h1 class="color-azul">Encabezado con dos colores de texto <span>diferentes</span>: Uno para el párrafo, otro para el span.</h1>

EL CSS tal que así:

.color-azul {
  color: blue;
}

.color-azul span {
color: orange;
}

El uso excesivo de los selectores hijo / descendientes puede llevar a establecer reglas confusas que dificulte realizar cambios en el futuro.

Pseudo-clases

Dentro de una página web, existe mucho más que el contenido HTML. Por ejemplo, tienes los enlaces dentro del contenido de tu HTML. El usuario puede o no interactuar con los enlaces.

Pero si se interactúan con los enlaces, se pueden utilizar las pseudoclases para capturar información temporal de la actividad del usuario como cuando se desplazan, hacen clic o siguen un enlace.

Las pseudoclases se identifican con dos puntos seguidos de la clase. Aparecerán después de un selector de CSS sin espacios intermedios.

Las pseudoclases comunes para el diseño de enlaces son:

  • :link apunta a un enlace que el usuario no ha visitado.
  • :visited apunta a un enlace que el usuario ha visitado antes.
  • :hover apunta a un enlace con el cursor del usuario sobre él.
  • :active apunta a un enlace que está siendo presionado.

Por ejemplo, si queremos eliminar un subrayado de los enlaces de ciertos estados. Eso quiere decir que no importa si el usuario ha visitado el enlace, se desplazado sobre él o lo ha presionado activamente: No aparecerá un subrayado debajo de estos enlaces específicos.

Para ello, vamos agregar un atributo de clase solo a los enlaces de los que queramos eliminar el subrayado.

Creamos un texto HTML con varios enlaces, y a uno específico le aplicaremos la clase concreta que le suprimirá el subrayado por defecto.

El HTML podría ser algo así:

<p><a href="#">Este sería un enlace con subrayado.</a></p>
<p><a href="#" class="subrayado-suprimido">Este un enlace sin subrayado.</a></p>

El contenido CSS de las pseudoclases sería algo así:

.subrayado-suprimido:link {
  text-decoration: none;
}

.subrayado-suprimido:visited {
  text-decoration: none;
}

.subrayado-suprimido:hover {
  text-decoration: none;
}

.subrayado-suprimido:active {
  text-decoration: none;
}

Si bien puedes tener varias instancias de una clase en una página HTML, solo puedes tener una instancia de una ID de CSS en una página. Para dar una identificación a un elemento, agrega el atributo id=“nombre” a tu etiqueta de apertura y reemplaza el nombre con un nombre de ID único.

A diferencia de las clases, en el código de CSS, un selector de ID comenzará con un signo de almohadilla (#) en lugar de un punto.

Además, los atributos de ID son capaces de incluir fragmentos de URL (como anclajes de página) por ello deben ser únicos.

Los fragmentos, ayudan a referir a un usuario hacía una parte específica de una página web, un fragmento es similar a un selector de ID situado al final de la URL. El fragmento de la siguiente URL, sería #selector.

https://ciberninjas.com/etiqueta/css/#selector

¿Cómo anular una clase CSS?

Primero, debes identificar la clase que deseas anular y específicamente la regla que deseas cambiar. Eso puede ser un color de la fuente, el tamaño, la posición, etc.

La clase en sí no importa tanto como identificar dónde está la clase y cómo se relaciona con los elementos que la rodean.

Puedes probar a crear una declaración más específica

La regla general básica cuando se trata de dos clases en conflicto es que gana la que tiene la declaración más específica.

Por ejemplo, los selectores de ID son más específicos que los selectores de clase y los selectores de clase son más específicos que los selectores de tipo.

En la práctica, eso significa que agregar un selector de clase a un elemento con solo un selector de tipo anulará la clase actual, mientras que agregar un selector de ID anulará cualquier clase o selector de tipo.

Siempre puedes usar la declaración !important

Si realmente es urgente la anulación de una clase pero no eres capaz de encontrar donde se encuentra, siempre puedes usar una nueva declaración añadiéndole el atributo final de !important.

En CSS, indicar !important significa exactamente lo que la propia palabra dice: Que es más importante que todo el demás CSS. Por tanto, la directiva que indiques como !important tomará preferencia a la hora de aplicarse.

Cuando se coloca !important sobre una declaración, se dará máxima prioridad a la misma.

Este tipo de declaración rompe la función en cascada natural de CSS, lo que a su vez hace que el código sea más difícil de depurar; por lo que es muy recomendable utilizar con mucha moderación.

¿Por qué empezar a usar clases CSS?

Las clases de CSS te ayudan a personalizar los elementos de una página web de manera más rápida y sencilla.

El uso de los selectores de clase CSS te permiten configurar las reglas para formatear las clases de los elementos HTML, los elementos específicos de una clase o los elementos individuales en muchas clases.

Con la utilización de las clases, puedes ser tan creativo como desees en el diseño de tus sitios web; pero recuerda, el objetivo final es mejorar la experiencia de usuario y no inflar el código.