Estilos CSS: ejemplo práctico de maquetación con CSS.

Como comenté en artículos anteriores, para pasar un psd a html de forma profesional, se debe hacer con Html y CSS (estilos en cascada)

En este artículo verás un ejemplo practico de como comenzar a usar CSS para cambiar la apariencia de los elementos en la página. Es muy fácil si comprendes el concepto principal y luego lo aplicas a cualquier elemento dentro del sitio web.
Maquetando con CSS

La maquetación con CSS comprende 3 partes:
– El/los archivo/s Html donde están los elementos de la pagina (sectores, textos, titulares,  etc, etc )
– El archivo CSS donde se definen las caracteristicas de esos elementos.
– El enlace del archivo CSS al archivo HTML para que se apliquen los estilos a los elementos.

Definiendo un estilo CSS para un elemento del documento
Para aplicar un estilo a un elemento del documento se debe definir dentro del archivo CSS,  una Regla para dicho elemento.

Esta regla se deberá escribir de una determinada forma. Y la forma correcta seria la siguiente:

selector {
propiedad: valor;
}

El selector es elemento al cual deseamos aplicarle la regla. (por ej. el elemento titulo: h1)
La propiedad es la propiedad del elemento al cual queremos aplicarle un valor (por ej: el color de fondo)
El valor es el valor que le daremos a la propiedad antes mensionada (por ej: verde)

Entonces un ejemplo de regla CSS seria:

body {
background-color: green;
}

Aqui estamos seleccionado la etiqueta html llamada “body” que corresponderia al cuerpo del documento html, y le estamos aplicando el color de fondo verde (green).
(aqui podriamos reemplazar “green” por un “#” seguido del codigo hexadecimal del color elegido, por ej: “#ff0000”. Esto seria rojo.)

Esto lo podemos realizar con cualquier elemento del documento HTML (cuerpo, textos, titulares, etc etc)
Solo  debemos especificar el elemento (selector), especificar la propiedad que vamos a definir (propiedad) y el valor que le queremos dar.

¿Cómo se enlaza el archivo CSS al HTML?
Es muy facil.
Vamos a seguir con el ejemplo anterior en donde vamos a realizar un documento HTML con un texto, y le aplicaremos el color de fondo ver.

Paso 1 – archivo CSS
Con Notepad o Dreamweaver, creamos un archivo nuevo y dentro del él colocamos:

body {
background-color: green;
color: white;
}

Luego lo guardamos como “estilos.css”.
Aqui especificamos una regla para la etiquetra <body>, asignándole un color verde (green) para la propiedad “fondo de pantalla”, y un color blanco “white” para el color del texto.

Paso 2 – archivo HTML con el enlace al CSS.
Creamos un archivo HTML llamado por ej: “index.html”

Dentro de él colocamos:

<html>
<head>
<title>Titulo del documento</title>
<link href=”estilos.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
Texto de ejemplo
</body>
</html>

Luego lo guardamos en la misma carpeta que el archivo CSS.
Si haces doble click el archivo “index.html”, verás una pagina en tu navegador, que tendrá un texto en negro y el fondo verder.

Aqui hicimos un documento HTML básico con los elementos: header y body.

Para eso utilizamos las etiquetas <html>, <head>,<body>, y dentro del cuerpo del documento (body) colocamos un texto simple. (ver uso de etiquetas)
Luego dentro de la etiqueta <head> definimos el enlace al archivo CSS.

La linea que enlaza es la siguiente :
<link href=”estilos.css” rel=”stylesheet” type=”text/css” />

Donde “estilos.css” es el archivo de estilos que creamos antes y donde definimos el color verde de fondo. (en este ejemplo, este archivo CSS deberá estar en la misma carpeta que el HTML)

Si luego deseas cambiar el color verde de fondo, a rojo…solo tienes que cambiar la linea del archivo CSS donde decía “green”, a “red”.

De esta manera te quedaría el CSS:

body {
background-color: red;
color: white;
}

Asi podrás cambiar cualquier propiedad de cualquier elemento del documento.
También podrás definir sectores o bloques donde colocar cierta información, especificando su posicion y tamaño.
Imagínate el poder que tiene esto, si por ej. tienes un sitio con 20 páginas y deseas cambiar el color de fondo de TODAS las paginas, solo cambias una linea del archivo CSS y listo!!!! Cambiarán todas las paginas!

Espero que estés captando el concepto poderosísimo que tienen los estilos CSS, y experimentes con tus páginas para ir manejando esta herramienta.

En los próximos articulos estaremos aplicando los estilos CSS a varios elementos del sitio para que tengas una idea mas general de como usar esta herramientas tan importante.

TOMA ACCION YA !
Te propongo un ejercicio:
Con los 2 archivos aqui creados, modifica el archivo CSS cambiando los colores de fondo “green” y color de texto”white”, por cualquiera de estos:

“green”, “black”, “blue”, “white”, “yellow”

(Cada vez que cambies el archivo CSS, guárdalo y actualiza la pagina en el navegador.
Recuerda que ademas de usar estos colores, puede utilizar un “#” seguido del codigo hexadecimal del color elegido, por ej: #ff0022)

Aqui te dejo los 2 archivos en formato ZIP: Descargar arhivos.

——————————————-
Me gustaría que me dejaras un comentario sobre este artículo que acabas de leer y también que me contaras un poco cual es tu principal complicación, a la hora de tratar de pasar un psd a html.
YO personalmente estaré contestando tus preguntas y comentarios para ayudarte.

Anuncios

2 pensamientos en “Estilos CSS: ejemplo práctico de maquetación con CSS.

  1. Pingback: De Psd a Html: Tus páginas más arriba en los buscadores (los textos) | Psd a Html: hazlo rápido y profesionalmente

  2. Enrique

    Bien. Es lo que pensé que era, pero no estaba seguro. En los estilos pones el aspecto y lo llamas desde el archivo html con un link. Sencillo, más de lo que pensé. Gracias por el tutorial 🙂

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s