El resultado anterior era bastante simple. ¡Es hora de aplicar diseños a la cabecera de nuestro proyecto! Pero antes, recordemos un poco algunos conceptos que vamos a utilizar.

Tipos de etiquetas HTML

Existen dos tipos de etiquetas en HTML:

Contenedoras

• header
• nav
• section
• div

Estas etiquetas contienen a otras y ocupan un espacio.

De contenido

• p
• a
• li
• h1
• img

Estas etiquetas contienen elementos visibles como texto o vídeo dentro.

Saber manejar una buena arquitectura de etiquetas contenedoras nos permite acomodar las de contenido con mucha más facilidad.

Tipos de display

El display es la forma en que las etiquetas contenedoras se comportan entre ellas y posicionan su contenido. Existen tres tipos:

• layout: El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea).
• grid: El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.
• flex: El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de flexbox.

Aplicando estilos

Le aplicamos estilos al body, al header y al nav.

Estilos al body

Lo primero que haremos es abrir nuestro archivo CSS enlazado a nuestro html del proyecto y resetear los espacios dentro de la etiqueta body.

Eliminamos el margin y el padding. Cambiamos el tipo de fuente y su tamaño.

En caso de que quieras aplicar estilos a todas las etiquetas del proyecto, debes hacer anteponiendo un asterisco.

En el ejemplo se elminina el padding y margin de todas las etiquetas, sin embargo, para nuestro proyecto esto no es necesario.

Estilos al header

Lo primero que tenemos que contemplar es que queremos que nuestro header ocupe el 100% del ancho de la pantalla.

Ajustamos el height para que tenga 60 pixeles de alto.

Estilos al nav

Para ser específicos (ser muy específicos está bien) aplicamos los estilos a las etiquetas nav dentro de una etiqueta header.

• Usamos display: flex para alterar sus dimensiones y llenar el espacio disponible.
• Usamos justify-content: flex-end para que mande el contenido a un extremo de la página. En este caso el derecho.

Contribución creada con aportes de: José Miguel Veintimilla.