HOJAS DE ESTILO CSS

¿QUÉ ES CSS?

• Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura.

• Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿PARA QUÉ SIRVE?

• CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML.

• CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

¿CÓMO FUNCIONA?

• CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML.

• La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

CSS SIGNIFICA: CASCADING STYLE SHEETS

• Los diseñadores han encontrado una herramienta con ventajas para mejorar su trabajo, donde destacan la posibilidad de acceder a las propiedades de los objetos de manera dinámica, y el hecho de poder modificar elementos a los que antes no se tenía acceso, como son las barras de desplazamiento del navegador, los elementos de formulario o el mismo puntero del ratón.

• Este libro explica con claridad este lenguaje de hojas de estilo, con el que alcanzará una comunicación más ordenada, útil y eficiente.

1. Usar CSS para diseñar la

presentación del contenido. • El antiguo método de diseñar paginas se

basaba en la edición de interminables lineas de HTML donde tablas anidadas definían la presentación de nuestro site. Este método generaba una gran cantidad de código que "solo" serviría para maquetar información y que debía ser reutilizado pagina tras pagina en el site.

• El ejemplo típico son los menús donde para mostrar 5 enlaces, son necesarios 10kbs de código.

Abandonando el antiguo metodo y abrazando

las CSS ganaremos 2 cosas. • Agilidad en la produccion tanto

desde la creacion de nuevo contenido como desde el punto de vista de la actualizacion y mantenimiento del contenido creado.

• Una mayor velocidad de bajada de documentos y con ello, un mejor funcionamiento de nuestros servidores.

EJEMPLOS: • A continuación se muestran tres ejemplos de Hojas de

Estilo diferentes, en las que se cambian algunas características, vinculadas a este mismo documento: La Guía Breve de CSS.

1. Guía Breve de CSS: sin vincular a una CSS

Solamente se tiene acceso a poder escribir el documento como si fuese un simple documento, sin ningún fondo, borde o sombreado.

2. Guía Breve de CSS: Ejemplo de Estilo 1

Se puede llegar a armar un documento algo mismo presentable, con un poco de bordes pero no mas.

3. Guía Breve de CSS: Ejemplo de Estilo 2

Se puede llegar a tener una mejor presentación, ya sea con fondos o logotipos, tipos de letras diferentes y más cosas. Bordes y sombreados para los títulos y subtítulos.