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.

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) en 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 colocado 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.

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.

Ahora, repasemos algunas preguntas que pueda tener sobre las clases de CSS.

¿Dónde puede agregar clases CSS en HTML?

Las clases CSS se pueden agregar a cualquier elemento HTML. Algunos de los más comunes incluyen:

• Párrafo (

  )

• Cuerpo ()
• Título ()
• Encabezados (
  

  ,

  ,

  , etc.)

• Citas en bloque ()
• Intervalos ()
• divisiones (
  )
• Imágenes ()
• Botones ()
• Incrustaciones ()
• Enlaces ()
• Listas ordenadas y elementos de lista (
  y
  1. , respectivamente)
  2. Listas desordenadas y elementos de lista (
     y
     • , respectivamente)
     • Tablas ()

     En pocas palabras, si tiene un elemento HTML, puede agregar una clase CSS.

     ¿Cuántas clases de CSS puede 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.

     ¿Digno de mención? No está limitado a una sola clase por elemento. Considere los párrafos. Si bien puede especificar clases de CSS para todos los párrafos de su página, como el tamaño de fuente o el color de fondo, también puede especificar clases para párrafos individuales para cambiar su color o márgenes mientras mantiene intactos los cambios de estilo generales.

     En la práctica, puede agregar tantas clases como desee a un solo elemento, pero vale la pena realizar un seguimiento de lo que está cambiando para asegurarse de que puede volver a las versiones anteriores si el resultado final no coincide con sus expectativas.

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

     La diferencia entre clase e ID en HTML es que los ID son únicos, las clases no lo son. En la práctica, esto significa que múltiples elementos en una página pueden tener la clase, mientras que los elementos pueden tener solo una ID y cada página puede tener solo un elemento con esa ID.

     Considere un comentario específico en una publicación de WordPress. Si bien puede usar la clase «elemento» para definir todos los comentarios en la misma página, también puede asignar el valor de WordPress generado dinámicamente para el comentario como su ID único.

     Esta es la única identificación que puede tener el elemento y no se puede repetir en ninguna parte de la página. El uso de ID le permite ubicar fácilmente elementos específicos, y asegurarse de que la misma ID no se repita en los elementos es esencial para que su código HTML se represente correctamente en el front-end.

     Cuándo usar ID vs. Clase

     Si bien no existe una regla estricta para usar ID frente a clase, el consenso sostiene que vale la pena usar ID para elementos que aparecen una vez por página, como encabezados, pies de página o menús, mientras que la clase se usa para elementos como párrafos. , enlaces y botones que aparecen más de una vez.

     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 su tamaño y estilo básicos, pero ID diferentes para determinar su posición en la página.

     Una vez que haya agregado una clase a un elemento, debe crear conjuntos de reglas para estas clases en CSS. Los «conjuntos de reglas» son líneas de código que le indican al navegador cómo deben verse esos elementos en la parte frontal de su sitio web. Podemos comenzar a crear conjuntos de reglas utilizando selectores de clase CSS y bloques de declaración.

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

     ¿Qué es un selector de clase en CSS?

     En CSS, un selector de clase tiene el formato de un carácter de punto (.) seguido del nombre de la clase. Selecciona todos los elementos con ese atributo de clase para que se puedan aplicar declaraciones CSS únicas a esos elementos específicos sin afectar a otros elementos en la página.

     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) en 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) en 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) en 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…