Cómo aplicar estilos de clase personalizados en hojas de estilos en cascada (CSS) - Dummies

Estilos de clase, que a veces también se llaman estilos de clase personalizados , estilos personalizados, o < clases personalizadas , en Hojas de Estilo en Cascada (CSS) son para aquellas ocasiones en las que desea crear un estilo especial y luego aplicarlo de manera selectiva a un número ilimitado de elementos u objetos en una página web. Por ejemplo, en la oración "Nuestro boletín Daily Deals ofrece las mejores ventas, promociones y ofertas especiales en las tiendas más populares en un correo electrónico diario fácil de leer", podría crear un estilo de clase personalizado para modificar las palabras

Daily Deals y luego aplicar ese estilo a esas palabras en el HTML.

Al escribir los estilos de clase en el archivo CSS, asegúrese de incluir un punto (.) Directamente antes del nombre del selector, como se muestra aquí:

. jornadas diarias

{font-family: Georgia, "Times New Roman", Times, serif; tamaño de letra: 23px; font-weight: negrita; color: # 336699;} La presencia del período realiza dos funciones:

Le ayuda a identificar rápidamente, a simple vista, los estilos de clase de otros tipos de estilos al revisar su código CSS.

• Quizás lo más importante es que informa a los navegadores que el estilo es una clase personalizada que se aplicará selectivamente al contenido de la página.

• Cuando crea un estilo de clase, puede asignar al selector el nombre que desee, siempre que no sea el nombre de una etiqueta HTML usada actualmente.

Por ejemplo, sería una idea realmente mala crear un estilo de clase llamado. cuerpo o. pag. Por lo tanto, de acuerdo con el concepto de HTML semántico, intente nombrar sus estilos de clase después de la función que van a realizar, como. resaltar o. imageborder.

Cuando haya terminado de escribir las reglas de estilo en el CSS para su estilo de clase, puede aplicar el estilo a cualquier objeto en el documento HTML agregando el atributo de clase a la etiqueta del contenedor de apertura de el objeto o contenido que se está diseñando:

class = "dailydeals" >> Nuestro boletín Daily Deals le ofrece las mejores ventas, promociones y ofertas especiales en las tiendas más populares en un correo electrónico diario fácil de leer.

Al especificar el estilo de clase en el código HTML con el atributo de clase, el período que se requiere en el CSS al crear la definición de estilo no necesita colocarse delante del nombre de estilo entre las comillas, ya que mostrado en el código anterior. Si prefiere que el estilo de clase se aplique solo a una o dos palabras o una frase corta en lugar de todos los elementos dentro de una etiqueta de contenedor, puede aplicar selectivamente el estilo de clase a su objeto (s) utilizando la etiqueta con el Atributo de clase:

Nuestro

"

labores diarias  " >> Boletín de ofertas diarias le ofrece las mejores ventas, promociones y ofertas especiales en las tiendas más populares en una correo electrónico diario fácil de leer. La etiqueta es una etiqueta en línea utilizada para aplicar estilo a elementos dentro del flujo de texto del documento. Esta etiqueta es esencialmente una etiqueta de contenedor HTML vacía que no hace nada hasta que le dice que haga algo al aplicarle un atributo, como agregar la clase, el ID o el atributo de estilo al contenido de estilo. La ilustración muestra la diferencia entre agregar un atributo de clase a una etiqueta (arriba) y agregarlo a una etiqueta que rodea contenido específico (abajo).