Cómo hacer un banner con código CSS

Introduce un código CSS para hacer un banner para tu sitio.
Por brandy alexander

Paso 1

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

<style type="text/css">

</style>


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 "<div id="banner"></div>" en cualquier lugar dentro de la etiqueta <body> 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í:

<div id="banner"> Type your banner's text here. </div>


Paso 7

Guarda tu documento.