Saltar al contenido

La guía para principiantes de clases de CSS

febrero 3, 2022
Site owner using CSS classes and selectors to style HTML elements.jpgkeepProtocol

Imagina que estás diseñando una página web. Desea 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.

Elecciones audaces. Pero, gracias a las clases de CSS, puedes hacer exactamente eso. Las clases de CSS le permiten aplicar propiedades de estilo únicas a grupos de elementos HTML para lograr la apariencia deseada de la página web.

En esta publicación, cubriremos los términos fundamentales que necesita saber, como clase CSS, selector de clase y especificidad CSS. También veremos cómo crear una clase en CSS y usarla para diseñar sus páginas web.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

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

Observe cómo el segundo encabezado, el tercer encabezado y el párrafo final tienen un estilo diferente al resto; esto se debe a que a estos elementos se les ha asignado la clase brillante. Mirando el CSS, vemos el .brillante selector, que aplica sus reglas de estilo a todos los elementos con el atributo clase = «brillante».

ver la pluma clase css: ejemplo de encabezado de Christina Perricone (@hubspot) sobre CódigoPen.

Puede usar clases CSS para agrupar elementos HTML y luego aplicarles estilos personalizados. Puede crear clases y aplicarlas a texto, botones, intervalos y divisiones, tablas, imágenes o cualquier otro elemento de página que se le ocurra. Ahora echemos un vistazo más de cerca a cómo podemos usar las clases CSS para diseñar elementos de página.

Cómo crear una clase en CSS

Intentemos hacer una clase CSS desde cero. Digamos que quiere hacer un párrafo de texto y darle estilo a ciertas palabras para darle más énfasis. Puede hacer esto creando una clase CSS para estas palabras especiales y luego asignando esta clase a palabras individuales con lapso etiquetas

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

 
<p>Our <span>marketing software</span> and <span>service platform</span> provide you with the tools you need to <span>engage</span> visitors, <span>convert</span> them to leads, and <span>win them over</span> as customers.</p>

también he puesto etiquetas alrededor de las palabras que pronto diseñaremos con una clase CSS.

A continuación, agreguemos atributos de clase a estos etiquetas Para hacerlo, agregue el atributo clase = «nombre» a la etiqueta de apertura del elemento de destino, y reemplazar nombre con un identificador único para la clase.

un diagrama que muestra cómo crear una clase css

Fuente de imagen

En nuestro ejemplo, el HTML se ve así:

 
<p>Our <span class="orange-text">marketing software</span> and <span class="orange-text">service platform</span> provide you with the tools you need to <span class="blue-text">engage</span> visitors, <span class="blue-text">convert</span> them to leads, and <span class="blue-text">win them over</span> as customers.</p>

Aquí hemos agregado dos clases de CSS a nuestro lapso etiquetas: texto naranja y texto azul.

Por último, debe crear conjuntos de reglas para estas clases en CSS. Hacemos esto usando selectores de clase CSS y bloques de declaración.

En nuestro ejemplo, crearemos bloques de declaración para nuestras dos clases CSS con los selectores .texto naranja y .texto azul:

 
/* declaration for our first CSS class */
    .orange-text {
    color: orange;
    font-weight: bold;
}

/* declaration for our second CSS class */
    .blue-text {
    color: blue;
    font-weight: bold;
}

Cuando emparejamos nuestro HTML y CSS juntos, vemos cómo nuestras clases de CSS apuntan a ciertos elementos con nuestro estilo personalizado:

ver la pluma clase css: ejemplo de intervalo de Christina Perricone (@hubspot) sobre CódigoPen.

Tenga en cuenta que el atributo de clase no cambia el contenido o el estilo del documento HTML por sí mismo. Es decir, simplemente agregar un atributo de clase a un elemento sin ningún CSS no cambiará la apariencia o el formato del elemento en la interfaz. Debe asignar reglas CSS a la clase para ver cualquier cambio.

También ayuda a crear nombres de clase que describan el elemento en la clase. En el ejemplo anterior, usamos los nombres .texto naranja y .texto azul porque estábamos creando texto colorido. Estos nombres son lo suficientemente descriptivos como para que alguien que solo lea el CSS entienda el propósito de la clase.

Los nombres de las clases pueden ser una o varias palabras. Si el nombre de su clase tiene varias palabras, use guiones donde colocaría espacios. Además, es una práctica común escribir los nombres de las clases en minúsculas. Algunos ejemplos de nombres de clase incluyen .azul brillante y .texto de lujo.

Cómo usar 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 marcos CSS hacen un uso intensivo de las clases CSS. Por ejemplo, Bootstrap CSS usa clases para definir elementos de página.

Veamos un ejemplo de cómo Bootstrap usa clases CSS. En Bootstrap CSS, la clase CSS .btn se puede utilizar con el elemento HTML (así como el y elementos). Bootstrap contiene CSS que formatea automáticamente cualquier elemento definido con el .btn clase de cierta manera. Por lo tanto, simplemente agregando el atributo clase = «btn» a un elemento cambia su apariencia.

Más precisamente, agregando el .btn class a un elemento establece la fuente y el tamaño de fuente, y si un visitante hace clic en el texto del botón, aparece el contorno de un botón con bordes redondeados.

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

ver la pluma clase css: ejemplo de arranque de Christina Perricone (@hubspot) sobre CódigoPen.

Con las clases CSS, Bootstrap nos permite diseñar rápidamente los elementos de la página simplemente agregando uno o más nombres de clase. Las clases de CSS le permiten formatear diferentes tipos de elementos mientras escribe menos código.

Selectores de descendientes

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

Los selectores de descendientes le permiten seleccionar elementos dentro de otros elementos. Por ejemplo, es posible que ya haya creado una clase para definir un estilo general para el párrafo o el texto del encabezado, pero desea que ciertas palabras dentro del párrafo tengan su propio estilo.

Los selectores de descendientes le permiten agregar estos estilos especiales a palabras específicas sin afectar el texto circundante ni cambiar su documento HTML.

Digamos que aplicas el .texto azul class a un encabezado, pero desea cambiar el color de una palabra dentro del encabezado. Envuelve la palabra en un lapso elemento, luego agregue otro conjunto de reglas con un selector descendiente: después del selector de clase CSS .texto azulagregue un espacio y luego el selector de tipo lapso.

ver la pluma clase css: ejemplo de selector de descendientes de Christina Perricone (@hubspot) sobre CódigoPen.

Sin embargo, tenga cuidado de no exagerar esto. El uso excesivo de los selectores de descendientes puede llevarlo a establecer reglas confusas que dificultarán los cambios en el futuro.

Pseudo-clases

Hay más para ver en una página web que contenido HTML. Se transmite una gran cantidad de información sobre la actividad del usuario mientras interactúa con la página. Parte de esta información es un reflejo de lo que están haciendo.

Considere un enlace dentro de su contenido. El usuario puede o no interactuar con ella. Si lo hacen, puede usar pseudoclases para capturar información temporal del usuario, como cuando se desplazan, hacen clic y siguen el 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:

  • :Enlace apunta a un enlace que el usuario no ha visitado.
  • :visitó apunta a un enlace que ha sido visitado por el usuario antes.
  • :flotar apunta a un enlace con el cursor del usuario sobre él.
  • :activo apunta a un enlace que está siendo presionado.

Veamos un ejemplo. Digamos que desea eliminar el subrayado solo de ciertos enlaces en todos los estados. Es decir, no importa si el usuario ha visitado el enlace, se desplaza sobre él o lo presiona activamente, no aparecerá un subrayado debajo de estos enlaces específicos.

En ese caso, agregaría un atributo de clase solo a los enlaces de los que desea eliminar el subrayado. Luego, agregue cuatro conjuntos de reglas con el selector de clase y las cuatro pseudoclases respectivas. En cada bloque de declaración, establecerá el decoración de texto propiedad a ninguna.

ver la pluma clase css: pseudoclases de Christina Perricone (@hubspot) sobre CódigoPen.

Si bien puede tener varias instancias de una clase en una página HTML, solo puede tener una instancia de una ID de CSS en una página. Para dar un ID a un elemento, agregue el atributo identificación = «nombre» a su etiqueta de apertura, y reemplazar nombre con un nombre identificativo único. En el CSS, el selector de ID correspondiente comienza con un signo de almohadilla (#) en lugar de un punto.

Además, los atributos de ID proporcionan el destino de los fragmentos de URL (como los anclajes de página), por lo que deben ser únicos. Los fragmentos lo ayudan a referir a un usuario a una parte específica de una página web: el fragmento se parece a un selector de ID colocado al final de la URL.

El fragmento parece un selector de ID de CSS colocado al final de la URL

Fuente de imagen

Especificidad CSS

A veces, las reglas de CSS entran en conflicto. Por ejemplo, si varios selectores apuntan al mismo elemento en un documento, ¿qué reglas se aplican? Esto está determinado por la especificidad de CSS. En CSS, diferentes selectores tienen diferentes pesos. Cuando dos o más reglas entran en conflicto en el mismo elemento, se aplica la más específica.

Así es como se clasifican los diferentes selectores en la jerarquía de especificidad:

  1. CSS en línea: El CSS en línea aparece como atributos de estilo en la etiqueta de apertura de los elementos HTML. Dado que este CSS es el más cercano al HTML, tiene el nivel más alto de especificidad.
  2. Selectores de ID: Una ID es única para un elemento de página y, por lo tanto, muy específica.
  3. Selectores de clase, selectores de atributo y selectores de pseudoclase: Estos tres tipos de selectores tienen la misma especificidad. Si los tres tipos se aplican al mismo elemento HTML, se aplicará el último que aparezca en la hoja de estilo y prevalecerá sobre el resto.
  4. Selectores de tipo: Estos seleccionan todos los elementos HTML que tienen un nombre de nodo dado y tienen la sintaxis elemento. Estos son nombres de elementos y pseudo-elementos.

Aquí es donde brillan los selectores de ID. Debido a que son tan específicos, casi cualquier otro tipo de selector que se enfrente a ellos pierde. Por otro lado, el selector universal

perderá cada vez debido a su baja especificidad.

Empezar a usar clases CSS

Las clases de CSS lo ayudan a personalizar elementos en una página web de manera más rápida y sencilla. El uso de selectores de clase CSS le permite configurar reglas para dar formato a clases completas de elementos HTML, elementos específicos en una clase o elementos individuales en muchas clases. Puede ser tan creativo como desee al diseñar su sitio, pero recuerde que el objetivo es mejorar la experiencia de usuario de su sitio web.

Nota del editor: esta publicación se publicó originalmente en febrero de 2020 y se actualizó para que sea más completa.

Nueva llamada a la acción