Como aplican los atributos CSS

Introducción

En ocaciones luchamos por aplicar atributos mediante CSS que finalmente no aplican como esperamos. Ésto ocurre por que existen ciertas reglas que priorizan el uso de un atributo frente a otro, las que analizaremos a continuación

Descripción

Las propiedades CSS en general se aplican en el órden en que son definidas, pero aquellos atributos definidos sobre un elemento (como <p>), sobre una clase o sobre un identificador (como #encabezado) tienen prioridades diferentes por lo que unos tienen preferencia sobre otros.

Pasemos a analizar cada uno de los niveles y el órden en que se aplican, con ello si se encuentra un atributo en un nivel superior, sobreescribe los definidos con anterioridad:

Elementos

Los primeros atributos en aplicar corresponden a los elementos base de HTML, como:

body { font-family: sans-serif; }

p { color: blue; }

Clase

En segundo lugar se aplican los atributos sobre clase:

.centrado { text-align: center; }

.rojo { color: red; }

ID

En el siguiente nivel se aplican los atributos sobre los id:

#marco1 { border: blue solid 2px; }

#mibox { 
   color: yellow;
   background-color: black;
   width: 200px;
   height: 32px;
 }

Atributo style

En éste nivel se aplican los atributos especificados directamente sobre el elemento por medio del atributo style directamente en HTML y los asignados mediante javascript para el elemento:

<p style="color: #ffaa33;">Aplicando color para el párrafo</p>

Modificador !important

Por medio del modificador !important al definir una propiedad css, se aumenta su prioridad, logrando que aplique dicho atributo por sobre los otros.

.rojo { color: red !important; }

Ejemplo

Tomaremos el siguiente ejemplo y veremos cómo se despliega

<style>
.rojo { color: red !important; }

#mibox {
   color: yellow;
   background-color: black;
   width: 200px;
   height: 32px;
}

#mibox p {
    padding: 6px;
}

</style>

<div id="mibox">
    <p class="rojo" style="background-color: #aaa;>
        Texto de ejemplo
    </p>
</div>

Podemos ver que con la clase ".rojo" se sobreescribe el color "yellow" dado en #mibox, así mismo el fondo es cambiado a gris por el style definido en el elemento <div>.

Generado por Sistema y almacenado en cache