Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Especificidad en selectores

27/55
Recursos

Aportes 209

Preguntas 36

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

REGLAS DE CASCADA (notas):

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 鈥減eso鈥 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)


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

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.

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.

馃搶 La especificidad es la importancia o valor que se le asigna a una declaraci贸n CSS.

Esto lo vi en la clase de soy dalto.

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

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

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.

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.

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 馃槷

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.

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

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 鈥渦sualmente鈥 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.

  • 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 贸 鈥淚nline鈥 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 que虂 valores de una propiedad CSS son ma虂s relevantes para un elemento y, por lo tanto, sera虂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.

<h3>Orden al declarar CSS</h3>
  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

<h3>Conflicto en la declaraci贸n</h3>

驴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

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 los estilos que son llamados utility class (clases de utilidad) SI llevan el **!important**porque quieres que se apliquen SI o SI los estilos

CSS Specificity Calculator. 鈥 CodeCaptain

https://www.codecaptain.io/tools/css-specificity-calculator

no me quedo claro lo que es un estilo embebido

importancia(especificidad(orden))

importancia: 1) Estilos navegador
2) Estilos nuestro
3) !important

Especificidad:
!important 1,0,0,0,0
Inline styles: 0,1,0,0,0
#id: 0,0,1,0,0
.class 0,0,0,1,0
tag 0,0,0,0,1

Reglas de cascada:
Conflicto - !important?-Inlyne?-selectores con especificidad diferente? - utiliza declaraciones que vienen en su fuente original

Orden de las fuentes - las del final anularan las que sucedan antes en caso de conflicto.

.

Esta clase es una de las mas importantes que he recibido en Platzi. - Excelent information Diego!

Aca no se si aplica el hecho de 鈥淓l orden de los factores no altera el producto鈥, no s茅. Pero aca tambien esta el sitio para que puedan entender este concepto de 鈥淓specificidad鈥.
https://developer.mozilla.org/es/docs/Web/CSS/Specificity

La especificidad es un concepto en CSS que determina qu茅 regla se aplicar谩 a un elemento en particular cuando existen m煤ltiples reglas que se aplican al mismo elemento. La especificidad se utiliza para resolver conflictos entre reglas y determinar cu谩l de ellas debe tener prioridad sobre otras.

Los selectores tienen diferentes niveles de especificidad. Los selectores m谩s espec铆ficos tienen prioridad sobre los menos espec铆ficos, lo que significa que las reglas de estilos asociadas a selectores m谩s espec铆ficos anular谩n a las reglas asociadas a selectores menos espec铆ficos.

Existen diferentes tipos de selectores en CSS, y cada uno de ellos tiene un nivel de especificidad diferente. Los selectores de etiqueta tienen un nivel de especificidad m谩s bajo, mientras que los selectores de clase y los selectores de ID tienen un nivel de especificidad m谩s alto. Tambi茅n puedes utilizar selectores de atributo y selectores de pseudoclase para aumentar a煤n m谩s la especificidad de una regla.

Es importante tener en cuenta que la especificidad no solo se basa en el tipo de selector que utilizas, sino tambi茅n en la cantidad de selectores que utilizas. Por ejemplo, si utilizas un selector de ID y un selector de clase juntos para seleccionar un elemento, esto tendr谩 m谩s especificidad que si solo utilizaras un selector de clase solo.