Capitulo 2 Estilos CSS y modelos de caja 2.1 CSS y HTML Como aclaramos anteriormente, [a nueva especificacién de HTML (HTMLS) no describe solo los nuevos elementos HTML 0 el lenguaje mismo. La web demanda disefio y funcionalidad, no solo organizacién estructural o definicién de secciones. En este nuevo paradigma, HTML se presenta junto con CSS y Javascript como un Unico Instrumento integrado. La funcién de cada tecnologia ya ha sido explicada en capitulos previos, asi como los nuevos elementos HTML responsables de la estructura del documento. Ahora es momento de analizar CSS, su relevancia dentro de esta unién estratégica y su infiuencia sobre la presentacién de documentos HTML. Oficialmente CSS nada tiene que ver con HTMLS. CSS no es parte de la especificacién y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML. Al comienzo, atributos dentro de las etiquetas HTML provefan estilos esenciales para cada elemento, pero a medida que el lenguaje evolucioné, la escritura de cédigos se volvié més compleja y HTML por si mismo no pudo mas satisfacer las demandas de disefiadores. En consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentacién. Desde entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseftadores y apartado del proceso de evolucién de HTML. La version 3 de CSS sigue e! mismo camino, pero esta vez con un mayor compromiso. La especificacién de HTMLS fue desarrollada considerando CSS a cargo del disefio. Debido a esta consideracién, la integracién entre HTML y CSS es ahora vital para el desarrollo web y esta es la razén por la que cada vez que mencionamos HTMLS también estamos haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologias completamente separadas. En este momento las nuevas caracteristicas incorporadas en CSS3 estén siendo implementadas e incluidas junto al resto de la especificacién en navegadores compatibles con HTMLS. En este capitulo, vamos a estudiar conceptos bésicos de CSS y las nuevas técnicas de CSS3_ ya disponibles para presentacién y estructuracién. También aprenderemos cémo utilizar los nuevos selectores y pseudo clases que hacen mas facil la seleccién e identificacién de elementos HTML. aEl gran libro de HTMLS, CSS3 y Javascript Conceptos bésicos: CSS es un lenguaje que trabaja junto con HTML para prover estilos visuales a los elementos del documento, como tamaiio, color, fondo, bordes, etc, IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 estan siendo implementadas en las uitimas versiones de los navegadores més populares, pero algunas de ellas se encuentran atin en estado experimental. Por esta razén, estos nuevos estilos deberdn ser precedidos por prefijos tales como -moz- 0 -webkit- para ser efectivamente interpretados. Analizaremos este importante asunto més adelante. 2.2 Estilos y estructura ‘A pesar de que cada navegador garantiza estilos por defecto para cada uno de los elementos HTML, estos estilos no necesariamente satisfacen los requerimientos de cada disefiador. Normalmente se encuentran muy distanciados de lo que queremos para nuestros sitios webs. Disefladores y desarrolladores a menudo deben aplicar sus propios estilos para obtener la organizacién y el efecto visual que realmente desean IMPORTANTE: En esta parte del capitulo vamos a revisar estilos CSS y explicar algunas técnicas basicas para definir la estructura de un documento. Si usted ya se encuentra familiarizado con estos conceptos, siéntase libre de obviar las partes que ya conace, Elementos block Con respecto a la estructura, basicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en Iinea). Esta clasificacion esta asociada con Ia forma en que los elementos son mostrados en pantalla, + Elementos block son posicionados uno sobre otro hacia abajo en la pdgina, # Elementos inline son posicionados lado 2 lado, uno al lado del otro en la misma linea, sin ningun salto de linea a menos que ya no haya mas espacio horizontal para ubicarios. Casi todos las elementos estructurales en nuestros documentos seran tratados por los navegadores como elementos block por defecto. Esto significa que cada elemento HTML. que representa una parte de la organizacién visual (por ejemplo,

,