Especificidad en selectores

Visual Studio también te ayuda en esto.
Solo tienes que poner el mouse por encima del selector y te dará la especificad

Esta pág. me es muy útil pues coloco mi código CSS y puedo monitorear su especificidad, es muy curiosa.
Generador gráfico de especificidad CSS
nota: tocar la pantalla para refrescar.

CASCADAS
La cascada se usa cuando hay dos o mas declaraciones que afectan a un elemento, es decir, cuando hay mas de dos reclas que afectan a una etiqueta html, cuando esto ocurre la cascada determinara cual de estas es tiene mayor importancia, y la de mayor importancia sera la que se aplicara. L forma de calcular el peso de una regla no se hace de forma arbitraria, se calculan en base a 3 criterios:

1.- Importancia -----> Las declaraciones importantes son las declaraciones que van seguidas de una directiva llamada: !important. Cualquier otra declaracion sin !important son consideradas declaraciones normales.

2.- Especificidad -----> La regla dice que el selector mas especifico sera el que se tome en cuenta. La forma para calcular la especificidad de un selector se hace con la siguiente formula.

se juntan todos los bloques obtenidos, a mayor numero mayor especificidad, y sera tomado en cuente la regla con mayor especificidad.

3.-Orden ------> Podemos definir los estilos en hojas externas, en la cabecera de la pagina y en la misma etiqueta (estilos en linea), el navegador lee el contenido de una pagina de arriba hacia bajo y los ultimos estilos definidos seran los que se tomaran en cuenta.

Especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

Primer grupo (derecha a izquierda)

Segundo grupo (derecha a izquierda)

Tercer grupo (derecha a izquierda)

Cuarto grupo (derecha a izquierda) (no recomendado)

Quinto grupo (no recomendado)

Fuente Entendiendo la especificidad de CSS

Entender especificidad es entender CSS, prácticamente puedes tomarlo como que, mientras más espécífico sea, mayor importancia le dará CSS, y todos los estilos que tu coloques debajo de otros serán reemplazados en dado caso de que tengan la misma especificidad.

Esto es importante, porque por ejemplo, si tu quisieras reemplazar las clases de algún framework podrías hacerlo simplemente colocandop tus estilos DESPUÉS de mandar a llamar al Framework ^^

Orden de declaración en .css

1. Importancia
2. Especificidad
3. Orden de fuente

Importancia.

1. Hoja de estilo de agente de usuario (Estilos del navegador): primero el navegador va a implementar los estilos que ya trae por defecto

2. Declaraciones normales en hojas de estilo de autor (nuestro .css) que son los estilos que nosotros colocamos en nuestro proyecto.

3. Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Especificidad: el orden de importancia es:

1. !important
2. Iniline styles
3. #id
4. ,class
5. tag

Para evitar rescribir estilos y que se rompa nuestro código tenemos que evitar los !important, Iniline styles #id y tag.

Orden de la fuente: las declaraciones finales son las que se se van a ejecutar en el caso que los estilos tienen la misma especificidad

Como curiosidad y para calcular el “peso” de la especificidad en CSS podemos usar una herramienta como Specificity Calculator

Cuanto más grande sea el número calculado debajo mayor especificidad tendrá la regla.

Aquí un vídeo para reforzar aún mas el concepto de especificidad:
https://www.youtube.com/watch?v=v5GxoV14YOE

Falto mencionar las especificidad de los pseudo-clases y pseudo-elementos:
Pseudo-Clase: (0,1,0)
Pseudo-Elemento: (0,0,1)

Para terminar de entender el tema de herencia en CSS es importante también entender el orden de la declaración y la especificidad que tiene CSS.
¿Cómo se controla el orden al declarar CSS?
Aquí se va a mencionar las reglas que aplica CSS y el navegador para poder implementar los estilos.
CSS y el navegador van a tener 3 puntos que son importantes para decidir que estilos se van a implementar

1. Importancia: es uno de los conceptos más, pues, importantes. Si dos declaraciones tienen la misma importancia, la especificidad de las reglas decidirá cuál se debe aplicar. Si las reglas tienen la misma especificidad, el orden de las fuentes controla el resultado final.
   El tema de la importancia el navegador va a cargar los estilos de forma distinta,
   a) Hoja de estilo de agente de usuario (Estilos del navegador). Primero el navegador aplica sus estilos que él tiene para ciertas etiquetas de html.
   b) Declaraciones normales en hojas de estilo de autor (Nuestro.css). Después va como cumplir la declaración de las normas que vengan en nuestros estilos como developers, quiere decir todos los puntos CSS que vamos a generar.
   c) Declaraciones importantes en hojas de estilos de autor (utilizar el ¡important). Por último, va a aplicar los estilos que vengan con un import al final en nuestra hoja de estilos, esto es importante. Tratar de evitar el ¡important, no son buenas prácticas.
2. Especificidad: los números de derecha a izquierda, quiere decir derecha es menos importante e izquierda son muy importantes para el navegador.
   Tenemos que ¡important es el punto mas importante y este no es buena práctica tenemos que evitarlo.
   Después va a tomar en cuenta todos los estilos que vengan en Inline, que son los estilos que se embeben en la etiqueta de html. Está en un punto 4 de importancia, tenemos también que evitarlos.
   Después entran todos los estilos que se le apliquen a los id.
   Después vienen todos los estilos que se le apliquen a las clases.
   Por último, vienen todos los estilos que se le apliquen a selectores como etiquetas de html.
3. Orden en las fuentes: En tus estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto.

Cuando Diego habla sobre cómo carga CSS en el navegador, es algo parecido a esto:

Un resumen de como se aplican las propiedades en CSS

1. Importancia
2. Origen
3. Especificidad
4. Posición
   
   

Clase 27 - Especificidad en selectores

¿Cuáles son los elementos que tiene en cuenta el navegador para implementar los estilos CSS?

• Importancia.
• Especificidad.
• Orden en las fuentes.

¿Cuál es el orden de importancia que usa el navegador para implementar los estilos CSS?

• Estilos del navegador.
• Estilos propios.
• Declaraciones importantes que usen la palabra !important.
  • Es importante tener en cuenta que este orden es descendente, es decir, primero pasa por los estilos del navegador, pero si hay estilos propios que sobreescriben los estilos del navegador, los estilos propios son los que se implementarán. Pero si hay declaraciones importantes en nuestros estilos propios con la palabra !important, serán estos lo que el navegador implementa.

¿Usar declaraciones importantes con la palabra !important es buena práctica, por qué?

• No, esto es una muy mala práctica porque puede sobreescribir nuestros estilos CSS de una manera que haga imposible aplicar estilos a un elemento.

¿Cuál es el valor y orden de la especificidad que usa el navegador para implementar estilos CSS?

• !important = 1.0.0.0.0
• Estilos en línea o embebidos = 0.1.0.0.0
• id = 0.0.1.0.0
• class = 0…0.0.1.0
• Etiqueta o tags = 0.0.0.0.1

¿Podemos juntar los elementos de especificidad para hacer que un estilo sobreescriba a otro?

• Sí.

¿Qué debemos de tener en cuenta respecto al orden de las fuentes en CSS?

• Las declaraciones que escribamos al final del documento sobreescribirá el archivo CSS.
• Cada archivo de CSS que escribamos en el archivo HTML podrá sobreescribir al anterior.

Consegui esto me parecio interesante compartirlo
https://specifishity.com/

Otro motivo por el cual no veas reflejado el css puede ser el cache de tu navegador.

**RELEVANCIA DE ESTILOS
**
REGLA 1: si un estilo definido en la cabecera entra en conflicto con un estilo definido en un archivo externo, se aplican los estilos de aquella definicion que este mas cerca de la etiqueta afectada.

RELA 2: los estilos en linea, al ser aplicados directamente en la etiqueta son los que siempre tienen mayor relevancia.

REGLA 3: la unica excepcion a la regla 1 y 2 es el uso de !important, el cual le indica al navegador que al margen del orden como se han definidos los estilos, el elemento que contenga !important sera el que prevalece.

Robado del curso de Frontend xd
Espero les ayude tanto como a mi 😄

Esto lo vi en la clase de soy dalto.

📌 La especificidad es la importancia o valor que se le asigna a una declaración CSS.

Les comparto esta imagen que me ayudó a entender mejor la especificidad, denle  💚 si les ayudó
Si desean mas info de especificidad pueden ir a Specificity

Notas de la clase

El problema de especificidad lo encontramos mucho cuando usamos frameworks pues estos tienen sus propios estilos y etiquetas y batallar con estos algunas veces puede tornarse tedioso debido a la herencia. Por eso es importante ser mas especifico que el framework.
Saludos.

La Especificidad es uno de los temas más importantes a tomar en cuenta, y es por los que surge muchos inconvenientes a la hora de programar.

En cuanto a la la regla !important , ésta invalida a las demás por orden de jerarquía. Su utilidad es muy específica y concreta en muy pocos casos, lo mejor es no utilizarla ya que se considera una mala práctica.

Esta regla puedes verla utilizada “usualmente” en los CMS como Wordpress a la hora de modificar estilos. Ya que muchas veces no se puede acceder a los estilos básicos de la plantilla y en ese caso se opta por la regla** !important**. Pero si se puede evitar su uso, mucho mejor.

27.-Especificidad en selectores

¿Cómo se controla el orden al declarar CSS?

1. Importancia: Si dos declaraciones tienen la misma importancia entonces la especificidad nos va a decir que regla se aplicará, pero si dos reglas tienen la misma especificidad es el orden el que va a decidir cual es el resultado final.
1. El navegador va a cargar los estilos de forma distinta (primero aplica sus estilos).
2. Después cumple las declaraciones de las normas que vienen en nuestros estilos(todos nuestros CSS).
3. Por último, aplica los estilos que vienen con un “!important” al final en nuestra hoja de estilos. NO PONERLO PORQUE SI. Hay que evitarlo porque no son buenas prácticas.

2. Especificidad: De derecha a izquierda(menos importante a más importantes para el navegador). Si tenemos un conflicto. Por ejemplo: agregamos varios estilos y existe un conflicto de que se rompan los estilos y tenemos una etiqueta de html con una clase tendríamos 0,0,0,1,1 que es más importante que solo la clase; lo mismo con un id con clase

3. Orden en las fuentes (como mandas llamar los estilos o donde colocas el estilo): En los estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto. Es decir, como CSS es como una cascada, los estilos que siempre se van a aplicar son los que estén hasta abajo reescribiendo los de arriba. También aplica en los .css que mandemos llamar.

El algoritmo en cascada le va a dar más importancia al código que esté más abajo, siempre y cuando tenga el mismo nivel de especificidad. Si la especificidad es mayor entonces esa será su prioridad.

Espero les ayude 😃
https://webdesign.tutsplus.com/es/tutorials/what-is-css-specificity--cms-34141

Comparto los apuntes de la clase 😃

Importancia > Especificidad > Orden de las fuentes

Orden

Estoy investigando para complementar el tema

Maestro Diego:La importancia es uno de los conceptos mas importantes .
Yo: 😮 oh no puede ser , no no entendi.
Maestro Diego: de seguro ahorita no entendiste .
Yo:El maestro es adivino 😮

Orden es Especificad:
1- !important
2- Inline styles
3- #id
4- .class
5- tag

• El orden de la declaración de CSS toma en cuenta la importancia en primer lugar, luego la especificidad y finalmente el orden en las fuentes.
• En importancia, primero toma las fuentes predeterminadas del navegador, luego las hojas normales *.css, y por último las declaraciones !important de los que se realicen en los css.
• La especificidad en lo selectores, toma en cuenta los que tengan la declaración !important, luego los inline style, luego #id, luego .class y finalmente las tag de etiquetas.
• La declaración del orden, se da arriba hacia abajo, es decir los últimos estilos en aplicarse sobreescriben a los primeros. [CalCSS]

Resumen de la clase

![](

![](

Importancia:
1- Hoja de estilo agente de usuario (Estilos del navegador)
2- Declaraciones normales en hojas de estilo de autor (Nuestro.css)
3- Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Orden de las fuentes.
En tus estilos, las declaraciones al final del documento anularan a las que sucedan antes en caso de conflictos.

En este sitio pueden revisar cómo está su CSS respecto a la especificidad: https://jonassebastianohlsson.com/specificity-graph/

El selector universal (*) tiene una especificidad de 0,0,0 lo que significa que no causara conflicto alguno
[](

Uff el tema del orden de las fuentes me habría evitado ciertas frustraciones en clases pasadas jajaja 😦

Un aporte por si a alguien le puede ayudar ya que sólo lo concibo de esta manera:

Otro ejemplo por si las dudas:

Donde ninguna de las combinaciones (cabe aclarar), puede superar el valor jerárquico de “!Important” igual a 16 ó “Inline” igual a 8 en ese orden de prioridad.

El uso de !important es una mala práctica en CSS porque puede causar problemas de mantenimiento y dificultar la comprensión del código.

Cuando se usa !important, se anula cualquier estilo anterior que se haya definido para esa propiedad, incluso si ese estilo anterior es importante para la apariencia del sitio web. Esto puede hacer que sea difícil para otros desarrolladores entender por qué se está utilizando !important y puede llevar a conflictos si se intenta cambiar el estilo en el futuro.

Además, el uso excesivo de !important puede hacer que el código sea más difícil de depurar y puede conducir a problemas de rendimiento en el sitio web, ya que el navegador debe realizar un esfuerzo adicional para procesar las reglas con !important.

El selector universal se considera como el que tiene menos especificad de todos. Debajo de los elementos y pseudoclases.

ahora se porque algunos de mis estilos no se aplican gracias 😃

Me hizo entender porque no me servían estilos en sitios anteriores :v

Excelente explicación, no sabía esto

esto es como el famoso dicho de ahí que verlo para creerlo, no porque no lo crea, es que verlo teóricamente es difícil en algunos casos, es más fácil visualizarlo. espero la siguiente clase con muchas ganas.

lo gracioso es que todos los errores de los que nos esta advirtiendo el profe, terminaremos inevitablemente, cometiendolos 😄.
¡porque se aprende mas cag#nd0la primero, y aprendiendo sobre ello!

¿Por qué es importante conocer la cascada y especificidad?

Esto se debe a la existencia de las reglas CSS conflictivas, que en resumidas palabras son la causa por las cuales, estilos definidos para un elemento no se aplican o el css no funciona como esperamos que lo hiciera.

Esto puede suceder al trabajar en grandes proyecto, que normalmente suelen tener miles de líneas css.

Para solucionar este problema es necesario conocer sobre 3 puntos importantes

1. Importancia
2. Especificidad
3. Orden de las declaraciones css

Estos elementos están colocados en orden de jerárquico decreciente, que implica que importancia es más relevante que la especificidad, etc.

Tener en cuenta 👀 si las reglas css tienen:

La misma importancia, es la especificidad quien decide que estilo aplicar.

La misma especificidad es el orden de las declaraciones quien decidirá que estilo debe aplicarse.

Esto básicamente es la definición de cascade style sheets u hojas de estilos en cascada que definen como se aplicaran las propiedades definidas para un elemento HTML.

Ahora si, sigamos avanzando … 🏃🏼

1. 👑 Importancia

Define el orden con el cual las hojas de estilos .css son interpretadas por el navegador, en un orden creciente de importancia se tienen los siguientes estilos para la importancia.

1. Hoja de estilo del agente usuario (hojas del estilo del navegador)
2. Hojas de estilo declaradas por el usuario style.css
3. Declaraciones !important que se aplica luego del valor de una propiedad css

p{
	color: red !important;
}

!importanthace que
el color aplicado a la etiqueta p
sea más relevante, sin embargo su uso no es recomendable ni se considera una buena práctica

<aside>
👀 !important tiene un valor de 10000 como valor al calcular su especificidad, por ello es el más relevante.

</aside>

2. 🔮 Especificidad

La especificidad es un método que le permite saber al navegador que estilos aplicar cuando se tienen diferentes selectores que apunten al mismo elemento HTML.

👉🏼 La especificidad mide cuan especifico ➡️ es un selector

Esta se define la siguiente manera:

Ejemplos

/* Mas relevante: 1 0 0 0 0 */
selector{
	padding: 20rem !important;
}
/* En linea */
<p style="color: blue"> hola <p>

/* id: 1 0 0 */
#contact-form{
	width: 50%;
}

/* class: 1 0 */
.data{
	background: #ff0;
}

/* tag: 1 */
p{
	font-family: sans-serif;
}

/* (universal)*: 0 */
*{
	padding: 0;
	margin: 0;
}

3. 📑 Orden de las declaraciones css

Se define como la importancia de la secuencialidad en las líneas de código css, tomandose en cuenta la ultima estilización css definida para el elemento, ejemplo:

HTML

<h1> Soy io</h1>

¿Qué estilo tomará h1?

Al tener la misma especificidad, h1 tomará las reglas CSS definidas al final en base a su la secuencialidad (al tener la misma especificidad, los estilos que están por debajo son las que se toman en cuenta).

CSS

h1{
	font-size: 12px;
}
h1{
	font-size: 16px;
}

En este caso les comparto esta web, está hermosamente diseñada en CSS, aunque está en inglés me ha ayudado a entender mejor la clase:
https://wattenberger.com/blog/css-cascade

Importarcia

Especificidad de mayor importancia a menor

Reglas de cascada

Orden de las fuentes

Gracias!

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados.

No entendí mucho, así que fui a esta página click y me se me facilito porque tenían imágenes.
Espero y les ayude también👍🏻

Importancia

1.- Hoja de estilo de agente de usuario(estilos del navegador)
2.-Declaraciones normales en hojas de estilo de autor (nuestro.css)
3.-Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Important no es un selector señor. Es una regla o una propiedad pero no un selector https://www.w3schools.com/css/css_important.asp

Especificidad en selectores

¿Cómo se controla el orden al declarar CSS?

• Importancia

  • Primero se utiliza los estilos que tiene el navegador
  • Declaraciones normales en hojas de estilo autor(nuestro.css)
  • Declaraciones importantes en hojas de estilos de autor (utilizar el !importa)

  Tenemos que evitar el “!important” porque no son buenas practicas.

• Siempre que tengamos un tag y .class sera mas importante que tener un solo .class

• Y de igual forma siempre una .class y un #id va a ser mas importante que solo un #id

ORDEN DE LAS FUENTES

• En tus estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto. Es decir, si tenemos un clase y la llamamos al principio, pero también al final con otra instrucción, eso puede alterar nuestro código, al igual que la forma en la que se colocan las hojas de css que nuestro html tiene.

ORDEN AL DECLARAR CSS:

1. Importancia:
1.1. Estilo del navegador
1.2. Nuestro estilo
1.3. !important (reemplaza los estilos que ya hay, tratar de evitarlo)
++2. Especificidad: ++
Reglas de cascada.
2.1. !importan (importancia: 1,0,0,0,0)
2.2. inline styles (importancia: 0,1,0,0,0)
2.3. #id (importancia: 0,0,1,0,0)
2.4. .class (importancia: 0,0,0,1,0)
2.5. tag (importancia: 0,0,0,0,1)
3. Orden en las fuentes

Este tema es muy importante para no frustrarnos con CSS cuando algunos estilos no se aplican como nosotros queremos.

1. Importancia
       a) Hoja de estilo de agente de usuario (estilos del navegador).
       b)Declaraciones normales en hojas de estilo de autor (CSSDocument.css)
       c)Declaraciones importantes en hojas de estilos de autor (utiliza el import !import) Evitarlo

2. Especificidad
   

   
   Nota: Entre más cerca esté el 1 a la izquierda mayor preferencia le dará el navegador

          Nota 2: Tratar de evitar el uso de important e inline style

          Nota 3: Cuando se usa dos o más selectores la especificidad que le dará el navegador web será dada por la suma de los selectores que se usaron (Son valores binarios entre mayor sea este valor mayor especificidad tendrá)
 
3. Orden en las fuentes: Los estilos que se llamen al final sobrescribirán los estilos ya establecidos, es como pintar una casa la última capa de pintura quitará el color de la primera
 

¿Diferente origen o !important?
Si
    Utiliza la declaración con mayor prioridad
No
    ¿Tiene algún inline style?

    Si

        Utiliza las inline declaration

    No

        ¿Los selectores tienen una especificidad diferente?

        Si

            Utiliza las declaraciones con mayor especificidad

        No

            Utiliza las declaraciones que vienen en su fuente

excelente aporte

hola amigos una pregunta, cual es la diferencia entre un ID y un .CLASS

Que bacán enseña el profe de Granda, un genio

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia

nice class!!

GRACIAS

MUY INTERESANTE

💚

Muchisimas gracias!!

Importancia: 1 - Estilos de Navegador 2 - Nuestro .css 3 - EL !important

Esto es lo que me faltaba saber para no pelear con css xd

gracias a !important puedo llevar pan a mi casa JAJAJAA

Entender esto es súper importante!

Que largo este cursoo pero que necesario!! Vamos Platzi day! Gracias a todo el team por esta oportunidad!

despues de ver estaexplicacion 10 veces ahora me queda super claro XD

Este sera nuestra nueva biblia al momento de escribir CSS y tener dudas en la Especificidad, es decir que tiene mas peso u valor en nuestro documento…

y también hay que saber que hace CSS cuando detecta algun conflicto con los mismos…

En esta clase, abordaremos dos aspectos cruciales para comprender el comportamiento de CSS: el orden de declaración y la especificidad. Estos elementos son esenciales para evitar conflictos y garantizar que tus estilos se apliquen como esperas.

Control del Orden de Declaración en CSS

Cuando trabajas con CSS, es crucial entender cómo se controla el orden de declaración de estilos. El navegador y CSS aplican reglas específicas para determinar qué estilos se implementarán. Aquí están las reglas clave:

1. Importancia: Los estilos del navegador se aplican primero, seguidos por tus propios estilos. Si hay una declaración !important en tus estilos, esta anulará cualquier estilo anterior.
2. Estilos en línea: Las declaraciones de estilo en línea, aquellas incorporadas directamente en las etiquetas HTML, tienen precedencia sobre las declaraciones externas.
3. IDs: Los estilos aplicados a elementos con identificadores (IDs) tienen más peso que las clases y etiquetas.
4. Clases y Atributos: Las clases y atributos específicos también tienen importancia y afectan a los elementos que los llevan.
5. Etiquetas HTML: Por último, los estilos aplicados a etiquetas HTML generalmente tienen la menor especificidad.

Especificidad en CSS

La especificidad es clave para resolver conflictos entre diferentes estilos. Aquí tienes una jerarquía de especificidad, de menos a más importante:

1. !important: La declaración más importante, pero se debe evitar su uso.
2. Estilos en línea: Deben usarse con moderación debido a su alta especificidad.
3. IDs: Estilos aplicados a elementos con IDs específicos.
4. Clases y Atributos: Estilos aplicados a clases y atributos.
5. Etiquetas HTML: Estilos aplicados a elementos HTML.

Cuando dos reglas tienen la misma importancia, la especificidad se convierte en el factor decisivo. Si dos reglas tienen la misma especificidad, el orden en que aparecen en el código determinará cuál prevalece.

Orden de las Fuentes en CSS

El orden en que mandas llamar tus estilos también influye en el resultado final. CSS se procesa de arriba hacia abajo, como una cascada. Los estilos declarados más abajo en tu código pueden sobrescribir estilos anteriores. Por lo tanto, ten cuidado con el orden en que colocas tus enlaces a hojas de estilo y cómo mandas llamar tus estilos.

Recomendaciones Finales

• Evita !important: Aunque puede ser tentador, el uso excesivo de !important puede generar problemas de mantenimiento. Trata de estructurar tus estilos de manera que la especificidad y el orden controlen el resultado.
• Organiza tus Estilos: Mantén una estructura clara en tu código CSS. Agrupa estilos relacionados y organiza tu código de manera lógica para facilitar la lectura y el mantenimiento.
• Utiliza Selectores con Moderación: Evita selectores demasiado generales que puedan afectar a múltiples elementos. Sé específico en tus selecciones para evitar conflictos innecesarios.

En la próxima clase, realizaremos un ejercicio práctico para aplicar estos conceptos y resolver conflictos de estilos. Además, encontrarás un enlace a una calculadora de especificidad en los recursos para ayudarte a comprender mejor estos principios.

¡Nos vemos en la siguiente clase!

En una hoja de estilo de autor (archivo .css que tú creas para personalizar el estilo de tu sitio web), puedes incluir una variedad de declaraciones para definir cómo se deben presentar los elementos HTML en tus páginas. Aquí hay algunas declaraciones comunes que puedes utilizar:

1. Selección de elementos:
   css
   Copy code
   /* Aplica estilos a todos los párrafos */
   p {
   color: #333;
   }

/* Aplica estilos a todos los encabezados h1 /
h1 {
font-size: 24px;
color: #FF5733;
}
2. Clases e IDs:
css
Copy code
/ Aplica estilos a elementos con la clase “destacado” */
.destacado {
background-color: yellow;
}

/* Aplica estilos al elemento con el ID “cabecera” /
#cabecera {
font-size: 20px;
}
3. Estilos de texto:
css
Copy code
/ Cambia el color y el tamaño del texto */
body {
font-family: “Arial”, sans-serif;
font-size: 16px;
line-height: 1.5;
}

/* Subraya los enlaces /
a {
text-decoration: underline;
}
4. Estilos de diseño:
css
Copy code
/ Establece márgenes y padding */
div {
margin: 10px;
padding: 15px;
border: 1px solid #999;
}

/* Centra un elemento /
.centro {
margin: 0 auto;
}
5. Estilos de fondo e imágenes:
css
Copy code
/ Fondo con color y una imagen repetida /
body {
background-color: #F2F2F2;
background-image: url(‘fondo.jpg’);
background-repeat: repeat;
}
6. Estilos de visualización y posición:
css
Copy code
/ Oculta un elemento */
.oculto {
display: none;
}

/* Coloca un elemento en la esquina superior derecha /
.esquina-superior-derecha {
position: fixed;
top: 0;
right: 0;
}
7. Estilos de animación:
css
Copy code
/ Aplica una animación de giro */
.rotar {
animation: girar 2s infinite;
}

@keyframes girar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Estos son solo ejemplos básicos y hay muchas más propiedades y valores disponibles en CSS para personalizar la apariencia y el diseño de tus páginas web. Recuerda que la práctica común es organizar y comentar tu código CSS para facilitar su mantenimiento.

La “hoja de estilo de agente de usuario” se refiere a los estilos predeterminados que un navegador web aplica a los elementos HTML antes de que se especifiquen reglas de estilo personalizadas. Estos estilos predeterminados son parte de la interfaz de usuario del navegador y están diseñados para proporcionar una apariencia coherente y básica a los elementos HTML en ausencia de reglas de estilo personalizadas.

Aunque estos estilos pueden variar ligeramente entre diferentes navegadores, a menudo incluyen configuraciones como márgenes predeterminados, tamaños de fuente, colores de texto y enlaces, etc. Los estilos del navegador son la base sobre la cual puedes construir al desarrollar un sitio web, y puedes anularlos o complementarlos con tus propias reglas de estilo.

Si deseas ver los estilos predeterminados aplicados por un navegador a un elemento específico, puedes usar las herramientas de desarrollo del navegador para inspeccionar el elemento y ver las reglas de estilo aplicadas. Por ejemplo, en Google Chrome, puedes hacer clic derecho en un elemento, seleccionar “Inspeccionar” y luego ir a la pestaña “Styles” para ver las reglas de estilo aplicadas.

Recuerda que al diseñar un sitio web, es una buena práctica proporcionar tus propios estilos para garantizar una apariencia coherente en diferentes navegadores y dispositivos. Esto implica utilizar reglas de estilo personalizadas en tu hoja de estilo CSS para anular o complementar los estilos predeterminados del navegador según tus necesidades específicas.

Cuando se utiliza !important en una regla de estilo CSS, esa regla tiene la máxima prioridad y anula cualquier regla que no tenga !important, independientemente de la especificidad. Sin embargo, es importante utilizar !important con moderación, ya que su uso excesivo puede hacer que el código sea más difícil de mantener y entender.

Aquí tienes un ejemplo de cómo se aplican los estilos con !important:

/* Regla sin !important */
p {
color: red;
}

/* Regla con !important, anula la regla anterior */
p {
color: blue !important;
}

En este ejemplo, el texto de todos los elementos <p> será azul, a pesar de que hay una regla anterior que establece que el color es rojo. La regla con !important tiene prioridad.

Es importante señalar que usar !important de manera excesiva puede complicar el mantenimiento del código y dificultar la depuración de problemas de estilo. Es preferible entender y utilizar la especificidad de los selectores en lugar de depender en gran medida de !important.

Siempre que sea posible, trata de ajustar tus selectores y estructura de estilo para evitar el uso de !important innecesario.

La especificidad en CSS determina qué conjunto de reglas se aplicará a un elemento en caso de que haya conflictos entre diferentes estilos. La especificidad se basa en la combinación de selectores utilizados para aplicar estilos a un elemento. Cuanto más específico sea un selector, más peso tendrá en la determinación de qué reglas se aplican.

La especificidad se calcula en función de cuatro componentes:

Componente a: Número de IDs en el selector.
Componente b: Número de clases, atributos y pseudoclases en el selector.
Componente c: Número de elementos y pseudoelementos en el selector.
Componente d: Ponderación adicional para la regla !important.
La especificidad se representa como un número de cuatro dígitos, por ejemplo, a-b-c-d. Cuanto mayor sea el número, mayor será la especificidad.

Ejemplos:

#id { color: red; } - Específico: 1-0-0-0.
.clase { color: blue; } - Específico: 0-1-0-0.
p { color: green; } - Específico: 0-0-1-0.
body p { color: orange; } - Específico: 0-0-2-0.
Si dos reglas tienen la misma especificidad, la que aparece más tarde en el código tomará precedencia. Sin embargo, si la propiedad !important está presente en una regla, esa regla se aplicará independientemente de la especificidad de las demás reglas.