Cómo hacer un banner con código CSS

Escrito por brandy alexander | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un banner con código CSS
Introduce un código CSS para hacer un banner para tu sitio. (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.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 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>

  2. 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; }

  3. 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; }

  4. 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; }

  5. 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; }

  6. 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>

  7. 7

    Guarda tu documento.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles