Tutorial Css

Tutorial de CSS: Cascading Style Sheets
(C)opyLeft 2004, Toad
Contenidos
Presentación1. Antes de Empezar2. Documentos Estructurados3. El estándar CSS y navegadores4. Qué NO es CSS5. Empecemos6. Identificadores y Clases7. Empezando con Estilos8. Capas9. Enlaces10.
XHTML válido
CSS válido
Presentación
Bienvenido a este tutorial de CSS, el lenguaje de hojas de estilo usado en páginas web.Este tutorial pretende hacer una introducción a este lenguaje, métodos para separar estilo de contenido, etc. Se trata de introducir los conceptos, propiedades y estilos básicos de este lenguaje para que después cada uno haga sus propios diseños.
Normalmente la mayoría de manuales de creación y diseño de páginas web que hay en Internet, explican sistemas y métodos de HTML para dar formato tales comolas etiquetas , diseño con tablas, etc.
Con la llegada del CSS no sólo estos "antiguos" métodos están "desfasados", sino que son bastante más complicados de utilizar y mucho menos accesibles (como para navegadores en modo texto, reproductores orales, robots...).
Lo ideal sería que en los lenguajes de estructuración como HTML no incluyésemos nada acerca del estilo de los elementos, sino de suestructura. Es decir, en el documento HTML en lugar de decir "esto lo quiero a tamaño 24 y en cursiva, esto en rojo" lo mejor es estructurar el documento: "esto es un encabezado, esto una lista ordenada, esto un párrafo" sin incluír ningún elemento de diseño y presentación. Despues, creamos un documento CSS en el que sí "diseñamos" cada parte del documento, incluyendo colores, posición, bordes ydemás adornos.
Las ventajas son evidentes: un navegador o sistema en modo texto o que no soporte CSS, se quedará con el documento HTML con el contenido estructurado. Pero los que soporten CSS podrán ver el documento con todo sus estilos, adornos, etc.
Tutorial de CSS: Cascading Style Sheets
2 de 15
También hay más ventajas, como el hecho de poder incluír la misma hoja de estilos en varias páginasHTML, lo que es muy cómodo y útil. De esta manera podremos —por ejemplo— cambiar la fuente de los párrafos de dieciocho páginas con sólo editar un archivo; cosa que sería mucho más compleja si hubiésemos usado las viejas etiquetas como .
Este manual asume que se tienen conocimientos básicos en cuanto a HTML, estructuración de contenidos, párrafos, etc. De todas formas también veremos algunosenlaces interesantes sobre manuales de HTML, y más.
Antes de Empezar
Antes de empezar con CSS deberías tener por lo menos unos conocimientos básicos de HTML.
De entre las versiones varias de HTML yo te recomiendo el XHTML ya que es el "futuro" del HTML y el más claro. Mira los siguientes enlaces, altamente recomendados.
Tutorial de XHTML, por BenKo HTML correcto: cómo hacer buenas páginas web, porDaniel Clemente
Documentos Estructurados
Para poder aplicar cómodamente un estilo CSS a un documento HTML, éste —como hemos visto antes— debe estar bien estructurado; es decir, cabeceras, párrafos y demás.
Como en este manual se parte de la base de que ya se tienen conocimientos de HTML, sólo veremos un ejemplo:
Mi documento Encabezado del documento Segundo encabezado Esto es unpárrafo Esto otro párrafo Final del documento
Como se puede ver en la parte de color verde, hemos separado encabezados, párrafos y marcado las secciones "contenido" y "final". Ésto nos servirá para diferenciarlas a la hora de aplicarle un CSS.
Si quieres puedes ver cómo quedaría. Como vés, el navegador le aplicará a la estructura una serie de estilos "predeterminados" que por supuesto podremosanular o modificar con CSS.
Tutorial de CSS: Cascading Style Sheets
3 de 15
El estándar CSS y navegadores
CSS es un estándar-recomendación libre del W3C; con unas especificaciones que los navegadores que soporten CSS deberían de implementar.
Sin embargo algún navegador como Microsoft Internet Explorer se salta "a la torera" algunas de estas especificaciones y a veces hace lo que "le dá la...