Aplicando estilo al menu de navegación

Dentro del archivo estilos.css, vamos a crear algunos selectores, el primero apuntará o seleccionará a la etiqueta nav, para apuntar a la etiqueta nav ya sabemos como hacerlo, escribimos su nombre y listo. Le vamos a dar un ancho del 100% de la pantalla, para que ocupe siempre todo el ancho, un alto de 30px y un color de fondo blanco, el código seria el siguiente.

nav { 
  width: 100%;
  height: 30px;
  background-color: white;
}
Cuando estemos aplicando estilo a través de un archivo externo debemos omitir las etiquetas <style></style> de apertura y cierre.

pero con las etiquetas li lo haremos distinto, ya que no queremos que aplique estilo a todas las listas de las página o páginas que vayamos a hacer en un futuro, sino solo a las que estan dentro de la etiqueta <nav>. Anteriormente te mencioné que las etiquetas pueden envolver a otras etiquetas, las que envuelven a otras etiquetas son padres de estas, para que lo veas mas claro, en nuestro código, la etiqueta <nav> envuelve a la etiqueta <ul>, y esta a su vez a las etiquetas <li>, asi que la etiqueta nav es padre de la etiqueta <ul>, y la etiqueta <ul> es padre de las etiquetas <li>, y al revés, las etiquetas <li> son hijas de las etiquetas ul y la etiqueta ul es hija de la etiqueta <nav>. Fijate en el código para que lo veas mas claro, observa que unas están dentro de otras, además se les da un sangrado precisamente para eso, para saber quien es pariente de quien.

<!DOCTYPE html>
<html>
  <head>
    <title>Tu título</title> 
  </head>
  <body> 
    <nav>   <!-- nav es padre de ul e hija de body -->
      <ul>   <!-- ul es padre de li e hija de nav -->
        <li>item 1</li>   <!-- li es hija de ul -->
        <li>item 2</li>   <!-- li es hija de ul -->
        <li>item 3</li>   <!-- li es hija de ul -->
        <li>item 4</li>   <!-- li es hija de ul -->
      </ul>
    </nav>
  </body>
</html>

Una vez vista la jerarquia vamos a apuntar a todas las etiquetas li que estan dentro de la etiqueta nav, es realmente sencillo, solo tenemos que apuntar a la etiqueta padre que necesitemos e ir adentrandonos a través de sus hijas hasta llegar a la o las que queremos, simplemente añadiendo un espacio entre cada selector, asi que si queremos llegar a las etiquetas li desde su descendiente nav, seguimos estos pasos, primero apuntamos a nav, dejamos un espacio en blanco y apuntamos a su hija que es ul, dejamos otro espacio y ya si apuntamos a las listas, el código sería el siguiente.

nav ul li { }

En ese código le estamos diciendo a CSS que apunte a todas las etiquetas <li> que esten dentro de una etiqueta <ul>, que a su vez este dentro de una etiqueta <nav>. Ahora pasemos a darle estilo a estas listas, les daremos un ancho del 25% a cada una, así ocuparan un 25% del que ocupe su elemento padre, que como sabemos es <ul>, que no le hemos dado medidas, pero que a su vez es hijo de <nav>, que a este si le hemos dado un 100% de la pantalla. El alto lo estableceremos en 30px, igual que la etiqueta <nav>, y le daremos un color gris a los textos. Quizá te parezca un poco enredoso al principio, pero tranquilo con la práctica se coje rápido.

nav ul li { 
  width: 25%;
  height: 30px;
  background-color: #888;
}

El código completo del archivo estilos.css hasta el momento.

nav { 
  width: 100%;
  height: 30px;
  background-color: white;
}
nav ul li { 
  width: 25%;
  height: 30px;
  background-color: #888;
}

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.