Decorar un header en CSS o la cabecera de la página, es lo principal que se debe de tener en cuenta al crear una página web, debido a que va a ser la primera impresión que va a tener usuario al entrar a nuestra página en su navegador, por lo cual el decorar un header en CSS lo debemos hacer tan atractivo como sea posible, para que el usuario le interese y se quede navegando.
Aunque parezca algo muy sencillo, que si lo es, debes de tener mucho cuidado en los estilos que le aplicas a la cabecera, para que ésta sea lo más atractiva debido a que hay muchas personas que no se centran en esa parte de su página web y fracasan en el intento.
Pasos para decorar un header en CSS
👊 ¿QUIERES INCREMENTAR TUS CONOCIMIENTOS EN HTML y CSS? 👊
Entonces te recomiendo tomar este curso de HTML y CSS donde aprenderás estos lenguajes desde cero hasta convertirte en un experto, realizando varios ejercicios prácticos para que puedas aprender de una mejor manera.
👇
CURSO COMPLETO
Sección de archivo HTML
Lo primero que debemos de hacer es crear un archivo HTML, el cual va a contener todo el código de nuestra cabecera, obviamente sin ningún estilo, ya que eso se los aplicaremos después en el archivo CSS, este archivo debe detener la extensión .html y debe contener el código cómo el que se presenta continuación.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<header class="header">
<div class="grid3">
<div>
<img src="img-8.png" alt="IMG Test" class="logo">
</div>
<div>
<h1 class="title1">Web Development</h1>
<h2 class="title2">CSS excercise</h2>
</div>
<div>
<img src="img-8.png" alt="IMG Test" class="logo">
</div>
</div>
</header>
</body>
</html>
Como se puede observar el código anterior, simplemente contiene las etiquetas principales de un código HTML, dentro del Body cuenta con una etiqueta <header> que sirve para identificar donde se va a colocar toda la cabecera de nuestro archivo y dentro de él se encuentran una serie de secciones como son imágenes y los títulos que se van a presentar.
Si aún no estás muy familiarizado en cómo crear un archivo HTML o cuáles son las etiquetas principales que debe tener para crear una página web, te recomiendo que visites el siguiente enlace, donde encontrarás algunos tutoriales de cómo crear archivos en HTML y algunos ejercicios.
Posterior a esto, vamos a crear ahora si el archivo CSS, para decorar un header en CSS.
Sección del archivo CSS
Una vez que tenemos creado nuestro archivo HTML con toda la información de la cabecera, ahora sigue crear un archivo CSS, para lo cual simplemente tenemos que generar un archivo en blanco, pero esta vez con la extensión .css, el cual va a contener todas las instrucciones para decorar un header en CSS.
También además de crear el archivo CSS, es muy importante incluirlo en nuestro archivo HTML para que se le puedan aplicar los estilos, esto se hace mediante una etiqueta link, la cual va a incluir el nombre del archivo CSS que creamos, este paso es muy importante realizarlo debido a que de no ser así, no se la aplicarán los estilos correctamente.
El siguiente código debe ser incluido en la etiqueta <head> de nuestro archivo HTML y debe incluir el nombre de nuestro archivo CSS.
<link rel="stylesheet" href="style3.css">
👊 ¿NECESITAS UN HOSTING PARA TU PAGINA WEB O TIENDA ONLINE? 👊
Entonces te recomiendo usar Hostinger, que cuenta con una gran cantidad de ventajas y herramientas para crear tu Web de manera sencilla y profesional.
Estas son una de las características al contratar Hostinger:
💽 Hospedaje Profesional
💻 Sitio Web seguro con SSL
🔋 Velocidad de procesamiento
🖲 Interfaz fácil de usar
💰 Dominio Gratis
Entre muchas otras cosas mas…
Código para decorar un header en CSS
Primeramente antes de aplicar los estilos para decorar un header en CSS, se se le van a aplicar estilos a todo el cuerpo de la página, en este caso se le va a colocar un fondo de color azul claro, también se le va a colocar un margen de 0 para que abarque toda la pantalla y se lo va a colocar un color de letra negro con una familia de letra Arial.
body{
background-color: lightblue;
margin: 0;
color: black;
font-family: arial, sans-serif;
}
Para comenzar con los estilos del header, se van a aplicar las siguientes instrucciones. Se le va a colocar un fondo de color un poco entre azul y morado, también se lo va a colocar una altura automática para que abarque todo el espacio necesario que ocupa el contenido y se le va aplicar un padding para que tenga un espaciado interno y por último se le va a colocar toda la información centrada para que se vea más estético.
header{
background-color: rgb(87, 87, 250);
height: auto;
padding: 2rem 0;
text-align: center;
}
A las imágenes simplemente se le va a aplicar un ancho específico para que ésta no ocupe mucho espacio, en este caso va a ser de 200 pixeles.
.logo{
width: 200px;
}
Para finalizar el decorar un header en CSS, dentro del header, se le va aplicar un display GRID y se le va asignar un espacio de tres columnas para que el header se divida en tres espacios iguales y se les va a colocar una distancia de 20 px.
.grid3{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
Finalmente al decorar un header en CSS y a la aplicar todos estos estilos a nuestros archivos, vamos a tener el siguiente resultado, claro que tú puedes modificar todas estas opciones a tu conveniencia para que se vea diferente.
