A5. Prueba tus conocimientos

E1: Prioridad CSS

Selecciona solo una respuesta: la más correcta. ¿Cuál sería el color del párrafo?

a) Rojo
b) Azul
c) Verde
d) Verde porque la hoja de estilo interna tiene la regla de color con !important
e) Verde porque la hoja de estilo en línea tiene la regla de color con !important
f) Dependerá de la hoja de estilo externa

<head>
  <style>
    p {
      color: green !important;
    }
  </style>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <h1 style="color: blue !important">Premio Nobel de Literatura</h1>
  <p style="color: red">
    El Premio Nobel de Literatura es uno de los cinco señalados en el testamento
    del filántropo sueco Alfred Nobel...
  </p>
</body>

E2: Selectores CSS

¿Qué reglas se aplicarán al elemento em?

a) * { background-color: red; }
b) body { background-color: red; }
c) body + p { background-color: red; }
d) body > p { background-color: red; }
e) body > p > em { background-color: red; }
f) p + em { background-color: red; }

<body>
  <div class="container">
    <h1>Premio Nobel de Literatura</h1>
    <p>
      El Premio Nobel de Literatura es uno de los cinco señalados en el
      testamento del filántropo sueco <em>Alfred Nobel.</em>
    </p>
  </div>
</body>

E3: Especificidad CSS

¿Cuál es el color de fondo de los párrafos?

• Color de fondo del primer párrafo: ……………………….
• Color de fondo del segundo párrafo: ……………………….
• Color de fondo del tercer párrafo: ……………………….

<head>
  <style>
    #i1 {
      background-color: darkmagenta;
    }
    body p {
      background-color: green;
    }
    .c1 {
      background-color: yellow;
    }
    p {
      background-color: red;
    }
  </style>
</head>
<body>
  <!-- primer párrafo -->
  <p id="i1" class="c1">
    El Premio Nobel de Literatura es uno de los cinco señalados en el testamento
    del filántropo sueco Alfred Nobel.
  </p>

  <!-- segundo párrafo -->
  <p class="c1">
    Es un premio que ha ignorado a autores que realizaron aportes significativos
    a las letras y reconocidos a nivel mundial.
  </p>

  <!-- tercer párrafo -->
  <p>
    Mientras que Mario Vargas Llosa ganador del premio del año 2010, mencionó
    que Jorge Luis Borges y César Vallejo merecieron el premio.
  </p>
</body>

E4: Prioridad CSS, Selectores y Especificidad

¿Cuál sería el color del párrafo?

a) Verde
b) Azul
c) Rojo
d) Darkmagenta
e) Amarillo

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <style>
      p {
        color: green !important;
      }
    </style>
    <link rel="stylesheet" href="css/styles.css" />
    ...
  </head>
  <body>
    <div class="main-container">
      <h1 style="color: blue !important">Sources</h1>
      <p id="p1" class="c1" style="color: red">
        CSS information can be provided from various sources. These sources can
        be the web browser, the user and the author.
      </p>
    </div>
    ...
  </body>
</html>

styles.css

#p1 {
  color: darkmagenta;
}
body > p.c1 {
  color: yellow !important;
}

E5: Prioridad CSS, Selectores y Especificidad

¿Cuál sería el color del párrafo?

a) Verde
b) Salmón
c) Darkmagenta
d) Azul
e) Rojo

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" href="css/file1.css" />
    <link rel="stylesheet" href="css/file2.css" />
    <link rel="stylesheet" href="css/file3.css" />
    <style>
      p {
        color: green;
      }
    </style>
    ...
  </head>
  <body>
    <div class="container" style="color: salmon">
      <h1>Sources</h1>
      <p id="p1" class="c1">
        CSS information can be provided from various sources. These sources can
        be the web browser, the user and the author.
      </p>
    </div>
  </body>
</html>

file1.css

#p1 {
  color: darkmagenta;
}

file2.css

body > div > p.c1 {
  color: blue;
}

file3.css

.c1 {
  color: red;
}