Cómo hacer una barra vertical CSS (En 8 Pasos)

Por tivi jones
Cómo hacer una barra vertical CSS (En 8 Pasos)
Comstock/Comstock/Getty Images

CSS o Cascading Style Sheets, se utiliza para indicar a los navegadores cómo mostrar los elementos HTML. El archivo CSS puede ser almacenado externamente del proyecto HTML y utiliza los nombres de sección para determinar qué estilos coinciden con cada sección. Esto ahorra tiempo ya que los desarrolladores web pueden cambiar el aspecto de un sitio completamente cambiando solamente este fichero. Puedes incorporar una barra vertical CSS en tu sitio de dos maneras.

Usando una sección DIV

Paso 1

Abre la página web en la que deseas agregar la barra vertical.

Paso 2

Agrega una sección div llamada "VBar" en la ubicación adecuada utilizando la siguiente etiqueta:

Paso 3

Guarda el archivo.

Paso 4

Abre el archivo CSS. Agrega una sección al archivo CSS con los atributos de la sección de la barra vertical, de la siguiente manera:

vbar {

width:?px; height:?px; background-color:#??????; }

Sustituye los signos de interrogación con los valores apropiados. Por ejemplo, la altura y la anchura se deben enumerar en pixeles con un formato como 10px. El color de fondo debe aparecer con un formato de seis dígitos de valor web hexadecimal, como por ejemplo el negro tendrá el valor # 000000 o el blanco # FFFFFF. Visita el enlace Colores CSS en la sección "Recursos" para ver más colores hexadecimales.

Paso 5

Guarda el archivo.

Usando una sección con atributo de borde

Paso 1

Abre el archivo CSS.

Paso 2

Agrega un atributo de borde a la sección de la página que se encuentre junto a la ubicación en la que desees tu barra vertical. Por ejemplo, si tienes una sección "container" que se encuentra a la izquierda del lugar donde deseas agregar la barra vertical, agrega un atributo border-right a ésta sección con el fin de crear un borde derecho, por ejemplo:

container {

border-right:X; }

Revisa la sección "Consejos" para obtener diferentes opciones de atributo borde.

Paso 3

Guarda el archivo.