CSS para principiantes

Actualizado el 25/05/2009 < > 4 Cometarios

Resúmen: Hojas de Estilos en Cascada, es uno de los grandes avances en la creación de páginas y programas Web.

Meneame Bitacoras

Para este y tutorial sólo necesitas un navegador y un editor de texto. Si el editor tiene resaltado de sintaxis CSS pues mucho mejor. Si usted está acostumbrado a usar Dreamweaver déjelo un momento aparte pues nada se compara a controlar el código de manera directa.

Cascading Styling Sheets u Hojas de Estilos en Cascada, es uno de los grandes avances en la creación de páginas y programas Web. Uno de los aspectos más importantes de CSS es que no sólo maneja los estilos y tipografía sino también la distribución espacial del contenido de las páginas. Si durante años ha usado HTML y el tag table y siente que no hay necesidad de cambiar debo decirle que está en un error. En cuanto pruebe la potencia y sencillez de CSS se convertirá en un entusiasta. Además, las páginas hechas en CSS son más rápidas y ligeras, y se colocan mejor en los buscadores pues a Google y a Yahoo! les gusta lo hecho con CSS. Además, ahorrará muchas horas de trabajo, su jefe creerá que usted tardo días para cambiar el diseño de un sitio pero en realidad solo fue necesario hacer algunos pases mágicos por la hoja de estilos a la hora de la comida ;-).

Lo primero en CSS

Lo primero que debe tener en claro es que el tag font está terminantemente prohibido en CSS. Esto es así porque en CSS todo se maneja a través de “clases” o estilos. Existen algunas clases predefinidas por el navegador que usted conoce y ha usado cientos de veces: H1, H2, P, HR, TR, etcétera, estas clases son las que hemos usado siempre. La magia de CSS radica en que podemos crear nuevas clases y modificar las existentes. Los primero es crear la página primer-css.html.

<html><head>

<title> :: Mi primer CSS :: </title>

<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="stylesheet" href="estilos.css" type="text/css" />

</head>

<body>

<p><span class="slogan">Parrafo sin acentos</span></p>

<p><span class="titulo">Otro parrafo sin acentos</span></p>

<p><span class="titulo">Este es un

<span class="slogan">tercer parrafo</span>

sin acentos</span></p>

<h1>Este es el tag h1</h1>

</body>

</html>

Note que después del tag </title> están las indicaciones para que la página HTML “jale” el diseño CSS. A continuación, cree un archivo en blanco y guárdelo en el mismo directorio con el nombre estilos.css.

Comentar la hoja de estilos

Es una buena costumbre que las clases que se crean en los archivos CSS estén comentadas para saber en que y en donde las usamos, los comentarios se colocan entre un /* y un */. Las primeras clases (o estilos) que crearemos serán las clases “slogan” y “titulo”, que se usan para darle diseño al slogan y al titulo de la página, coloque este código en el archivo estilos.css.

/* Clase para el slogan */

 .slogan {

 color: #097a19;

 font-size: 14pt;

 font-weight: bold;

 font-family: Verdana, Arial, Helvetica, sans-serif;

 text-align: center;

 background-color: #b4b4b4;

 }

 /* Clase para los titulos */

 .titulo {

 color: #d3a900;

 font-size: 11pt;

 font-family: Arial, sans-serif;

 text-align: left;

 }

 /* Mi versión de h1 */

 h1 {

 color: #dd1010;

 font-size: 18pt;

 font-family: Arial, sans-serif;

 text-align: center;

 }

Las clases que uno crea comienzan con un punto (.) mientras las predefinidas (como h1) no lo tienen. Note además que el código CSS se escribe con minúscula pues así lo exige el estándar.

El tag SPAN sirve para marcar bloques de texto. Un bloque span, como vemos en el tercer párrafo, puede colocarse dentro de otro bloque SPAN.

Meneame Bitacoras

Publicado el 25/05/2009, última actualización 25/05/2009.

Autor: Mononeurona

URL: Mononeurona

Añadir Comentario (Subir al texto)

4 Cometarios

  1. Luz

    Esta informacion esta muy bien, pero yo me pregunto de cuando es? me refiero a la fecha en que fue publicada, entonces uno puede saber si es actual o tal vez las reglas de especificacion han cambiado. Como todos sabemos en esta materia constantemente hay nuevos cambios entonces no seria mala idea referir la fecha en la cual estos tutoriales fueron escritos.

    Domingo, 12 de julio 2009

  2. Verónica M.

    Luz tienes toda la razón, intentamos que la información publicada sea lo más actual posible, porque como bien dices en este tema las cosas cambian constantemente y algo escrito hace 5 años puede estar ya completamente obsoleto.

    Desgraciadamente no todos los artículos está claro cuando fueron escritos, evidentemente si vemos que la información no es correcta o está desactualizada no lo publicamos.

    Un saludo.

    Lunes, 27 de julio 2009

  3. carlos

    deben poner los ejemplos generados por el codigo para que nos sea mas facil. gracias

    Sábado, 1 de agosto 2009

  4. Breve guía para iniciarse en el diseño web

    [...] el mismo es algo que va a llevar algo más de tiempo, mucha práctica y requerirá constancia. El aprendizaje del lenguaje CSS tiene una utilidad adicional, y es que puede considerarse un paso intermedio antes de comenzar a [...]

    Miércoles, 23 de diciembre 2009

(Subir al texto)

Añadir Comentario

* Campos obligatorios