Zumbe.net

Comenzando a programar una web

Comenzando con el CSS

Si quieres que tu página tenga un buen diseño no tienes otra alternativa que usar CSS. Aquí te explico lo básico para que te introduzcas en el CSS de forma fácil.

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

Y esto qué significa? pues que usando este lenguaje podemos dar forma o estilo a nuestra página web, la cual hemos hecho previamente con HTML (o XML o XHTML, que son similares).

Es muy importante que sepamos bien la función de cada lenguaje. No podemos dar estilo a nuestra web con HTML porque este fue creado para estructurar textos, y ese es su único cometido. Haciendo caso a esto gozaremos de muchas ventajas y nos evitaremos dolores de cabeza en el futuro.

Algunas de las ventajas de separar estos dos lenguajes y usar CSS son:

*Tenemos el estilo de toda una web en un solo archivo, de modo que ahorramos espacio, y si hay que modificar algo sólo cambiamos ese archivo CSS y cambia en todos los sitios.
*Los usuarios pueden imponer su hoja de estilos en vez de usar la tuya, esto nos da mayor accesibilidad por ejemplo en el caso de gente con dificultad visual que emplea fuentes de mayor tamaño.
*Puedes ofrecer diferentes versiones del estilo. Por ejemplo para ser impresa se ofrece un estilo en blanco y negro y más apropiado. (Para ver un ejemplo de esto visita http://www.camaleoncss.com)
*CSS ofrece más posibilidades de estilo y más potentes que las que pueda ofrecer HTML.
*Nuestro archivo de HTML es más comprensible a la vista del programador, por ejemplo en busca de un error de sintaxis nos aceleraría la búsqueda sin elementos superfluos.

Y así podríamos seguir un buen rato, aunque supongo que vas entendiendo que es la mejor elección.

Conceptos generales

Una vez visto que esta es una muy buena opción pasemos a ver la estructura de un documento CSS (cuya extensión de archivo es *.css).

Los estilos se definen mediante declaraciones, las cuales constan de una propiedad y un valor. Por ejemplo para que el tamaño de una fuente sea de 16 puntos se usa la declaración

font-size: 16pt

Para agrupar varias declaraciones se separan por el “Punto y coma” (;). Un ejemplo:

font-size: 16pt;

color: red;

Cada regla se aplica a una (o varias) etiqueta(s) de HTML. Por ello hay que escribir primero lo que se llama selector que identifica las declaraciones con esa etiqueta. Por ejemplo si queremos dar estilo a la etiqueta de párrafo () lo haremos de esta forma:

Código: css
p {
font-size: 16pt;
color: red;
}
 

Aquí se están aplicando dos declaraciones al selector p. De esta forma cualquier párrafo en nuestro archivo de HTML tendrá un texto de 16 puntos y de color rojo.

Se puede utilizar absolutamente cualquier etiqueta como selector (h1, p, div, em, ul…).

A continuación os muestro algunas de las propiedades que se pueden aplicar a los selectores:

Propiedades de fuente

font-family: Nombre_de_fuente, Nombre_de_otra_fuente;
font-style: normal / italic / oblique (sólo una de las tres)
font-weight: normal / bold / bolder / lighter / Número_del_100_al_900
font-size: tamaño_en_cualquier_unidad_válida(px,pt,mm,em,ex,%,…)

Propiedades de Color y Fondo

color: Color_expresado_en: Palabra clave(yellow,red,..), Código hexadecimal (#000000 = negro, #FFF = Blanco abreviado,…)…
background-color: Color
background-image: URL