Cómo hacer un banner con código CSS (En 7 Pasos)

Por brandy alexander
Cómo hacer un banner con código CSS (En 7 Pasos)
Jupiterimages/Creatas/Getty Images

Un banner con hojas de estilo en cascada (CSS, por sus siglas en inglés) es una cabecera hecha de estilos CSS en lugar de una imagen digital insertada en tu página. El banner normalmente muestra el título y el slogan de tu sitio y, con CSS, no sólo se le da estilo a este texto, sino que también puedes construir y dar formato a la caja que contiene el texto. Utiliza el editor de texto de tu computadora para introducir el código CSS para hacer un banner en la página que tu desees.

Paso 1

Abre el documento de tu página web en tu editor de texto. Coloca el cursor antes de la etiqueta de cierre , e introduce el siguiente código CSS:

Paso 2

Escribe "#banner { }" entre los elementos de estilo para crear una regla para hacer tu banner. Escribe "height: ;" y "width: ;" y escribe el valor en píxeles (px) después de cada uno para especificar las medidas que prefieras. Por ejemplo:

banner { height: 350px; width: 600px; }

Paso 3

Introduce "font-size: ;" y "font-family: ;" para crear los atributos para dar formato al texto de tu cabecera. Escribe un valor en píxeles después de font-size y escribe dos o tres nombres después de font-family para especificar el tipo de escritura que prefieras. Por ejemplo:

banner { font-size: 32px; font-family: "Times New Roman",Georgia,Serif; }

Paso 4

Escribe "border-style: ;" y escribe un valor de tamaño en píxeles, un valor de estilo de línea y un valor de color hexadecimal para diseñar el borde de tu banner. Luego, escribe "background-color: ;" y el valor de color que quieras. Por ejemplo:

banner { border-style: 4px dotted #f0f0f0; }

Paso 5

Escribe "padding: ;" y un valor en píxeles para especificar la cantidad de espacio que hay entre el contenido y el borde del banner. El código CSS completo debería parecerse a este ejemplo:

banner {

height: 350px; width: 600px; font-size: 32px; font-family: "Times New Roman",Georgia,Serif; border-style: 4px dotted #f0f0f0; padding: 15px; }

Paso 6

Escribe "

" en cualquier lugar dentro de la etiqueta en que quieras que la cabecera aparezca. Escribe texto para tu banner, como el título de tu sitio web entre las etiquetas div, así:

Paso 7

Guarda tu documento.