Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Demo de especificidad y orden en selectores

28/55
Recursos

Aportes 174

Preguntas 54

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

  1. Los !important estarán por encima de los demás estilos. Sin embargo, son mala práctica y no se deberían usar.
  2. Los estilos embebidos en el HTML, es decir inline styles están por encima de las clases y IDs. Sin embargo, también se deberían evitar.
  3. Los IDs están por encima de las clases. Los IDs son específicos, si se usa uno en un archivo HTML ya no se podrá repetir más en ese mismo archivo. Mientras que las clases si se pueden repetir en cualquier elemento.
  4. Un estilo de etiqueta es el último valor que el navegador tiene en cuenta antes de tomar los estilos por defecto de esa etiqueta. Los estilos de etiqueta son los que menos peso tienen.

**Recuerda! ** Si no se cargan los estilos que tu deseas es por que hay otro(s) elector(es) con mayor importancia que el tuyo

Para ahorra tiempo, Visual Studio Code tiene una función llamada Emmet Abbreviation donde podras colocar toda una estructura.

En Visual Studio Code puede utilizar este atajo para crear rápidamente un menú de navegación:

header>nav>ul>li*4>a + TAB 

Otra forma de agregar un estilo particular (en nuestro caso un color de fondo diferente) a la última etiqueta “<a href=”">Blog</a>" es con una pseudo-clase “last-child”. Esta pseudo-clase nos ayuda a agregar estilos al último elemento hijo entre sus hermanos, pero, hay que tener en cuenta que las etiquetas “<a>” del ejercicio no están bajo un mismo elemento padre “<li>”, por lo tanto las etiquetas “<a>” no son hermanas:

<ul id="main-nav" class="nav">
	<li><a href="">Home</a></li>
	<li><a href="">Cursos</a></li>
	<li><a href="">Instructores</a></li>
	<li><a href="">Blog</a></li>
</ul>

Para solucionar este problema toca aplicar la pseudo-clase “:last-child” al elemento “<li>” en nuestro selector en la hoja de estilos ya que tienen un mismo padre “<ul id=“main-nav” class=“nav”>, pero, para que aplique el estilo a la etiqueta “<a href=””>Blog</a>" hay que descender hasta ésta:

#main-nav li:last-child a {
	background: orange; 
}

el resultado:

Esta extensión de Visual Studio Code te permite ver des de tu css las clases que tienes declaradas en tu html
https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion

Una de las cosas que he aprendido en el corto tiempo que llevo en esto, es que una de las razones por las cuales utilizar un Framework como Bootstrap es una mala práctica, es que utiliza muchos important, construí una página utilizándolo y efectivamente realizar algunos cambios en los estilos fue super complejo. Excelente la explicación!

He aquí mis apuntes https://www.notion.so/Especificidad-en-selectores-2fdd4a69d1cd409386453d03fa0b6352
Pueden también comentar si gustan y duplicarlos

En esta tabla podemos ver los niveles de especificidad por selector:

Mas halla de llevar un orden y no caer en malas prácticas, es que debemos generar código de humanos para humanos y no crear código para el computador, porque, con malas prácticas podemos llegar al resultado. La verdad es muy molesto encontrar líneas de css que para agregar o solucionar un problema (tal vez por pereza o bueno quien sabe) les basto con usar el important o estilo en línea. Entonces lo mejor siempre será pensar en que en un futuro tenemos que modificar el mismo proyecto y si usamos malas prácticas, será un dolor de cabeza

Todas las propiedades completas de CSS3 bien explicadas 👏
☑ https://www.mclibre.org/consultar/amaya/css/css-propiedades.html

26. Mis apuntes sobre: “Demo de especificidad y orden en selectores”

Un ID solo puede pertenecer a un solo elemento por documento HTML, pero un elemento puede tener una o más clases, las cuales incluso pueden ser compartidas entre varios elementos.

Cuando se agregan los font-family por defecto se agregan 3, para que en caso no haya el primero en el navegador, se agregue el segundo sino el tercero.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Demo</title>
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Empresa</h1>
        <nav>
            <ul id="main-nav" class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">Cursos</a></li>
                <li><a href="">Instructores</a></li>
                <li><a href="">Blog</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>
  • HERENCIA Y ESPECIFICIDAD
    • Herencia:

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

      • 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.
    • Especificidad:

      1. Importancia

        1. Estilos del navegador
        2. Estilos nuestros
        3. !important (mala práctica)
      2. Especificidad

        1. !important | (1,0,0,0,0)
        2. <style> | (0,1,0,0,0)
        3. #id | (0,0,1,0,0)
        4. .class | (0,0,0,1,0)
        5. tag | (0,0,0,0,1)
      3. Orden en las fuentes

        En nuestros estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto.

Les dejo mis notas de esta clase(al menos la mayoria):

Lo que el profesor menciona como CSS Reset, tiene una importancia inimaginable. Es una de las cosas que cualquier frontend developer desearía haber sabido desde un principio. Al hacer ese reset, le decimos al navegador: ¿sabes que? no quiero tus márgenes ni tus paddings, ni que coloques el borde por fuera de la caja. Ténganlo presente siempre; me atrevería a decir que es lo primero que debes colocar siempre.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Pero no todo es color de rosas, y ésto trae algunas desventajas. Por ejemplo, cuando creas una lista (ya sea ordenada o no), no vas a verla como se ve regularmente (con sangría y bullets), pero ésto lo puedes solucionar agregando en dichas listas el margen y/o padding correspondiente. Generalmente es engorroso tener que ponerle margen y/o padding a todo, pero vale la pena mirar tu página y darte cuenta de que todo está en donde tiene que estar y que el navegador no está molestando tus estilos.

Mas detallado el tema de especificad y selectores:
https://www.w3schools.com/css/css_specificity.asp

Tenia algunas dudas con respecto a la prioridad pero lo practique pausando el vídeo y termino dándome el mismo resultado que al profesor, ya entendí las prioridades, les recomiendo que si tienen dudas, háganlo ustedes mismos para que lo logren entender mejor.

Ahora pregunto!
Ese numeral # o el * o el punto (.) o incluso sin tener nada de esos código ASCII que importancia o cuando se debe utilizar dichos numerales?

Practicar mucho se te va grabando en la mente las etiquetas se puede aprobar el curso pero si no se practica se pierde

Conozco gente que todo lo arregla con !important, aunque no sea !important.
JAJAJAJAJAJAJA, el que entendió, entendió!

Los ID son únicos, no puedes tener más de un ID con el mismo nombre

De otro curso ya conocía la especificidad pero no sabía que se tachaban los estilos no utilizados de la consola, cosa que había visto muchas veces. Por cierto, muy bien explicado

Demo de especificidad y orden en selectores

NOTA Las clases son genéricas y los id son únicos y específicos, no podemos tener el mismo id en dos elementos al contrario que las clases.

Les dejo un enlace de codepen con ejercicios de práctica referentes al curso!

👉 Codepen - CSS-Master - Collection 🔥

recordar:
las clases son genéricas
los **id ** unicos y especificos(no repetir)

Mis apuntes

HERENCIA en CSS
INHERIT: Usa el valor del padre
INITIAL: se dara el valor inicial y predefinido por el navegador
UPSET: si tiene padre, heredara su valor, si no, dara el valor de INITIAL
¿Cómo se controla el orden al declarar CSS?
Primero cargara el estilo que el navegador decida. Luego las declaraciones de nuestro .css. Y por ultimo, declarara los important (!important) en nuestro .css.

Nuestro VS code, cuando colocamos el cursor encima de las declaraciones de nuestro .css nos dira el numero de especifidad.

listo. Aunque tengo una pregunta, para practicar la clase anterior con las pseudoclases, agregue una para activar hover, pero no logre hacer que funcionara, e intente de muchas formas, les mostrare el codigo a ver si me pueden indicar si cometi algun error.

<code>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1 {
    color: rosybrown;
    font-family: serif;
    margin-bottom: 10px;
    padding-left: 15px;
}

#page-title {
    font-family: Arial, Helvetica, sans-serif;
}

.title {
    font-size: 18px;
}

#main-nav {
    padding-left: 15px;
    text-decoration: none;
}

#main-nav{
    margin-top: 10px;
    list-style-type: none;
}

#main-nav li {
    display: inline-block;
}

#main-nav a {
    color: white;
    background-color: violet;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

.nav__item a:hover {
    color: black;
}

Buen Material para saber cuando usar #id y .clases:
https://www.campusmvp.es/recursos/post/clases-ids-css-cuando-como-usarlas.aspx

Es una buena práctica no utilizar nunca el id para aplicarle estilos. Utiliza el id para comunicación con el backend o para darle alguna funcionalidad con JavaScript. Así ya sabes que no tendrás demasiados picos de especificidad en tu CSS.
Límitate a darle estilos solo con class.

Si quieren arman en una sola línea las etiquetas “header>h1>nav>ul>li”, gracias a embed se puede hacer. Visual Studio Code tiene por defecto, en otros programas tendrías que descargarte la extensión

orden de precedencia:
![](

🦄Especificidad

  • No es recomendable usar el !important
  • Los estilos embebidos en el HTML, es decir, los inline styles están por encima de las clases y IDs. Estos se colocan en la propia etiqueta html, y como sabemos que no es bueno ubicar estilos directos en nuestro html, es una mala práctica usarlos.
  • El #id debe ser único para un solo elemento, mientras que las .class pueden ser genéricas, es decir, se pueden usar en varios elementos.
  • Se tendrá más especificidad cuando se utilizan varios selectores, por ejemplo:
    • #main .main-title h1 tendrá una especificidad de 0.0.1.1.1
  • Hay que tomar en cuenta que los estilos que se muestran en nuestra página dependerá de el lugar en donde estén ubicados, es decir, si nosotros declaramos un estilo a un selector al inicio y al final del archivo css el navegador utilizará el estilo que se encuentre al final de la misma.

27.-Demo de especificidad y orden en selectores

Se pueden usar varias clases mientras no se exceda en la cantidad de clases y por cada etiqueta no se puede tener más de un ID. El id es único y específico, solo puede existir ese id en la página. Funciona para CSS y JS.

Siempre que veamos en el inspector de elementos los estilos siempre los regresa de los más importantes a los menos importantes.

Un estilo embebido, es mas pesado que una clase y un style juntos.

¿porque se puede necesitar “class” y “ID” al mismo tiempo en un elemento para definir stilos?

varios elementos pueden tener la misma clase “class” por ejemplo para tener un estilo de fuente generico en la pagina… pero ademas de una clase podremos agregar en el mismo elemento un ID para por ejemplo cambiarle el color de fondo. de esta forma hemos modificado el estilo de un elemento en especial y a su vez este conserva estilos de un grupo mas grande de elementos.

Muy buena esta clase!

Orden o jerarquía de la lectura de CSS:

  1. !important
  2. <inline style>Estilos embebidos en el HTML, no es buena práctica
  3. ID’s
  4. Clases
  5. Tags o Etiquetas del HTML

TIP: En Visual Estudio Code cuando colocas arriba el cursor puedes ver el selector de especificidad

Un ID no puede usarse repetidas veces en una página, una clase si.
Esto es porque las clases son genéricas y los ID específicos.

<!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>Demo</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<header class=“page-header”>
<h1 id=“page-title” class=“title”>Empresa </h1>
<nav>
<ul id=“main-nav” class=“nav”>
<li><a href="" class=“home”>Home</a></li>
<li><a href="" class=“cursos” >Cursos</a></li>
<li><a href="">Instructores</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contactanos</a></li>
<!-- Mala practica */ -->
<li>
<a href="" class=“Contactano” > Contactano</a>
<!-- LO QUE LE FALTA A LO DE ARRIBA A LA MALA PRACTICA–>
</li>
</ul>
</nav>
</header>
</body>
</html>

  • {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    h1 {
    color: purple;
    font-family: serif;
    margin-bottom: 10px;
    }
    /* asi se llama id */
    #page-title {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    .title {
    font-size: 18px;
    font-family: monospace;
    }
    #main-nav {
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0;
    }

/* PONER DE MANERA HORIZONTAL*/
#main-nav li {
display: inline-block;
}

#main-nav a {
color: white;
background-color: darkcyan;
padding: 8px;
border-radius: 20px;
text-decoration: none;
}

/ESTILO INDEVIDO Y POR ESO NO SE APLICA/
#main-nav .Contactano {
background-color: blue;
}

#main-nav .home {
background-color: brown;
}

#main-nav .cursos {
background-color: red;
}

Si quieres darle instrucciones especiales a algun elemento, tambien podrian usar nth-child

de esta manera

.main-nav__item {
    display: inline-block;
    background-color: #13a4a4;
    border-radius: 2px;
    padding: 5px;
}

.main-nav__item a {
    text-decoration: none;
    color: white;
}

.main-nav__item:nth-child(4) {
    background-color: orange;
    font-size: 20px;
}

y de esta menra aun estamos generando las convenciones BEM apra la creacion de css

Otra forma de solo elegir el ultimo elemento es con :last-child, yo lo hice así:

#main-nav li:last-child a{
    background-color: red;
}

una pregunta solo pro curiosidad, la etiqueta <main> no la declarate en html pero si la esta usando en css como clase?

gracias

Peso selectores

  1. estilos inline = 1000
  2. IDs = 100
  3. Clases, atributos y pseudo-clases (:hover, :focus) = 10
  4. elementos y pseudo-clases (:before, :after) = 1

Este ejmplo de https://css-tricks.com/specifics-on-css-specificity/ me parece más claro:

Interesante yo si me preguntaba porque habian 3 tipos de letras en font-family ya que como lo dice el profesor Diego si la computadora en este caso no tiene instalada la letra Arial, usa la Helvetica y si no tiene instalada la Helvetica utiliza la Sans-serif

pero es mas recomendable solamente hacer o un class o un id ustedes escogen, entiendo perfectamente eso de la especificidad y se dice que los id son necesarios para JavaScript pero saben en Js también se puede llamar a las clases con ClassName y se dice que es mejor utilizar class que id, sigo sin entender el porque pero así lo recomiendan, ustedes que piensan los veo…

La etiqueta nav va a llevar la barra de navegación. Los id son únicos y específicos no puedo tener el mismo id en dos elementos y las clases son genéricas, puedo tener una clase en diferentes elementos.

Importante recordar:
_"…en algunos proyectos tendrás que agregar uno, dos o tres clases e incluso un ID en cada uno de los elementos siempre y cuando no excedas en la cantidad de clases. Por cada etiqueta no puedes tener más de un ID…"
_

Id: Son únicos y específicos
Class: Son genéricas

dejo por aqui una ayuda de CSS https://www.w3schools.com/css/
es muy util

Qué diferencia hay entre llamar al selector universal para “re establecer” algunos estilos del navegador, o usar normalize.css (o similares)?

++Especificidad: ++
.

  1. Important
  2. inline-styles
  3. #IDS
  4. .Class
  5. <Tags>

me llama mucho la atención que “div” o “nav” las pronuncie difff y naffff
XD

No entiendo porque en el minuto 10:34 al #main-nav le pone padding-left:0; si en las primeras líneas le coloco al selector universal * padding 0

Hey guys !

HERENCIA Y ESPECIFICIDAD

Herencia:

Algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto.
    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.

Especificidad:

    Importancia
        Estilos del navegador
        Estilos nuestros
        !important (mala práctica)

    Especificidad
        Calculadora: https://www.codecaptain.io/tools/css-specificity-calculator
        !important | (1,0,0,0,0)
        <style> | (0,1,0,0,0)
        #id | (0,0,1,0,0)
        .class | (0,0,0,1,0)
        tag | (0,0,0,0,1)

    Orden en las fuentes

cuando te explican la teoría no lo entiendes a la primera pero con este ejemplo práctico se me hizo mucho más fácil.

RESUMEN CLASE 28:
DEMO DE ESPECIFICIDAD
Y ORDEN EN SELECTORES

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>Demo</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Empresa</h1>
        <nav>
            <ul id="main-nav" class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">Cursos</a></li>
                <li><a href="">Instructores</a></li>
                <li>
                    <a href="" class="blog">Blog</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1 {
    color: purple;
    font-family: serif;
    margin-bottom: 10px;
}
#page-title {
    font-family: Arial, Helvetica, sans-serif;
}
.title {
    font-size: 18px;
    font-family: monospace;
}
#main-nav {
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0;
}

#main-nav li {
    display: inline-block;
}

#main-nav a {
    color: white;
    background-color: #121f3d;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

#main-nav .blog {
    background-color: red;
}

Información resumida de esta clase
#EstudiantesDePlatzi

  • Por cada etiqueta no se puede tener más de un id ya que debe ser único para cada etiqueta o elemento.

  • Las clases son genéricas, es decir, yo puedo tener la misma clase en varios elementos y esto va a ser que el estilo se aplique a todos los elementos que tengan esta clase

  • El id en CSS lo llamamos con el #

  • Debemos evitar el estilo embebido

ID: son unicos, solo puede haber uno con ese nombre por pagina class: son genericas, pueden repetirse. Es mas hay veces que se utilizan dos class en la misma etiqueta para darle un nivel mas alto de especifidad

ID: son unicos, solo puede haber uno con ese nombre por pagina class: son genericas, pueden repetirse. Es mas hay veces que se utilizan dos class en la misma etiqueta para darle un nivel mas alto de especifidad

ID: son unicos, solo puede haber uno con ese nombre por pagina class: son genericas, pueden repetirse. Es mas hay veces que se utilizan dos class en la misma etiqueta para darle un nivel mas alto de especifidad

ID: son unicos, solo puede haber uno con ese nombre por pagina class: son genericas, pueden repetirse. Es mas hay veces que se utilizan dos class en la misma etiqueta para darle un nivel mas alto de especifidad

En la ultima parte cuando implementa la clase blog para cambiar de color al ultimo elemento, necesitamos llamarlo mediante el ID e incluir la clase, por ejemplo:

#main-nav .blog {
background-color: red;
}

Pero si lo llamamos solamente mediante la clase:

.blog {
background-color: yellow;
}
En este caso no se aplica el estilo. Espero que les ayude 😄

me duele el cerebro

Estilos embebidos

<li><a href="" style="background-color: orange;">Blog</a></li>

Puedo aplicar un estilo embebido a una etiqueta en html, pero esto no es una buena práctica. Si creáramos una clase para esta etiqueta no se aplicaría ningún estilo porque el sistema embebido es más importante que las clases.

<li><a href="" class="blog">Blog</a></li>

La forma correcta sería crear una clase para la etiqueta.

#main-nav .blog {
    background-color: orange;
}

Luego, aplicarle el estilo.

Es importante recordar la metodología BEM, en este demo se debería también usar.

Las clases son genéricas
los id son únicos y específicos

Lo ideal es usar principalmente clases y nombrarlas con una metodologia como BEM. Así tendrás un codigo más fácil de leer, limpio, escalable, replicable y manipulable. En resumen, trabajarás mucho mejor, más fácil y más profesional. Usar estilos embebidos e importants es como solo poner un parche y luego te traerá problemas cuando el codigo se ponga más complejo

Es importante acotar que el **selector universal ( * ) **que permite añadir estilos a todas las etiquetas HTML dentro del body, es la propiedad menos especifica valiendo 0. Siendo incluso menos especifica que las mismas etiquetas. Aquí un ejemplo:

Me encanto esta clase, me quedo más claro como funciona la especificad

Especificidad.
VSC tiene la funcion para ver la especificidad de cada regla que se aplica en css
!important | (1,0,0,0,0)
<style> | (0,1,0,0,0)
#id | (0,0,1,0,0)
.class | (0,0,0,1,0)
tag | (0,0,0,0,1)

Muy bien entendido.

Creo que es mas recomendable utilizar clases, ya que también se pueden reutilizar

apenas estamos en la parte de css y ya empezamos con el debugging

super importante y super claro

Yo lo hice de la siguiente manera para cambiar el color del background de “Blog”, aplicando la especifidad

#main-nav li:nth-child(4) a{
    background-color: orange;
}

GEnial clase

Aqui está mi ejemplo

<<!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">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Empresa</h1>
    </header>

    <nav>
        <ul id="main-nav" class="nav">
            <li><a href="#">Contacto</a></li>
            <li><a href="#">Donaciones</a></li>
            <li><a href="#">Cursos</a></li>
            <li><a href="#">Intrucciones</a></li>
        </ul>
    </nav>
    
</body>
</html>> 
<*{
    margin: 0;
    padding: 0;
}

#page-title{
    color: orange;
    font-size: 18px;
    font-family:Arial, Helvetica, sans-serif;
    padding-top: 5px;
    text-align: center;
}

#main-nav{
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0;
    margin-left: 5px;
    text-align: center;
    list-style-type: none;
    
}

#main-nav li{
    display: inline-block;
}

#main-nav a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    background: grey;
    padding: 5px;
    border-radius: 2px;
}
#main-nav a:hover{
    background: crimson;
}> 

IMPORTANT ESTILO ENBEBIDO IDS CLASES ETIQUETAS

No se puede tener 2 id en dos elementos porque es único, en cambio las clases si pueden repetirse y le dan el mismo estilo a diferentes elemetos, esto funciona para CSS y para Java Script


/*ese aterisco es un selector universal */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    color: #fff;
    background-color: #a4a4a4;
    border-radius: 20px;

}
header {
    margin-bottom: 2px;
    width: 100%;
    height: 50px;
    background-color: #000;
}
header h1 {
    font-size: 30px;
    text-align: center;
    line-height: 50px;
}
nav {
    background-color: black;
    width: 100%;
    height: 50px;
    padding: 20px 35px;
    margin-bottom: 2px;
}
.main-nav {
    list-style: none;
    padding: 0;
}
.main-nav__item {
    display: inline-block;
}
.main-nav__item a:hover {
    color: red;
}
.main-nav__item a:active {
    color: white;
}
.main-nav__item a::after {
    content: " | ";
}
.main-nav__item a {
    text-decoration: none;
}
main {
    width: 69.8%;
    height: 500px;
    padding: 20px 35px;
    float: left;
    background-color: black;
    margin-right: 2px;
    margin-bottom: 2px;
}
aside {
    background-color: black;
    width: 30%;
    height: 500px;
    float: right;
    margin-bottom: 2px;
}
footer {
    background-color: black;
    width: 100%;
    height: 100px;
    padding: 20px 35px;
    clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Portafolio profesional.">
    <meta name="robots" content="index,follow">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Programador BM.</title>
</head>
<body>
    <header class="cabecera">
        <h1>Bienvenidos a mi Blog.</h1>
    </header>
    <nav>
        <ul class="main-nav">
            <li class="main-nav__item"><a href="">Home</a></li>
            <li class="main-nav__item"><a href="">Servicios</a></li>
            <li class="main-nav__item"><a href="">Contactos</a></li>
        </ul>
    </nav>
    <main>
        <section class="contenido-principal">
            <h2>Mis skill</h2>
            <article>
                <p>contenido principal.</p>
            </article>
        </section>
    </main>
    <aside>
        <section class="contenido-secundario">
            <article>
                <p>numero de telefono</p>
            </article>
        </section>
    </aside>
    <footer class="pie-pagina">
        <p>
            creado Por 
            <br>Programador BM.
        </p>
    </footer>
</body>
</html>

He leído documentación en donde se menciona que las ID se deberían usar para cosas demasiado específicas.
Es por eso que se sugiere utilizar la metodología de BEM para nombrar las clases de manera tal que permita identificar el bloque, elemento y modificador. Me parece que es una buena práctica, en lugar de utilizar clases y ID al mismo tiempo

Los id son únicos, las clases son genéricas, pueden estar en diferentes elementos y se aplicaran esos estilos.

Con el inspector del navegador podemos ver porque no se están implementando los estilos, porque se ven donde están los conflictos de los id, clases y etiquetas.

28 clases para que se expliquen los ID’s??? Damn boy

Es importante no utilizar ni !important ni estilos embebidos ya que esto es una mala practica