2

Cómo utilizar hojas de estilo CSS

Publicado por el .

Una de las cosas más importantes en la creación de una página web es su diseño. El éxito de una web muchas veces puede depender de como este distribuido su contenido en el espacio. Las hojas de estilo son una herramienta muy buena para realizar diseños web. Mediante sencillos comandos podemos conseguir grandes resultados. Hoy os enseñaremos algunos comandos básicos que podréis utilizar en vuestros diseños.

Cómo crear diseños web con CSS

Para utilizar una hoja de estilo CSS lo primero es saber cómo implementarla. Para ello debemos añadir al HEAD de nuestra web el siguiente código:

<link rel=”stylesheet” href=”styles.css” />

El archivo styles.css será el que contenga todos nuestros comandos. Normalmente para aplicar un diseño en nuestro código HTML utilizaremos las siguientes pestañas:

<div id =”nombredelpaquete”></div>

Una vez explicado esto podemos empezar a crear nuestro diseño. Para ello creamos un archivo llamado styles.css. Éste contendrá el código que realice la maquetación de la web. Los archivos CSS tienen la siguiente forma:

Nombredelpaquete{

Comandos de maquetación

}

Nombredelpaquete{

Comandos de maquetación

}

Podemos añadir tantos paquetes como queramos siempre que tengan distinto nombre. También podemos modificar etiquetas predeterminadas de HTML como <h1> o <body> escribiendo en el nombre el contenido de la etiqueta (h1 o body).

Respecto a los comandos de maquetación podemos utilizar cualquiera de los siguientes.

font-size:12px; –> Cambia el tamaño de la letra.

background-color:#F4F4F4; –> Cambia el color del fondo.

background:url(‘img/page_bg.jpg’); –> Cambia el fondo por una imagen.

font-family:Arial, Helvetica, sans-serif; –> Cambia el estilo de letra.

width:850px; –> Cambia el ancho del bloque en el que se insertará nuestro contenido.

border:1px; –> Crea un borde de 1px alrededor de nuestro bloque.

Además de estas propiedades básicas podéis encontrar muchas más a través de este enlace.

Como siempre recordad que podéis resolver cualquier duda a través de nuestro foro.


2 comentarios

  1.   Drako dijo

    Como siempre, muy buenos aporte 😀

  2.   DoctorPC dijo

    Es lo mejor para el diseño de una web. Ahorra una enormidad de tiempo en hace cambios de diseño

A inventar!