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

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

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

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

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

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

Herencia

26/55
Recursos

Aportes 144

Preguntas 31

Ordenar por:

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

o inicia sesi贸n.

Herencia y sus valores:
Inherit. Este es un valor por medio de una keyword que especifica que, a la propiedad que se la apliquemos debe de heredar los valores de su elemento padre. Podemos decir que la palabra Inherit significa 鈥Usa el valor de mi padre鈥, si el elemento padre no tiene definido dicho valor el navegador seguir谩 el DOM hasta que encuentre un elemento superior que lo contenga, y en ultima instancia de no tenerlo ning煤n elemento superior se aplicara el valor por defecto.

Initial. Este valor pertenece a la especificaci贸n CSS3 y cuando aplicamos a una propiedad el valor initial estamos dando el valor inicial y predefinido por el navegador en cuesti贸n.

Upset. Este valor unset es una combinaci贸n entre inherit y initial, cuando utilizamos este valor en una propiedad esta tratara de heredar el valor de su elemento padre si este esta disponible, de no ser as铆 este valor colocar谩 el valor de la propiedad en su valor inicial, como si us谩ramos inherit e initial juntos.

Voy a modificar el CSS de la abue para que me hereden los terrenos

abue{
	terrenos;
}
yo{
	terrenos: inherit;

S铆ganme para m谩s trucazos c:

Mis notas juntando tambi茅n la de los compa帽eros 馃槃

Algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto:

body {
  color: green;    /* Color de texto verde */
}

Aplicamos a la etiqueta HTML <body> el color de texto verde. En principio, esta propiedad aplicar谩 dicho color a los textos que est茅n dentro de dicha etiqueta <body>.

Sin embargo, si tenemos m谩s etiquetas dentro, como por ejemplo una etiqueta <div> con texto en su interior, si no tenemos aplicada una propiedad color a dicho elemento, veremos que tambi茅n aparece en color verde. Esto ocurre porque la propiedad color es una de las propiedades CSS que, en el caso de no tener valor espec铆fico, hereda el valor de su elemento padre.

Ojo, porque esto no ocurre si lo hacemos con otras propiedades CSS, como por ejemplo, con los bordes de un elemento HTML:

body {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

Si esta propiedad aplicar谩 herencia, todos los elementos HTML situados en el interior de <body> tendr铆an un borde rojo, comportamiento que no suele ser el deseado. Por esa raz贸n, la herencia no ocurre con todas las propiedades CSS, sino s贸lo con algunas propiedades como color o font, donde si suele ser deseable.



Valores especiales
Adem谩s de los valores habituales de cada propiedad CSS, tambi茅n podemos aplicar ciertos valores especiales que son comunes a todas las propiedades existentes. Con estos valores modificamos el comportamiento de la herencia en dicha propiedad:

  • inherit Hereda el valor de la propiedad del elemento padre.
  • initial Establece el valor que ten铆a la propiedad inicialmente.
  • unset Combinaci贸n de las dos anteriores: Hereda el valor de la propiedad del elemento padre, y en caso de no existir, su valor inicial.
    El siguiente ejemplo para forzar la herencia en una propiedad que no la aplica por defecto:
body {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

div {
  border: inherit;
}

Si tenemos un elemento <div> dentro del <body>, el primero heredar谩 los estilos del elemento <body>, ya que le hemos especificado el valor inherit en la propiedad border.



Fuente Herencia en CSS

Buenas noches! Unas cositas que pude conseguir y para complementar nuestro conocimiento en esta parte. Adem谩s del concepto de especificidad (que nos ayudan bastante el momento de implementar selectores) existe el concepto de cascada que tambi茅n debemos de tener en mente, el cual es b谩sicamente que cuando existe un conflicto de dos o m谩s estilos en un mismo elemento se toma el que se encuentre de 煤ltimo 馃榾. En un segundo lugar, tenemos que USUALMENTE (no siempre) los valores heredados son valores computados, que no necesariamente son los valores especificados para un estilo determinado ya que si no se encuentra el mismo entonces el navegador es obligado a implementar los estilos por default como explico Diego. Link para consulta: https://www.w3.org/TR/css-cascade-3/

Atenta a sus observaciones!

Tratar茅 de hacer ENTENDIBLE la herencia:
鈥nherit: ya sabemos
鈥nitial: fuerza a no aplicar la herencia, lo contrario a inherit, es parte de especificidad, un tema que veremos adelante.
鈥nset: Es como un inherit flojo, ya que inherit inspecciona hasta encontrar un padre con un estilo, unset solo inspecciona el padre pr贸ximo, si encuentra estilo lo hereda, si no lo hay se resetea al su valor natural.
鈥 Revert: Pone su valor a la capa de estilo por defecto del navegador.

SI comet铆 un error, diganlo, si lo explique bien denme ese coraz贸n

La herencia en CSS es algo muy 煤til cuando quieres 鈥渞eciclar鈥 los estilos del padre, pero recuerda que todos lo que cambies en el padre tambi茅n afectar谩 a los hijos que est茅n heredando estilos de el

Algo no me cuadraba en la explicacion del ejemplo del <html> font-size = 75%, y es que que @degranda indica que el font-size de <h1> no heredaba del seteado en <html>, creo yo sin embargo creo que si lo hace pero de una manera muy particular que paso a explicar

primero indicar los valores por default segun mi navegador Chrome (sin el <html> font-size = 75%):

  • <html> font-size 16px
  • <h1> font-size 32px (2em)
  • <p> font-size inherited (16px)

una vez seteado el <html> font-size = 75%:

  • <html> font-size 12px
  • <h1> font-size 24px
  • <p> font-size inherited (12px)

Como lo indico, todos los font-size鈥檚 de <html> y elementos debajo de este son el 75% de sus valores por default, inclusive <h1> es afectado por ese 75%, y aqui es donde viene lo particular y es que no esta heredando el valor de 12px de <html> si no mas bien esta aplicando el porcentaje que indica <html> font-size sobre su valor original de 32px

Cuando @degranda ya setea explicitamente <h1> font-size = inherit el valor es diferente al 鈥渋nherited鈥 anterior

  • <h1> font-size 12px

y es que parece ser que aca no toma el 75% sino mas bien directamente el valor en pixeles del <html>

Se pueden aplicar estos 3 valores a las propiedades en css.

Si quieres leer mas aqui les dejo este Link

鈥 Herencia: La herencia es el mecanismo mediante el cual, determinadas propiedades de un elemento padre son transferidas a un elemento hijo, no todas la propiedades son trasferidas de padre a hijo, ya que hay muchas que no tienen sentido que lo fueran ( por ejemplo los bordes)

Es importante tener bien en claro a lo que nos referimos cuando hablamos de etiquetas padres e hijo, cuando una etiqueta contiene a otra, se dice que esta es su etiqueta padre.

Tenemos que entender que hay muchos valores que se heredaran, por ejemplo, si cambio el color de fuente de en una etiqueta, todos sus hijos heredaran esta propiedad, pero si le asigno un borde negro a una etiqueta padre seria il贸gico que todos sus hijos heredaran esta propiedad.

鈥 Controlar la herencia: CSS nos brinda 4 valores que nos permite tener control de la herencia de una propiedad, todas las propiedades de CSS aceptan estos valores.

鈥 Inherit: Establece que el valor de la propiedad sea heredado de la etiqueta padre.

鈥 Initial: Establece que el valor de esa propiedad ser谩 establecida por la hoja de estilos del navegador.

鈥 Unset: El valor Unset es como usar Inherit e Initial al mismo tiempo, tiene dos casos.

  1. En caso de que el valor se herede de forma natural, el valor de esta propiedad ser谩 heredado.

  2. En caso de que el valor no se herede de forma natural funcionara como Initial.

Mas informaci贸n sobre el tema de herencia en el siguiente link:
1. Cascada y Herencia
2. Herencia_MDN Web Docs

Herencia

Herencia es el c贸digo CSS que se le va a pasar de un padre a un hijo.

INHERIT: Especifica que el valor que usemos herede el valor del elemento padre.

INITIAL: Este valor da el valor inicial y predefinido por el navegador en uso.

UNSET: Este es la combinaci贸n de inherit e initial, este valor se usa cuando una propiedad quiere heredar el valor de su elemento padre si este es disponible, en caso de no ser disponible este valor pondr谩 el valor de la propiedad en su valor inicial como si usaramos inherit e initial juntos.

Un concepto muy importante de CSS sali贸 a la luz en el minuto 1:39. Si se dan cuenta el margin-bottom del <h1> y el margin-top de <p> se estan 鈥渃ombinando鈥.
Esto es un fen贸meno de CSS llamado margin collapsing. Es b谩sicamente cuando los m谩rgenes verticales de elementos adyacentes se combinan.
En este enlace pueden ver algunas reglas que se deben cumplir para que ocurra el margin collapsing

Resumen y grafico

  • h1 recibe por el navegador un tama帽o especifico
  • h1 est谩 dentro del html pero no est谩 tomando el 75%
    de tama帽o de fuente que le indicamos a todo nuestro
    html solo est谩 tomando el tipo de fuente, as铆 que
    usamos inherit en h1 para que herede esa propiedad 馃槄

Hola alguien saber porque en mi inspector cuando aplico el 75% en la fuente no me sale el tama帽o en pixeles solo me sale el porcentaje

vi el video 3 veces para entenderlo poco a poco vamos avanzado!!

Herencia
En CSS existe el concepto de la herencia en el cual podemos sacar informaci贸n de los 鈥減adres鈥 para copiarla o hacer algo con ella. En este caso los padres pueden ser las etiquetas contenedoras que contienen a nuestros elementos

  • Herencia, es c贸digo css que el elemento padre heredar谩 al hijo.
  • Inherit, Indica que heredar谩 los estilos de su elemento padre
  • Initial, Indica que obtendr谩 los valores predeterminados del navegador.
  • upset, combinaci贸n de inherit + initial, intentar谩 heredar los estilos de su elemento padre, si no esta disponible obtendr谩 los valores predeterminados.

Por defecto el navegador tiene un font-size:16px

@degranda estoy muy contento de tomar este curso. Ahora comienzo a entender CSS y ya no tendr茅 que hacer experimentos hasta lograr lo que quiero. Me dio cuenta de que es un tema de tener una buena base.

Clase 26 - Herencia


驴Qu茅 es la herencia en CSS?

  • Es el c贸digo CSS que se le pasa de un elemento padre a un elemento hijo.

驴De d贸nde hereda un elemento <p> su propiedad font-size?

  • Del elemento padre m谩s cercano que tenga.

驴El elemento <html> puede dar en herencia a otros elementos estilos que le pongamos a 茅l?

  • S铆.

驴Para qu茅 nos sirve la propiedad font-family?

  • Para cambiar la fuente del elemento.

驴Cu谩l es el tama帽o de fuente que tiene definido el elemento <html>?

  • 16px.

驴Por qu茅 un elemento <h1> no hereda el font-family del elemento <html>?

  • Porque el navegador est谩 sobreescribiendo los estilos de este elemento con sus propios estilos.

驴Para qu茅 nos sirve el valor inherit en una propiedad de CSS?

  • Este valor fuerza que el elemento herede dicha propiedad de su elemento padre m谩s cercano.

TIP: Si se trabaja con rem (recomendable en fonts), aplicar en el body la propiedad font-size: 62.5%, para que 1rem valga 10px y se haga un poco m谩s f谩cil el control de tama帽o.

Notas de la clase

Y nunca lo olviden, amiguitos: tanto la palabra 鈥渢铆tulo鈥 como la palabra 鈥減谩rrafo鈥, llevan tilde. 馃槈

Recomiendo este juego, excelente para practicar selectores

https://flukeout.github.io/

html {
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
font-size: inherit;
}

Herencia

la herencia es la capacidad de los padres de heredar estilos a los hijos de un contenedor

Herencia

Es el c贸digo CSS que pasa de un padre a un hijo. Por defecto html viene con estilos como el tipo de fuente y el tama帽o.

html {
    font-size: 75%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

html por defecto usa 16px como tama帽o de fuente. Al pedirle el 75% la pondr谩 en 12px. Adem谩s cambiamos el tipo de fuente. Sin embargo, observamos que solo se aplican a la etiqueta p. Aunque h1 cambi贸 el tipo de fuente, no lo hizo el tama帽o. Esto porque no lo est谩 heredando ya que el navegador no toma el tipo de fuente como padre.

h1 {
    font-size: inherit;
}

Aqu铆 aplicamos la propiedad herencia al h1. Lo que har谩 ser谩 tomar el tama帽o de fuente de su padre m谩s cercano. Como ni main o body tienen tama帽o de fuente definido (en ese orden), lo tomar谩 de la etiqueta html, que s铆 tiene.

Hay ciertos estilos que nuestra etiquetas van a heredar de sus contenedoras, por lo que es importante decidir cuando esto nos conviene o no.

Propiedades Heredadas VS Propiedades No Heredadas

Las propiedades heredadas obtienen la propiedad de su padre y no del elemento ra铆z. Mientras que las propiedades no heredadas siempre tendr谩n el valor de ra铆z. En otras palabras el valor por defecto de una propiedad heredada es inherit mientras que en una no heredada es initial.

La herencia en CSS es un mecanismo en el cual determinadas propiedades de un elemento padre se transmiten a sus hijos. 鈥 Por ejemplo, los m谩rgenes no se heredan porque es poco probable que un elemento hijo necesite los mismos m谩rgenes que su padre. Es por eso que entra en juego el valor inherit.

Herencia es el mecanismo en el que algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto. Por ejemplo:
CSS

html {
  color: red;
}

HTML

<body>
    <main>
      <h1>Soy un titulo</h1>
      <p>Soy un parrafo</p>
    </main>```


La propiedad color aplicada es heredada, por esto todos los elementos hijos de la ra铆z html tendr谩n un color rojo. Ahora, existen distintas propiedades las cuales manipulan el comportamiento de la herencia: 
鈥	Inherit. Este es un valor por medio de una keyword que especifica que, a la propiedad que se la apliquemos debe de heredar los valores de su elemento padre. Podemos decir que la palabra Inherit significa 鈥淯sa el valor de mi padre鈥, si el elemento padre no tiene definido dicho valor el navegador seguir谩 el DOM hasta que encuentre un elemento superior que lo contenga, y en ultima instancia de no tenerlo ning煤n elemento superior se aplicara el valor por defecto.

鈥	Initial. Este valor pertenece a la especificaci贸n CSS3 y cuando aplicamos a una propiedad el valor initial estamos dando el valor inicial y predefinido por el navegador en cuesti贸n.

鈥	Unset. Este valor unset es una combinaci贸n entre inherit y initial, cuando utilizamos este valor en una propiedad esta tratara de heredar el valor de su elemento padre si este esta disponible, de no ser as铆 este valor colocar谩 el valor de la propiedad en su valor inicial, como si us谩ramos inherit e initial juntos.

Clase 26 - Herencia

Nos menciona que El navegador tiene como font size 16px por predeterminado, lo que significa que todo contenido vendr谩 as铆 por defecto

lo que esta heredando el html es el tipo de fuente

al utilizar font size inherit hacemos que herede de su padre el valor del size

la herencia es b谩sicamente tomar caracter铆sticas de las clases padres y as铆 poderlas utilizar en otras posteriormente

elemento
{
	atributo: inherit;
}

Lo que hacemos es indicar que se herede el estilo DEL ATRIBUTO QUE ESTAMOS INDICANDO del elemento padre, si el elemento padre no tiene definido un estilo al atributo que estamos buscando. Este ir谩 a buscar este estilo en los elementos superiores de la etiqueta padre hasta encontrar uno. Ya si no se encontr贸 este estilo en los elementos superiores, se le definira un estilo por defecto al atributo que estabamos buscando herredar.

Hasta ahora muy satisfecho con este curso, ten铆a confusi贸n con muchos conceptos del CSS, @degranda deber铆a estar en los dem谩s cursos de la carrera arquitectura frontend.

No entend铆a la herencia hasta este v铆deo, muy bien explicado!

Tres conceptos muy importantes en CSS, cascada, herencia y especificidad.

RESUMEN CLASE 26:
HERENCIA

HTML

<!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>Herencia</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <h1>Soy un titulo</h1>
        <p>Soy un parrafo</p>
    </main>
</body>
</html>

CSS

html {
    font-size: 75%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
    font-size: inherit;
}

Ante la p茅sima explicaci贸n de esta clase 鈥渆s el c贸digo que se la pasa de un padre a un hijo鈥 驴y qui茅n carajos es el padre y qui茅n el hijo? (despu茅s de todos los t茅rminos que ense帽an, no son capaces de usar el t茅rmino preciso) pues tuve que recurrir a Google para entender esto bien: La herencia ayuda a evitar reglas CSS duplicadas, aplicando autom谩ticamente CSS a todos los descendientes de un elemento.

<!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>Herencia</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <main>
        <h1>Manchis est谩 loco</h1>
        <p>Y est谩 chiquito</p>
    </main>
</body>
</html>
html{
    font-size: 75%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1{
    font-size: inherit;
}

Considero que el curso seria mas eficiente si reciclaras el HTML y te enfocaras en CSS, puedes aprovechar eso para que cada clase conecte con la anterior y al aprender lo nuevo se relacione con lo anterior, es mi recomendacion para este modulo del curso, esta muy bien explicado eso no lo discuto.

Hay propiedades que se heredan y otras que no.
.
color, background, _font-family _son solo algunas que si se pueden heredar.
.
padding, margin, border son propiedades que no se heredan automaticamente a menos de que forcemos la herencia con el keyword inherit.
.
En este art铆culo hay una lista de cu谩les atributos son heredables.

Por ac谩 os dejo una p谩gina donde viene una lista de las etiquetas de las cuales si aplican HERENCIA y cu谩les no. https://www.w3.org/TR/css-2010/#properties

Herencia: Es el c贸digo CSS que se le pasa a un padre a un hijo

Herencia.
Es el c贸digo que se le va a pasar de un padre a un hijo.

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • La herencia es el c贸digo de CSS que se le va a pasar de un padre a un hijo, es decir, si tengo una etiqueta 2 dentro de una etiqueta 1, significa que etiqueta 2 es hijo de etiqueta 1. Yo puedo aplicar un estilo a la etiqueta 1 y hacer que este estilo lo herede la etiqueta 2

  • Esto lo logro dentro de CSS utilizando la l铆nea inherit para especificar que debe heredar

Aqui dejo mi resumen de la clase 馃锔 espero y les sea de utilidad

Cuando damos algunas propiedades a un elemento padre estas en algunos casos (no en todos) se heredar谩n a las propiedades de los elementos hijo, a esto se le conoce como herencia en css y es muy importante conocerlo para poder tener control de los estilos de nuestro sitio. CSS nos permite tener un mayor control de esta herencia y nos ofrece 3 opciones para manejarla, la primera opci贸n es inherit que le indica a la propiedad del elemento hijo que tome la propiedad del elemento padre m谩s cercano, el valor initial que fuerza a que tome el valor valor por defecto que el navegador tiene definido y por 煤ltimo la etiqueta unset que es una mezcla entre la etiqueta inherit y initial, le dice a la propiedad del elemento que tome el valor del elemento padre m谩s cercano y si no lo encuentra, a diferencia de lo que har铆a inherit qu茅 es pasarse al pr贸ximo elemento padre y asi hasa encontrar un valor en un elemento padre que tenga establecida esa propiedad, unset se va directo a tomar el valor por default del navegador.

INFORMACION ADICIONAL

Herencia
La herencia tambi茅n debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.

Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada elemento que se encuentre dentro de 茅l tambi茅n se mostrar谩 de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.

Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho width del 50%, sus descendientes no tendr谩n un 50% de ancho con respecto al de sus padres. Si este fuera el caso, 隆ser铆a muy frustrante usar CSS!

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

馃憣

Resumen del Capitulo en Notion
https://cutt.ly/9lgUe2r

el valor que me permite heredar caracte铆sticas es inherit

Algo importante a tener en cuenta son los controles de herencia.

Aclaraci贸n: el parrafo tiene 16 px de font-size no por que html tenga 16px, si no por que 16 px tambi茅n es el valor por defecto de parrafo, por lo tanto el titulo <h1> tiene por defecto el tama帽o de 32 px. Lo que vemos en la clase es que por defecto al colocarle que html tenga como tama帽o el 75%, hace que por defecto las etiquetas hijos hereden la misma REGLA y no el mismo tama帽o, disminuyendo en un 75% su tama帽o de cada etiqueta proporcionalmente, y lo que hace la propiedad 鈥渋nherit鈥 es que herede el mismo Tama帽o y no las mismas reglas.

Herencia: es una caracteristica que le permine a una etiqueta contenido heredar (inherit) los atibutos de su etiqueta contenedora mas sercana.
En este caso la etiqueta <p> heredo el tama帽o y fuente de <h1> la cual a su vez heredo su tama帽o y fuente de <html> por lo tanto al cambiar el tama帽o o fuente de html cambia automaticamente el resto.

馃 La herencia en CSS permite transferir propiedades de un elemento padre hacia sus hijos.

La unica etiqueta que no me entra es la del meta con viewport, ese si de plano ando batallando para memorizarmelo, pero ahi va ah va

Aqui encontrar谩s que estilos si se heredan
https://www.w3.org/TR/CSS22/propidx.html
Adem谩s de sus valores

Muy buena explicacion, ya con esto consolido mi conocimiento sobre HTML y CSS

Fuentes Espec铆ficas:
Puedes especificar fuentes espec铆ficas por nombre. Aseg煤rate de proporcionar una lista de fuentes alternativas en caso de que la primera no est茅 disponible:

body {
font-family: 鈥淗elvetica Neue鈥, Helvetica, Arial, sans-serif;
}

Fuentes Gen茅ricas:
Puedes utilizar fuentes gen茅ricas que son categor铆as amplias de fuentes. Algunos ejemplos son:

css
body {
font-family: serif; /* Fuentes con serifs, como Times New Roman */
}

h1 {
font-family: sans-serif; /* Fuentes sin serifs, como Arial o Helvetica */
}

p {
font-family: monospace; /* Fuentes de espaciado fijo, como Courier New */
}

La propiedad font-family en CSS se utiliza para especificar la fuente o fuentes de texto que se deben aplicar a un elemento. Puedes proporcionar una lista de fuentes preferidas, y el navegador utilizar谩 la primera fuente disponible en esa lista. Si ninguna de las fuentes especificadas est谩 disponible, el navegador utilizar谩 la fuente predeterminada del sistema.

La herencia en CSS se refiere a la capacidad de los elementos secundarios de heredar propiedades y valores de estilo de sus elementos padres. Esto significa que si aplicas un estilo a un elemento padre, esos estilos pueden propagarse a los elementos hijos, a menos que se anule expl铆citamente.

Algunas propiedades de estilo se heredan de forma predeterminada, mientras que otras no. Aqu铆 hay algunas propiedades comunes que se heredan de padres a hijos:

Texto:

font-family
font-size
font-weight
font-style
color
Caja:

line-height
text-align
color (solo si no se ha establecido en el hijo)
Enlaces:

text-decoration
color

驴por que el comportamiento de CSS es ditinto dependiendo de la ubicacion del archivo style.css? es deciryo cree una carpera CSS y dentro de esta coloque el archivo style.css, fuera de la carpera CSS cree mi archivo index.html, cuando me refiero al comportamiento distinto es que la herencia no la aplica.

el entendienmiento del funcionamiento de herencia

Muchisimas Gracias por las clases profe鈥

Muy interesante para heredar estilos y ahorrar tiempo.

La herencia en CSS es un mecanismo que permite que los elementos hijos hereden ciertas propiedades de los elementos padres. En otras palabras, si se establece un estilo en un elemento padre, los elementos hijos pueden heredar ese estilo sin necesidad de establecerlo expl铆citamente en cada elemento hijo.

Por ejemplo, si se establece un color de fuente en el elemento padre, todos los elementos hijos heredar谩n ese color de fuente a menos que se anule expl铆citamente en un elemento hijo. Lo mismo se aplica a otras propiedades, como tama帽o de fuente, fondo, margen, relleno, etc.

La herencia en CSS puede ser muy 煤til para simplificar el c贸digo y evitar tener que escribir estilos redundantes. Sin embargo, no todas las propiedades se heredan autom谩ticamente, y algunas propiedades pueden heredarse de manera impredecible en diferentes navegadores. Por lo tanto, es importante comprender qu茅 propiedades se heredan y c贸mo afectan a los elementos hijos en su sitio web.

html{
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/inherit heredar el tama帽o de letra mas cercano/
h1{

font-size: inherit;

}

html(h1)

.

Ahora le dar茅 un buen uso al inherit. Aunque no se si el concepto de herencia quiero pensar que el declarar a un padre algo y que esto le afecte a los hijos que declare dentro de este.

La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos.

No todas las propiedades CSS son heredadas, porque algunas de ellas no tendr铆a sentido que lo fueran. Por ejemplo, los m谩rgenes no se heredan porque es poco probable que un elemento hijo necesite los mismos m谩rgenes que su padre.

Fuente

Por lo tanto, si yo hago cambios en la etiqueta html que es la que contiene todo, esas propiedades las va a heredar a todos sus hijos. (Por ejemplo el tipo de fuente).

HERENCIA, como el c贸digo es en cascada y se lee de arriba a abajo, son hijos los elementos que se encuentran dentro de otro, por ejemplo head es hijo de la etiqueta html. As铆 como main es hijo de body que a su vez es hijo de html

Es decir que putas quedarse con explicar que la herencia es el c贸digo que le pasa el padre al hijo. No pueden usar los t茅rminos de programaci贸n y explicar las cosas bien con definiciones serias?

Es decir, es el c贸digo que le pasa un contenedor a otro o un selector a otro o una clase a sus clases subsiguientes?

Al final, sin entender un cu*** de esta clase, me fui a Google y ah铆 s铆 explican bien.

me gustar铆a haber visto como es el uso del sidebar , con html y css

pues menos mal que existe esto = *{, porque para mi lo del padding鈥 me parecio medio confuso鈥!!!

Es interesante ver que en el Inspector web podemos ver la jerarqu铆a. Y que html est谩 hasta arriba.

En esta clase aprendemos como pasar la herencia ( estilos) que tienen los elementos padres a sus hijos. quedo muy claro gracias a la explicacion del profesor y por los aportes de @ivan arcos.

Es tema de la herencia se debe tambi茅n tener en cuenta que la anchura, los m谩rgenes, los bordes y el relleno no se heredan

Herencia y sus valores:

  • Inherit. Este es un valor por medio de una keyword que especifica que, a la propiedad que se la apliquemos debe de heredar los valores de su elemento padre. Podemos decir que la palabra Inherit significa 鈥淯sa el valor de mi padre鈥, si el elemento padre no tiene definido dicho valor el navegador seguir谩 el DOM hasta que encuentre un elemento superior que lo contenga, y en ultima instancia de no tenerlo ning煤n elemento superior se aplicara el valor por defecto.

  • Initial. Este valor pertenece a la especificaci贸n CSS3 y cuando aplicamos a una propiedad el valor initial estamos dando el valor inicial y predefinido por el navegador en cuesti贸n.

  • Upset. Este valor unset es una combinaci贸n entre inherit y initial, cuando utilizamos este valor en una propiedad esta tratara de heredar el valor de su elemento padre si este esta disponible, de no ser as铆 este valor colocar谩 el valor de la propiedad en su valor inicial, como si us谩ramos inherit e initial juntos.

html {
  font-size: 75%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
  font-size: inherit;
}

En la columna de la izquierda aparece el tama帽o de la fuente de Html, h1, p al 100%, en segunda columna aparece el tama帽o de la fuente al 75% sin heredar de las mismas etiquetas, y en la tercer columna aparece aparece la etiqueta H1 ya aplicando font-size: inherit

Herencia

La etiqueta HTML hereda los estilos font-family a sus elementos hijo mientras no exista especificidad.

html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

Con inherit le decimos al elemento hijo que herede propiedades de su elemento padre.

h1 {
    font-size: inherit;
}

CSS

Inheritance

Inheritance also needs to be understood in this context 鈥 some CSS property values set on parent elements are inherited by their child elements, and some aren鈥檛.

For example, if you set a聽color聽and聽font-family聽on an element, every element inside it will also be styled with that color and font, unless you鈥檝e applied different color and font values directly to them.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

inherit

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all.

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

initial

The聽initial聽CSS keyword applies the聽initial (or default) value聽of a property to an element. It can be applied to any CSS property. This includes the CSS shorthand聽all, with which聽initial聽can be used to restore all CSS properties to their initial state.

On聽inherited properties, the initial value may be unexpected. You should consider using the聽inherit,聽unset, or聽revert keywords instead.

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

unset

The聽unset聽CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its聽initial value聽if not. In other words, it behaves like the聽inherit聽keyword in the first case, when the property is an聽inherited property, and like the聽initial聽keyword in the second case, when the property is a聽non-inherited property.

unset聽can be applied to any CSS property, including the CSS shorthand聽all.

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