Las Cascading Style Sheets(Css) nos proporcionan todo el control y la creatividad en la presentación y diseño de nuestras páginas Webs. Podemos adornar textos, crear bordes, márgenes con precisión, crear columnas,etc.Todo esto debe ser muy complicado no?.
Contrariamente a lo que se piensa, el objetivo de Css es facilitar el proceso de aplicar estilos a las páginas webs.
Trataré de hacer una breve introducción a las CSS y facilitar la compresión del sistema de cascada que tantos quebraderos de cabeza ocasionan a los principiantes.
Lo primero que hay que conocer es algo de html para comprender el funcionamiento de las hojas de estilo.Sin duda debemos saber como crear una pagina html básica.
Esta seria la estructura básica de una pagina html:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
Aunque el código no le parezca muy vistoso, esto es todo lo necesario que una pagina html necesita para funcionar.
La primera linea de una página html es la declaración DOCTYPE, que no es una etiqueta html.Solo indica al navegador que clase de html utiliza la página.Basicamente esta declaración “doctype” indica al navegador si usamos html o xhtml basado en XML(muy usado en la Web 2.0).Mi intención no es dar un curso de html, simplemente debemos conocer las etiquetas correctamente, ya que de una buena declaración doctype, depende que nuestros diseños con CSS funcionen correctamente en todos los navegadores.
La etiqueta html aparece al principio y al final del código, indicando al navegador que el contenido esta escrito en html.
Otra etiqueta es el <head> o encabezado que contiene el titulo de la página, ( o información invisible, como claves de búsqueda).
Y el cuerpo de la pagina separado por las etiquetas <body> es el encargado de mostrar todo el contenido que aparece en la ventana del navegador.
Pero html ya es pasado.Nació de un grupo de científicos que necesitaban estructurar los contenidos para facilitar su lectura.Y el diseño no fue su prioridad.Más tarde los diseñadores Web empezaron a utilizar etiquetas para dar mayor vistosidad a la web y fueron aprendiendo a manejar etiquetas para dar otro aspecto mediante el uso de etiquetas especificas.Y finalmente apareció CSS, convirtiendo el html en el armazón para CSS.
Anatomia de un Estilo:
Un estilo sencillo para definir el aspecto de un elemento de una página es algo bastante básico.Por ejemplo para establecer un color y tamaño de fuente para todas las etiquetas de parrafo de una web, escribiriamos el siguiente código:
p { color: red; font-size: 1.5em;}
Lo que convertiria todo el texto definido en el interior de etiquetas p como fuente color rojo con un tamaño de 1.5 em.
la etiqueta p define lo que se conoce como “selector” y le indica al navegador a que etiquetas debe aplicar el bloque de declaración, que en nuestro ejemplo lo forman los bloques color:red y font-size:1.5em.
Hojas de Estilo internas o externas:
Podemos optar por el uso de hojas de estilo internas o externas en función de la complejidad que deseemos imprimir a nuestros diseños.Los Diseñadores Web suelen utilizar una hoja externa que vinculan a todas sus páginas, ya que con ello pueden modificar el diseño con solo realizar cambios en la hoja de estilos vinculada, no teniendo que acceder a cada página para modificar su contenido.Una vez que las páginas se hacen más numerosas, su diseño se hace cada vez más dificil de gestionar.
La declaración de la hoja de estilo debe hacerse en la cabecera del código html dentro de las etiquetas .Su sintaxis es la siguiente si deseamos usar una hoja de estilo incrustada en la propia página.
En este ejemplo aplicariamos dicha hoja de estilo a las cabeceras de nivel 1.
h1 {
font-family: Georgia, “Times New Roman”, Times, serif;
text-transform: none;
color: #990000;
padding-top: 1em;
font-weight: normal;
margin-bottom: 20px;
}
Vincular una hoja de Estilos Externa:
Como ya hemos dicho, la ventaja de usar una hoja de estilos externa es su facilidad de modificación, aplicando los cambios a todas las páginas a las que hayamos vinculado dicha hoja.La sintaxis para este tipo de hojas es la siguiente:
<link href=”css/gallery.css” rel=”stylesheet” type=”text/css”>
En el interior de dicha hoja añadiriamos nuestros estilos al igual que lo hacemos en una página convencional, guardando dicho archivo con la extensión .css.
Selectores de Clase:
Si queremos alcanzar mayor control sobre nuestros estilos podemos utilizar los selectores de clase, de manera que como indicabamos en un ejemplo anterior, podemos aplicar un estilo a una etiqueta html especifica, como en el caso anterior donde este selector de etiqueta aplica formato a todos los parrafos existentes en nuestra pagina p { color: red; font-size: 1.5em;}
A medida que queremos tomar un mayor control utilizariamos la caracteristica más importante de CSS que es la herencia, donde determinadas etiquetas se ven supeditadas a lo que tenga definida una etiqueta de nivel superior.Entran en juego los selectores ID que a modo de ejemplo aplican formato a una etiqueta especifica dentro de otra etiqueta.Veamos un ejemplo:
Hemos dicho que la anterior definición p { color: red; font-size: 1.5em;} daría formato a todos los parrafos existentes en nuestra página pero si queremos dar un formato especifico a una parte de dicho parrafo sin variar todo el contenido utilizariamos un selector ID que solo se aplicaria a una porción de parrafo.
Su formato es el siguiente:
<p id=”copyright”>Este es el parrafo</p>
Siendo definido en la propia hoja de estilo de esta manera:
#copyright { color: black; font-size: 1.5em;}
Esto es precisamente la herencia.La primera etiqueta definia el parrafo como color red pero el selector id es más especifico y solo se aplica a los parrafos con id”copyright”, por lo que podemos cambiar la definición de regla inicial en zonas especificas de la página sin tener que redefinir el estilo.
Además de estos selectores existen selectores descendientes, pseudoclases y selectores avanzados pero requieren de un manual extenso para una correcta comprensión.
Toda esta combinación nos permite crear bordes atractivos, esquinas redondeadas, fuentes especiales y toda una gama de opciones que acerleran la carga de las páginas y reducen el codigo html incrustado, por lo que crear paginas más atractivas es muy sencillo.
