Instituto Técnico “Jesús Obrero”

5to Año – Programación – Prof. Pedro Fernandes

Cascade Style Sheets (CSS)

Hojas de Estilo en Cascada

Son una herramienta que permite definir estilos visuales a elementos de hojas HTML y XML, existen varias formas de
implementarlas y las mismas responderán a las necesidades del desarrollador.
1. Documentos .css asociados al documento HTML

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

2. Etiquetas de estilo embebido en el código HTML al principio del documento

<style type="text/css"> CÓDIGO CSS </style>

3. Atributos de estilo en las etiquetas HTML

<p style="color: blue"> … </p>

Sea cual sea el caso, CSS es interpretado y asociado a los elementos de un documento HTML gracias a la existencia de
herramientas llamadas selectores.

Hay distintos tipos de selectores y los mismos son extremadamente útiles para organizar y simplificar el código CSS en un
sitio web:

 Selector Universal: * { … }
 Selector de Etiqueta: [nombre_etiqueta] { … }
 Selector de Clase: .[nombre_clase] { … }
 Selector de ID: #[id] { … }
 Selector Descendente: [elemento_1] [elemento_2] … [elemento_n] { … }
 Selector de Estados: [elemento]:estado { … }
o Hay básicamente 4 tipos de estados: link, visited, hover, active

Existen otros selectores pero los mismos serán útiles en casos bastante particulares, la lista completa puede encontrarse en
línea.

Por otra parte, CSS maneja un denominado box model o modelo de caja, que especifica cómo se han de organizar los
elementos de un documento HTML en el navegador. Los atributos más resaltantes de dicho modelo son: margin, padding y
border, expuestos en la figura 1.

Última actualización: junio 2015

 Instituto Técnico “Jesús Obrero”
5to Año – Programación – Prof. Pedro Fernandes

Tal modelo de caja permite especificar

comportamientos que brindaran una capa
extra de flexibilidad a la estructuración de
elementos en un documento HTML.
Básicamente los elementos se posicionan
en base a 3 esquemas (hay más): normal,
flotante y absoluto.

Para el esquema normal, estos se agrupan

en orden de aparición a través del
documento HTML y respetan las reglas
Figura 1: Ilustración del Box Model en CSS definidas por los atributos margin y padding.
Este es el esquema más común. En el caso del esquema flotante, los elementos se ubican de forma similar al normal, pero
una vez hecho esto se desplazan todo lo posible hacia la izquierda o la derecha dentro de su contenedor. Finalmente, el
esquema absoluto permite ubicar un elemento en una posición absoluta a su contenedor con independencia de los elementos
circundantes, lo que permite crear un solapamiento de elementos.

Nota:
Como dato adicional, los comentarios en CSS se
especifican entre /* … */

Ejercicios Prácticos:

 Diseñar un CSS que permita especificar el

comportamiento de un botón para sus distintos
estados (apuntado, presionado, normal).

Figura 2: Esquema de posicionamiento flotante

Última actualización: junio 2015