Multi Clases CSS

Buenas gente, hoy les traigo un pequeño truco para aquellos que estan comenzando con el Diseño Web o para aquellas personas que todavia no lo conocian.

Muchas veces cuando estamos diseñando le damos estilos a cada elemento HTML y casi siempre tenemos muchos elementos con mismas caracteristicas, por ejemplo tenemos un parrafo que esta en Negrita, y otro parrafo que tambien esta en Negrita pero con un Color diferente.

.parrafo1 {
     font-weight:bold;
}
.parrafo2 {
     font-weight:bold;
     color:red;
}

Asi como ven en el codigo de arriba, pero como se habran dado cuenta tenemos dos veces escrita el codigo para la negrita, que en realidad no seria ningun problema si fuera algo basico, pero en grandes proyectos es necesario usar lo menos codigo posible para que la pagina cargue mas rapido, para que halla menor uso de banda de ancha entre otras cosas.

Ahora les mostrare una manera sencilla de reutilizar cada clase para ahorrarnos todo ese codigo innecesario.

.negrita {
     font-weight:bold;
}
.color {
     color:red;
}

Y ahora vemos como quedaria nuestro codigo HTML:

     Nuestro Parrafo numero 1 que se encuentra en Negrita.


     Nuestro segundo Parrafo que tambien se encuentra en Negrita pero este cambia de color.

Como pueden observar dejando un espacio entre ambas clases se pueden ingresar todas las clases que queremos utilizar.

Esto seria muy util ya que podemos reutilizar todas las clases que quisieramos y nos ahorrariamos mucho Codigo. A continuacion les voy a dejar otro Ejemplo:

Codigo CSS:

.negrita {
    font-weight:bold;
}
.grande {
    font-size:30px;
}
.color {
    color:red;
}

Codigo HTML:

        Multi Clases en CSS - www.matydesign.com
MultiClases en CSS


            Hoy les mostrare como usar Multiples Clases en CSS, para no escribir
            clases innecesarias y reducir la cantidad de codigo.
        

            Estilo Numero 1!
        

            Estilo Numero 2!
        

            Estilo Numero 3!
        

            Todas las Clases Combinadas!
        

Les dejo el ejemplo para ver el Resultado. Demo!

Espero que les halla sido Util y cualquier consultas Tienen los Comentarios o el Foro.

Saludos…
Maty!