CSS. ¿Cómo cambiar los colores?

Este tutorial le muestra el modo de cambiar los colores de cualquier plantilla basada en HTML utilizando las propiedades de estilo CSS.

Los articulos en las paginas pueden ser coloreados de dos maneras: los codigos de color o imagenes. En primer lugar abra su sitio web en el navegador y pulse F12 para abrir la herramienta de desarrollo del navegador.


Por medio de esta herramienta se puede encontrar las propiedades de estilo de cualquier elemento de la pagina. Si Usted necesita alguna informacion adicional sobre las herramientas de desarrollo del navegador por favor consulte este articulo. Por ejemplo se puede ver el siguiente estilo :

 
.button {
    background: -moz-linear-gradient(#FF8E00, #FF7F00) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    color: #FFFEFE;
    display: inline-block;
    font-family: 'PT Sans',sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    padding: 20px 27px 19px;
    text-transform: uppercase;
}
 

En las propiedades de estilo arriba podemos ver varios los codigos de color: #FF8E00, #FF7F00, #FFFEFE etc. Cada uno de ellos define su propio color. Usted puede obtener los codigos de colores de cualquier software de edicion de imagenes.

Copie el codigo en el archivo CSS, guardelo y actualice la pagina en el navegador para ver los cambios.

Si el color de fondo esta creado de las imagenes se puede cambiar el fichero de imagen o reemplazar el fondo de la imagen con el fondo colorado.

Por ejemplo, Usted tiene lo siguiente:

 
.box-red {
    background: url("../images/box-red.gif") repeat scroll 0 0 transparent;
    border-bottom: 1px solid #E8837E;
    border-radius: 9px 9px 9px 9px;
    border-right: 1px solid #E8837E;
    border-top: 1px solid #E8837E;
    color: #FFFFFF;
    position: relative;
    width: 315px;
}

En este caso el fondo se basa en una imagen:

 background: url("../images/box-red.gif")  repeat scroll 0 0 transparent;

Usted puede abrir la carpeta de imagenes y reemplazar el fichero red.gifbox-red.gif con su imagen de fondo o simplemente reemplazar el fondo de imagen con el fondo colorado.

Reemplace:

background: url("../images/box-red.gif")  repeat scroll 0 0 transparent;

con

background: #E8837E;

Sientase libre de mirar el video tutorial abajo: