No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Cascada y especificidad en CSS

10/24
Recursos

En alg√ļn punto, cuando est√©s creando una p√°gina web, te encontrar√°s con problemas con los estilos, por ejemplo:

  • ¬ŅPor qu√© no se aplica el color que le estoy poniendo?
  • ¬ŅPor qu√© este elemento se comporta de manera diferente?

Probablemente, sea un inconveniente de cascada o especificidad.

Qué es la cascada en CSS

La cascada es el concepto que determina qué estilos se colocan sobre otros, priorizando a aquellos que se encuentren más abajo del código. Recordarás que CSS es la abreviación de Cascade Style Sheets, que traducido es hojas de estilos en Cascada.

Representación gráfica de la cascada en CSS

Mira el siguiente código e identifica de qué color de letra tendrá la etiqueta <h1>.

h1 {
    color: red;
}

h1 {
    color: blue;
}

La etiqueta <h1> tendr√° un color blue de letra, esto porque est√° situado m√°s abajo en el c√≥digo. Esto ocurre con cada propiedad de CSS que se repita en alg√ļn punto m√°s arriba del c√≥digo.

Sin embargo, esto ocurre cuando la especificidad de una regla CSS tiene el mismo valor. Pero, ¬Ņqu√© es especificidad?

Qué es especificidad en CSS

La especificidad consiste en dar un valor a una regla CSS sobre qué tan específico es el estilo, esto para que los navegadores puedan saber qué estilos aplicar sobre otros, independientemente de dónde se encuentren en el código. El estilo se aplicará donde la especificidad sea mayor.

Tipos de especificidad en CSS

Existen 6 tipos de especificidad con su respectivo valor, donde X es la cantidad de estilos que lo contienen. Mira la siguiente imagen:

Tipos de especificidad en CSS

Valor con mayor especificidad

La palabra reservada !important es un valor de toda propiedad CSS que provee una especificidad de 10000, por lo que se aplicará ante otros estilos. Esto es una mala práctica y no deberías utilizarlo.

h1 {
    color: red !important;
}

Estilos en línea

Los estilos en línea son las propiedades CSS escritas en el HTML a través de la propiedad style de toda etiqueta. También es una mala práctica y debes evitarlo.

<h1 style="color: blue;">Especificidad</h1>

Especificidad en selectores

El tema de los selectores ya lo conoces, por lo tanto, los selectores de tipo ID son m√°s espec√≠ficos que las clases, atributos y pseudoclases. Estas √ļltimas son m√°s espec√≠ficas que los elementos y pseudoelementos. El selector universal tiene una especificidad de 0.

En un proyecto deber√≠as evitar los !important y estilos en l√≠nea, para trabajar √ļnicamente con la especificidad de los selectores. Sin embargo, debes tener presente que los selectores combinadores suman la especificidad de cada selector b√°sico para obtener la especificidad total de la regla CSS.

C√°lculo de la especificidad en selectores combinadores

Si utilizas Visual Studio Code y mantienes el mouse sobre el selector, te mostrar√° la especificidad total. Specificity Calculator es una p√°gina web donde puedes calcular la especificidad.

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 255

Preguntas 28

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

En Vscode podemos ver la especificidad de nuestros elementos colocando el cursor sobre el nombre del selector.

Entender especificidad es muy importante, sobre todo porque suele pasarnos que escribimos alg√ļn estilo y vemos que por alguna raz√≥n no se aplica. Esto es muy normal que pase y acabamos poni√©ndole un !important (que por cierto, es mala pr√°ctica usar !important ūüĎÄ).
.
¬°Lo genial de esto es que es tan f√°cil como hacer una suma! Muchas personas suelen confundirse con este tema, pero t√ļ ahora ya sabes c√≥mo funciona ūüėČ. B√°sicamente, CSS acabar√° aplic√°ndole los estilos al selector que sea m√°s espec√≠fico, y podemos determinar su especificidad simplemente haciendo una suma‚Ķ ¬°como un juego de puntos! ūüėĄ.
.
La próxima vez que tengas un problema de que tus estilos no se están aplicando (o que en el inspector de elementos te salen tachados) recuerda que probablemente puede ser un problema de especificidad. ¡Y ten siempre esta tablita a la mano!
.

Stylesheets cascade


A un nivel muy simple, esto significa que el orden de las reglas CSS importa; cuando se aplican dos reglas que tienen igual especificidad, la que viene en √ļltimo lugar en el CSS es la que se utilizar√°.

Especificidad


La especificidad es el medio por el que los navegadores deciden qué valores de propiedades CSS son los más relevantes para un elemento y, por tanto, se aplicarán. La especificidad se basa en las reglas de concordancia que se componen de diferentes tipos de selectores CSS.
La cantidad de especificidad que tiene un selector se mide utilizando cuatro valores diferentes (o componentes), que se pueden considerar como miles, cientos, decenas y unos

  • Miles
    Punt√ļa uno en esta columna si la declaraci√≥n est√° dentro de un atributo style, tambi√©n conocido como estilos en l√≠nea. Estas declaraciones no tienen selectores, por lo que su especificidad es siempre 1000.

  • Cientos

    Punt√ļa uno en esta columna por cada selector de ID contenido dentro del selector general.

  • Decenas

    Punt√ļa uno en esta columna por cada selector de clase, selector de atributos o pseudoclase que contenga el selector general.

  • Unos

    Punt√ļa uno en esta columna por cada selector de elemento o pseudo-elemento contenido dentro del selector general.

!important cambia la forma en que la cascada funciona normalmente, por lo que puede hacer que la depuración de los problemas de CSS sea realmente difícil de resolver, especialmente en una hoja de estilos grande.

No lo uses si puedes evitarlo.

La √ļnica manera de anular esta declaraci√≥n !important ser√≠a incluir otra declaraci√≥n !important en una declaraci√≥n con la misma especificidad m√°s adelante en el orden de las fuentes, o una con mayor especificidad.

Consejo importante: ūüĎČ Aprendanse a calcular la especificidad a pleno.
.
No es un chiste, NO ES UN MEME
.
Les va a ahorrar un monton de tiempo, de repente puede pasar que un estilo no les va a funcionar y no van a saber por qué, y por más que intenten no hay caso. En la mayoria de los casos, suele ser un problema de especificidad

Hola, para aportar a lo dicho sobre especificidad les dejo los imagen y un vídeo

De igual manera es importante resaltar que el important! es una mala practica, ademas de siempre intentar implementar los estilos por sus clases o id, lo cual hara nuestro codigo de html mas limpio.

https://www.youtube.com/watch?v=v5GxoV14YOE

Creo que inconscientemente la profe eligió el color azul ya que prefiere seguir al conejo hasta el País de las Maravillas y con esto hacernos tomar el curso de animaciones con CSS donde se ven en práctica todo este tema de la especificidad y selectores… Eso o necesito dormir xD

Wow, llevo ya bastante pr√°cticas con CSS (nada 100% profesional) e incluso he hecho proyectos enteros escolares con CSS puro y no ten√≠a ni idea de la existencia de la especificidad, ni si quiera hab√≠a visto alguna menci√≥n de esto en ning√ļn lado, siento que he descubierto un secreto muy oculto de CSS pero realmente parece que es un aspecto muy b√°sico jajaj XD.
Estaba por saltarme este curso pues creía que sabía lo esencial de HTML y CSS pero esto me hace ver que siempre hay algo nuevo por aprender.

Usar !important es como usar div en cualesquier lugar del HTML. Son malas prácticas y pueden poner en evidencia una escasa comprensión del lenguaje.

__

Por aqui dejo un excelente video, para reforzar lo aprendido en esta clase.
Se lo recomiendo muchisimo, a mi por ejemplo, me ayudo mucho a entenderlo mejor. Espero t√°mbien le sirva a ustedes.

https://www.youtube.com/watch?v=6fh7ZTj2t2k

Si escriben ! se va agregar toda la estructura b√°sica ūüėÉ

Tiene importancia el orden en el que colocas las clases en la etiqueta HTML?

He estado haciendo pruebas y cuando tengo dos bloques de codigo en css el que prevalece no es el ultimo en CSS, sino el la primera clase definida en la etiqueta HTML
.
Aquí está mi codigo

.
En la etiqueta <p> tengo primero la class=‚Äúdos‚ÄĚ y despues la class=‚Äúuno‚ÄĚ.
.
En mi CSS tengo los dos bloques de codigo, primero tengo el que hace referencia a mi class .dos y despues tengo el que hace referencia a mi class .uno
.

.
Por la clase, habia entendido que el navegador le daria mayor prioridad al segundo bloque de codigo en mi CSS porque es el ultimo, pero lo que me encuentro es que le da prioridad al primero y solo se me ocurre una razon: El orden en el que se definen las clases en la etiqueta HTML es importante. Este es mi resultado
.

.
Ahora, para terminar de validar el experimento, en mi caso yo tengo dos clases en la misma etiqueta y veo que la mayor prioridad la tiene la primera clase que se definió, esto contradice lo que vi en la clase que nos dice que la mayor prioridad la tiene el ultimo bloque en CSS.
.
Pero ¬ŅQu√© pasa si no tenemos dos clases en la misma etiqueta sino una clase en cada etiqueta? ¬ŅCu√°l se lleva la prioridad en este caso?
.
Ahora hice 1 sola clase, pero en CSS hice dos bloques con instrucciones diferentes, tienen la misma especificad y obviamente el mismo orden en que la clase fue definida en HTML‚Ķ ¬ŅCu√°l prevalece?
.

.
En este caso, si prevalece el ultimo bloque de codigo en CSS.
.

.
CONCLUSION
.
Si la especifidad es la misma, el navegador le dar√° prioridad al bloque de CSS que haga referencia a la primera clase definidad en esa etiqueta (esto es para los casos donde una etiqueta tenga m√°s de una clase o ID y tengan instrucciones de CSS diferentes).
.
Si la especificidad es la misma y el orden en que se definió la clase o ID es el mismo, prevalecerá el ultimo bloque de codigo de CSS

Una pr√°ctica para entender mejor la especificidad, seguramente a alguno le servir√° ūüėé.
.

jerarquia de la importancia en css
!important = 10000
estilos en linea = 1000
#id =100
.clases= 10
psrudo clases y pseudoelementos =10
selectot univeral = 0

La especifidad
Es como el navegador va a mostrar el CSS de acuerdo a que tan especifico es el selector que creaste.

Especifidad > Cascada

Especificidad: establece cómo de específico es un selector para saber qué estilo aplicar. El cálculo se realiza con la siguiente fórmula, por orden de prioridad:

  • Estilos inline (en l√≠nea) ‚Üí 1,0,0,0
  • Ids ‚Üí 0,1,0,0
  • Clases, atributos y pseudoclases ‚Üí 0,0,1,0
  • Etiquetas y pseudoelementos ‚Üí 0,0,0,1
  • Si indicamos la especificidad de !important GANA SIEMPRE Y NO SE USA NUNCA pero si se aplica esta especificidad indicaras que no has entendido la especificidad de CSS. Por lo que se recomienda usar clases en los estilos de CSS.

Aquí facilito un enlace de un video explicativo de este tema para aclarar la teoría:
https://www.youtube.com/watch?v=6fh7ZTj2t2k

y una web que también verifica nuestro css mediante un gráfico:
https://jonassebastianohlsson.com/specificity-graph/

Yo creyendo que sabia lo suficiente de CSS y Estefany llega con la especificidad y la predominancia con el ejemplo de los colores.
QUE CLASE DE BRUJER√ćA ES ESTA!
ūüėĪūüėĪūüėĪ

Buscando sobre este tema, encontré estos quizes sobre especifidad en CSS:

Specificity Wars
Can You Count Specificity?

La especificidad es un peso (importancia o valor) que se le asigna a una declaraci√≥n CSS dada, determinada por el n√ļmero correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicar√° al elemento la √ļltima declaraci√≥n encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de m√ļltiples declaraciones. Seg√ļn las reglas de CSS, en caso de que un elemento sea objeto de una declaraci√≥n directa, esta siempre tendr√° preferencia sobre las reglas heredadas de su ancestro.

Y les dejo este link, quiz√° le sirva a alguien:)
https://developer.mozilla.org/es/docs/Web/CSS/Specificity

para reflejar el grado de specificity que tiene tu codigo,
en la medida que es mas plano tu grafico mucho mejor,

https://jonassebastianohlsson.com/specificity-graph/

Recuerden si tienes dos selectores con la misma especificidad sobre un elemento, el siguiente criterio que toma el navegador es el orden en cascada es decir elegir√° la ultima regla css

Para que lo tengan en algun lado de su html y no se olviden
<!‚Äď
x 0 0 0 0 , !important
x 0 0 0 , estilos en linea
x 0 0 , #id
x 0 , clases, atributos y pseudoclases
x , elementos y pseudoelementos
0 , selector universal
‚Äď>

Dos temas muy importantes, ya que esto básicamente nos ayudara a comprender cuál es la importancia o el peso que tenga cada uno de esos selectores o el orden (cascada) en el que CSS lee la información de nuestro archivo a la hora de aplicar los estilos a nuestro documento HTML.
.
Cascada: En CSS las reglas que se escriben en la parte de abajo van a sobreescribir las reglas que est√°n en la parte de arriba.
.
Especificidad: Los tipos de selectores importan mucho, ya que el peso que tenga o el valor que se le dé a ese selector, es el que va a prevalecer por encima de los demás.

Id le gana a class
Salio azul ūüíô

Les dejo un peque√Īo aporte‚Ķ

Visual Studio Code nos permite saber la especificidad de nuestras reglas CSS

Clase 10 - Cascada y especificidad en CSS


¬ŅQu√© es la cascada en CSS?

  • Es el concepto que determina qu√© estilos se sobre escriben de un elemento. C√≥mo su nombre lo indica los estilos en CSS se aplican en cascada, es decir, que los estilos que escribamos debajo de un mismo estilo y elemento se priorizar√° el que est√° de √ļltimas.

¬ŅQu√© es la especificidad?

  • Es la forma en CSS y el navegador le dan un valor al selector que usemos para aplicar estilos a un elemento HTML, esto sin importar el lugar en donde escribamos nuestro c√≥digo.

¬ŅCu√°les son los valores que tienen los selectores para poder aplicar la especificidad?

  • !important = 10000.
  • Estilos en l√≠nea. = 1000.
  • Atributo id = 100.
  • Clases, atributos y pseudoclases = 10.
  • Elementos (etiquetas) y pseudoelementos = 1.
  • Selector universal = 0.

.

Un cuento/historia es una forma sublime de ense√Īar algo complicado (cuando se est√° aprendiendo) ūü§©

hice esta página para practicar lo aprendido y también investigué un poco.

Esta clase es muy importante por que no lo encontre en el curso definitivo de HTML y CSS.

![](

En mi opini√≥n prevalece el color blue porque es la √ļltima linea escrita

El orden de los selectores si altera el producto!

p::first-line {

color: red;
}

FALLE era # Team Rojo

#TEAM RED

https://specificity.keegan.st/
Link de especificidad

Yo cre√≥ que al ser un estilo en cascada tendr√° en cuenta el √ļltimo, es decir; blue.

Yo creo que sale de color azul, lo de abajo sobrescribe lo de arriba.

Las reglas de CSS que tienen menor especificidad son elementos y pseudoclases recuerdalo puede ser util para la vida. : )

NO aparecen los enlacen en el apartado de recursos

nos hace el color azul porque como dice que es en cascada osea que lo que va bajando es lo que se va quedadando

Para la pregunta de Estefany, con respecto al H1, creo que por la cascada que nos explica, el H1 tomar√≠a el color blue, al ser el √ļltimo que se escribi√≥ para darle color a ese H!.

Dolores de cabeza con este tema, y ya quedó aclarado

A mi me salio azul xD
![](https://static.platzi.com/media/user_upload/A%C3%B1adir%20un%20poquito%20de%20texto%20%281%29-d68435a3-6df7-4498-8202-a9684040b192.jpg) Imagen de código facilito corregida Fuente:https://codigofacilito.com/articulos/especificidad-css
![](https://i.imgur.com/LSZWYqw.png)
<https://codigofacilito.com/articulos/especificidad-css>
Tengo una pregunta como hago para abrir los archivos por separado en VScode porque siempre me abre unicamente el index?

Va a prevalecer el ID frente a la clase, porque tiene un valor mayor de especificidad.

Se mostrar√≠a el ‚ÄėBlue‚Äô porque es el ultimo que se escribi√≥, y como en CSS importa el orden porque funciona en cascada, predominar√≠a el ‚ÄėBlue‚Äô.

i tried to use ::selection, this is very usefull because you can change the highligh color on the specifict part that you select
Sale de color azul

‚Ěď Una pregunta interesante¬Ņcual tiene mayor predominancia, la cascada o la especificidad?
‚ú®ūüĎČūüŹĽCuando se trata de resolver conflictos entre reglas CSS que afectan al mismo elemento, la especificidad es lo que prevalece. Las reglas con una mayor especificidad tendr√°n prioridad sobre las reglas con una menor especificidad, incluso si las reglas con menor especificidad aparecen despu√©s en el archivo CSS.

ūüĎÄ cuando varias reglas de estilo compiten por dar estilo a un elemento, CSS utiliza la especificidad para determinar cu√°l regla debe aplicarse. Recuerda que a menudo es mejor mantener la especificidad lo m√°s baja posible y evitar el uso excesivo de !important para que tus estilos sean m√°s f√°ciles de mantener y entender

‚úÖ

!important = fuera de concurso

Like si te gusta el nombre de CSS, me encana el logo

Aqu√≠ en CSS, s√≠ importa la posici√≥n: ‚ÄúLos √ļltimos ser√°n los primeros.‚ÄĚ ūüėÉ

Pregunta Respuesta
¬ŅQu√© es el concepto de cascada en CSS? Se refiere al proceso de aplicar m√ļltiples reglas de estilo a un elemento, donde algunas reglas pueden sobrescribir a otras seg√ļn su especificidad y orden
¬ŅC√≥mo afecta el orden de las reglas en CSS? Este orden es importante, ya que las reglas que se encuentran m√°s abajo en el c√≥digo pueden sobrescribir las reglas que se encuentran arriba en caso de conflicto
¬ŅCu√°l es la jerarqu√≠a de especificidad en CSS? La jerarqu√≠a de especificidad en CSS determina qu√© reglas prevalecen sobre otras en caso de conflicto. Se ordena desde el valor m√°s alto (important) hasta el m√°s bajo (selector universal)
¬ŅQu√© es el selector ‚Äúimportant‚ÄĚ en CSS? ‚ÄúImportant‚ÄĚ es una declaraci√≥n que se puede a√Īadir a una regla de estilo para darle la m√°xima prioridad, ignorando otros estilos. Hay que usarla con moderaci√≥n debido a su fuerza
¬ŅC√≥mo se calcula la especificidad en CSS? La especificidad en CSS se calcula considerando la cantidad de IDs, clases, atributos y pseudo clases/pseudo elementos en un selector. A mayor especificidad, mayor prioridad tiene una regla
¬ŅC√≥mo se resuelven conflictos de especificidad? En caso de conflictos de especificidad en CSS, prevalecer√° la regla con mayor especificidad. Si dos reglas tienen la misma especificidad, la que aparece m√°s abajo en el c√≥digo tendr√° prioridad

Mi resumen

| Tipo de Selector | Puntos |
| --- | --- |
| !important | 10000 |
| Estilos en Línea | 1000 |
| ID Selector | 100 |
| Clases, atributos y Psedoclases. | 10 |
| Elementos y Pseudoelementos | 1 |
| Selector Universal | 0 |

!Important: es le indicas el valor de la importancia del atributo -Estilo en línea -ID -Clases, atributos y pseudoclases -Selector universal

Hola
El h1 va a salir en nuestra página web de color azul, ya que CSS reescribió el color, dijo mmm primero vas a ser rojo y luego dijo oh no eres azul

Espesificidad de los selectores

El del id

Sale de color azul.

# Explicación ejemplo ## Primero ```css #id h1::first-letter ``` - **#id** : id = 100 - **h1** : Elemento = 1 - **::first-letter** : Pseudoelemento = 1 **SUMA TOTAL : 102** --- ## Segundo ```css p .sidemenu div:hover ``` - **p** : Elemento = 1 - **.sidemenu** : Clase = 10 - **div** : Elemento = 1 - **:hover** : Pseudoclase = 10 **SUMA TOTAL = 22**

Explicación ejemplo

Creo que es así:

Primero

#id h1::first-letter
  • #id : id = 100
  • h1 : Elemento = 1
  • ::first-letter : Pseudoelemento = 1

SUMA TOTAL : 102

Segundo

p .sidemenu div:hover
  • p : Elemento = 1
  • .sidemenu : Clase = 10
  • div : Elemento = 1
  • :hover : Pseudoclase = 10

SUMA TOTAL = 22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Especificidad</title>
    <style> 
        #platzi {
            color: red;            
        }
        .master {
            color: springgreen;
        } 
    </style>
</head>
<body>
    <div id="platzi" class="master">Platzi</div>
</body>
</html>
  • La cascada y la especificidad son dos conceptos fundamentales en CSS que determinan c√≥mo se resuelven los conflictos y se aplican los estilos cuando hay reglas CSS que se solapan o compiten entre s√≠. Aqu√≠ tienes una descripci√≥n de cada uno:

  • Cascada (Cascade):

ūüéąLa cascada se refiere al proceso de determinar qu√© reglas de estilo se aplican a un elemento cuando hay m√ļltiples reglas que se aplican a ese elemento.
ūüéąLas reglas de estilo se aplican en funci√≥n de su importancia y su especificidad, as√≠ como del orden en que aparecen en el c√≥digo CSS.
ūüéąLas reglas de estilo m√°s espec√≠ficas tienen m√°s peso y sobrescriben las reglas menos espec√≠ficas.
ūüéąSi hay conflictos entre reglas de igual especificidad, se utiliza la regla que aparece m√°s abajo en el c√≥digo CSS.

  • Especificidad (Specificity):

ūüéąLa especificidad es un valor que se asigna a una regla de estilo y determina qu√© tan espec√≠fica es en relaci√≥n con otras reglas.
ūüéąSe mide en t√©rminos de selectores utilizados en una regla de estilo y su peso relativo.
ūüéąLos selectores tienen diferentes valores de especificidad. Por ejemplo, los selectores de ID tienen una mayor especificidad que los selectores de clase o de etiqueta.
ūüéąLa especificidad se representa en una secuencia de cuatro valores (a, b, c, d) conocidos como la especificidad en t√©rminos de peso. Cuanto mayor sea el valor de a, b, c o d, mayor ser√° la especificidad de la regla.
ūüéąPor ejemplo, la regla h1 tiene una especificidad de (0, 0, 0, 1), mientras que la regla .clase tiene una especificidad de (0, 0, 1, 0) y la regla #id tiene una especificidad de (0, 1, 0, 0).
ūüéąSi hay conflictos entre reglas de igual cascada, se utiliza la regla con la especificidad m√°s alta.
ūüéąEs importante entender c√≥mo funciona la cascada y la especificidad para evitar conflictos y asegurarse de que los estilos se apliquen correctamente. Al escribir CSS, es √ļtil seguir buenas pr√°cticas y utilizar selectores espec√≠ficos y estructurar el c√≥digo de manera que sea f√°cil de mantener y evitar problemas de cascada no deseada.

quedaria azul

cascada y espedificidad en CSS X0000 | !important X000 | Estilos en linea X00 | #id X0 | Clases,atributos y pseudoclases X | elementos y pseudoelementos 0 | selecto universal

Calculadora para medir especificidad del codigo en css

El color m√°s abajo sobrescribe

segun yo el h1 quedaria azul

Ahora entiendo el meme de !important en Css

Es esta p√°gina pueden ver m√°s sobre especificidad en css

  • pueden instalar una calculador de especifidad con el siguiente comando:
npm install specificity

La cascada en CSS es el proceso que sigue el navegador para determinar qu√© estilos aplicar a un elemento cuando hay m√ļltiples reglas de estilo que podr√≠an afectarlo. La cascada se basa en tres criterios principales: importancia, especificidad y orden de origen.

I IMPORTANCIA

Las reglas de estilo pueden provenir de diferentes fuentes segun su importancia:

  • !important
  • Estilos en l√≠nea
  • Hojas de estilo internas
  • Hojas de estilo externas
  • Estilos predeterminados del navegador

1. !important

Puedes utilizar la declaración !important en una regla CSS para aumentar su prioridad y asegurarte de que se aplique incluso si hay otros estilos en conflicto. Sin embargo, el uso excesivo de !important se considera una mala práctica y puede dificultar la depuración y el mantenimiento del código.

2. Estilos en línea:

Estos estilos se aplican directamente a un elemento HTML utilizando el atributo style. Los estilos en l√≠nea tienen la prioridad m√°s alta en la cascada y generalmente se utilizan para casos espec√≠ficos en los que se requiere un estilo √ļnico para un elemento. Por ejemplo:


<p style="color: blue; font-size: 16px;">Este es un párrafo con estilos en línea.</p>

3. Hojas de estilo internas:

Las hojas de estilo internas se definen dentro de un documento HTML utilizando la etiqueta <style> en la sección <head>. Estos estilos tienen una prioridad más baja que los estilos en línea pero mayor que las hojas de estilo externas y los estilos predeterminados del navegador. Por ejemplo:


<!DOCTYPE html>
<html>
<head>
  <style>
    **p {
      color: red;
      font-size: 18px;
    }**
  </style>
</head>
<body>
  <p>Este es un p√°rrafo con estilos de una hoja de estilo interna.</p>
</body>
</html>

4. Hojas de estilo externas:

Las hojas de estilo externas son archivos separados con extensión .css que contienen reglas de estilo. Estos archivos se enlazan a un documento HTML utilizando la etiqueta <link> en la sección <head>. Las hojas de estilo externas tienen una prioridad más baja que los estilos en línea e internos pero mayor que los estilos predeterminados del navegador. Por ejemplo:

Archivo estilos.css:

cssCopy code
p {
  color: green;
  font-size: 20px;
}

Archivo index.html:

htmlCopy code
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <p>Este es un p√°rrafo con estilos de una hoja de estilo externa.</p>
</body>
</html>

5. Estilos predeterminados del navegador:

Los navegadores tienen un conjunto de estilos CSS predeterminados que se aplican a los elementos HTML si no se especifica ning√ļn otro estilo. Estos estilos var√≠an ligeramente entre los navegadores y tienen la prioridad m√°s baja en la cascada.

II ESPECIFICIDAD

Si varias reglas tienen la misma importancia, la especificidad ayuda a determinar cuál se aplicará. La especificidad se calcula en función de los selectores utilizados en las reglas CSS. Los selectores se pueden clasificar del mas especifico al menos especifico:

a. ID selectors (#)
b. Class selectors, attribute selectors y pseudo-classes ( . )
c. Element selectors y pseudo-elements (h p [href] )

D. Selector universal (*)

La especificidad se representa como una serie de tres n√ļmeros (a, b, c), donde cada n√ļmero corresponde a la cantidad de selectores en cada categor√≠a. Por ejemplo, si una regla tiene:

  • 1 ID selector, 2 class selectors y 1 element selector

  • Su especificidad ser√° (1, 2, 1).

  • La regla con la especificidad m√°s alta se aplicar√° en caso de conflicto.

  • Ejemplo -Evaluacion de especificidad

    Supongamos que tienes un documento HTML con un p√°rrafo que tiene una clase .destacado y un ID #resaltado. Ahora, imaginemos que tienes dos declaraciones CSS que intentan cambiar el color del texto de este p√°rrafo:

    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
      .destacado {
        color: blue;
      }
    
      #resaltado {
        color: red;
      }
    </style>
    </head>
    <body>
    
    <p class="destacado" id="resaltado">Este es un p√°rrafo con clase "destacado" e ID "resaltado".</p>
    
    </body>
    </html>
    
    

    En este caso, ambas declaraciones CSS tienen la misma importancia, ya que ambas son parte de la misma hoja de estilo interna. Ahora, debemos evaluar la especificidad de cada una:

    1. La primera declaraci√≥n .destacado tiene una especificidad de (0, 1, 0), ya que contiene 1 selector de clase y ning√ļn selector de ID ni de elemento.
    2. La segunda declaraci√≥n #resaltado tiene una especificidad de (1, 0, 0), ya que contiene 1 selector de ID y ning√ļn selector de clase ni de elemento.

    Dado que la declaración #resaltado tiene una especificidad mayor que la declaración .destacado, el color del texto del párrafo será rojo, ya que la regla con mayor especificidad prevalece en caso de conflicto.

III ORDEN DE ORIGEN

Si las reglas tienen la misma importancia y especificidad, el orden en que se definen determina cu√°l se aplicar√°. Por lo general, la regla definida m√°s recientemente en el c√≥digo tiene prioridad sobre las reglas definidas anteriormente. Sin embargo, si hay m√ļltiples hojas de estilo, tambi√©n influye el orden en que se enlazan en el documento HTML.

Estefany aparte de ense√Īar muy bien, de una manera muy detallada, clara y t√©cnica, es bastante linda, muy tierna.

Talvez explicaron cual es mas especifico, pero yo explico el porque, mas especifico se refiere a cual se refiere mas especificamente al elemento, los ID son unicos y por eso son tan especificos, las CLASES no son unicas asi que son menos especificas, y el * o el estilo general no es NADA especifico ya que se refiere a todos, asi que es el que tiene menos importancia para css, y puede ser usado para que todos tengan un estilo hasta que tu mismo decidas cambiar ese estilo, es algo asi como un estilo por defecto que tu colocas (aunque ya no seria por defecto ya que lo colocaste tu mismo pero eso a nadie le importa verdad?).

Nos sale siempre el azul a menos que escribemos !Important

Encontré este artículo reciente sobre buenas prácticas en CSS y una de ellas menciona evitar en lo posible la etiqueta !important

La mejor clase hasta el momento para m√≠‚Ķno ten√≠a en cuenta sobre esto de la especificidad y en ocasiones me quitaba horas viendo el porque no aplicaba el estilo que quer√≠a a algunos elementos ūüėÖ.

Cascada

Al aplicar estilos, se debe tener en cuenta la cascada, que básicamente es que el css se ejecuta de arriba a abajo, entonces los estilos de abajo son los que se sobrescriben de los de arriba y se aplicarían.

Especificidad

La especificidad de los selectores define la importancia de cada estilo en un selector, para concluir cual estilo se va a aplicar.

Los factores que afectan a la especificidad incluyen que selectores se usan y como se llaman, por ejemplo, si hay dos selectores p el que tenga mayor especificidad se va a aplicar

Es más específico el primero por ser un selector de ID

Platzi tomar√≠a el color azul, porque seg√ļn el orden en que aparece en el c√≥digo, ese es el √ļltimo estilo que aplica

Los estilos en línea son los estilos escritos directamente en el HTML (estilos embebidos o inyectados), por medio de la etiqueta <style>, que usa la profesora. Esos estilos se sobreescribirán a los estilos que un documento externo de CSS tenga para los mismos selectores, aunque esté vínculado al HTML.

consultando algo sobre especificidad encontré lo siguiente

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

no entiendo tus clases

Dato:
clase 10
duracion de clase 10:10

La metodologia utilizada para la aplicacion de estilos al html es el embebido. no es correcto desarrollarlo de esa manera; en el curso definitivo de html y css lo ilustran.

Cuando se emplea important en una declaraci√≥n de estilo, esta declaraci√≥n sobrescribe a cualquier otra. Aunque t√©cnicamente !important no tiene nada que ver con especificidad, interact√ļa directamente con esta. Sin embargo, el uso de !important es una mala pr√°ctica y deber√≠a evitarse porque hace que el c√≥digo sea m√°s dif√≠cil de depurar al romper la cascada (art√≠culo en ingl√©s) (en-US) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el !important son aplicadas al mismo elemento, se aplicar√° la declaraci√≥n con mayor especificidad.

Algunas reglas de oro:

Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
Nunca uses !important cuando estés intentando escribir un plugin/mashup.
Nunca uses !important en todo el código CSS.

https://developer.mozilla.org/es/docs/Web/CSS/Specificity

un poco de documentación para complementar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color:salmon; 
    
        }
        p{
            color:rgb(9, 94, 222);
        }
        p:hover{
            color:skyblue;

        }    
    </style>
</head>
<body>
    <p>Hola</p>
    
</body>
</html>

En este caso de prueba sucede lo mismo, css aplica la ultima indicación que se le dio.