Guia 7

UAJMS Cascading Style Sheets (CSS)
G U I A D E L A B O R A T O R I O #7
HOJAS DE ESTILO EN CASCADA
Cascading Style Sheets (CSS)
1.- Analogía.
HTML
Estructura de una Página
web
CSS
Página web con estilo,
con colores y diferentes
formas.
JAVASCRIPT
Dinamismo a la página
web.
Taller I - Lic. Octavio Aguilar M. 1

1.- Que es CSS?
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que
describe cómo se va a presentar un documento en la pantalla, en un dispositivo de sonido,
como se va a imprimir, en un dispositivo braille, aparatos móviles, etc.
CSS nos permite posicionar el contenido, diseñar tablas, definir características para sitios
en diferentes idiomas y propiedades relacionadas con la comunicación del usuario.
CSS nos ayuda a separar el contenido de la presentación.
CSS nos permite controlar el estilo y el formato de múltiples páginas Web a la vez.
Ejemplo:
Ahora cambiar el color del texto a ROJO (H1) y AZUL( P)
Esta modificación esta de la forma tradicional puro HTML.

Ahora hacemos lo mismo, pero con CSS.

.
Con este ejemplo se puede verificar clarámente las ventajas del uso de Hojas de Estilo.
2.- Versiones de CSS.
CSS1. Es la versión original de CSS. Estandarizada en 1996 por la W3C incluye formatos
de texto, párrafo, márgenes, lista, tamaños de imágenes,…
CSS2. Es estándar desde 1998. Amplía el CSS anterior para incluir sobre todo
posicionamiento (manejo de capas), además de tipos de medios (que permite definir
distintos tipos de páginas web según los diferentes medios que la usen, pantallas,
impresoras, reconocedores de voz…).
La especificación 2.1 es el último estándar. Modificó errores de la anterior.
CSS3. Se lleva trabajando en ella desde 1998 y es ahora cuando parece que se está
convirtiendo en el nuevo estándar. En realidad se compone de una serie de módulos que
definen diferentes especificaciones que sumadas a CSS2 (con la que sigue siendo
compatible) dan lugar a posibilidades muy avanzadas de formato. Como manejo del
contenido, sombreados y rellenos avanzados, transparencias, transiciones, nuevos
selectores,… De hecho en total hay unos 30 módulos, varios de ellos son ya considerados
recomendación oficial.

En conjunto aún está en fase de borrador, se pueden observar sus trabajos en

www.w3.org/Style/CSS/current-work
3.- Sintaxis Básica de CSS.

Un CSS tiene 2 principales partes: Un selector, y uno más declaraciones:
El selector es normalmente el elemento HTML al que queremos darle estilo, cada

declaración consiste de una propiedad y valor.
4.- Comentarios de CSS.
Dentro del código CSS se pueden colocar comentarios. Para ello el texto del comentario se
encierra entre los símbolos /* y */. Ejemplo:

5.- Aplicando CSS a un Documento.
Las Hojas de Estilo se puede incluir a un documento HTML usando cualquiera de estas tres
formas:
a) Usando estilos en línea usando el atributo STYLE directamente en un elemento.
b) Directamente incluir hojas de estilos en el <HEAD> del documento HTML.
c) Uso de hojas de estilo (archivos externos) por medio de enlaces o importación.
a). Usando estilos en línea aplicando el atributo STYLE directamente en un elemento.
Estilos en Línea
b). Directamente incluir hojas de estilo en el <HEAD> del documento.
Estilo en el Encabezado
<HEAD>

c). Uso de hojas de estilo (archivos externos) por medio de enlaces o importación.
Archivo Externo CSS
Archivo HTML
Referencia al Archivo Externo

CSS

************* miestilo.css ***************
P.destacado {
Archivo Externo
color:blue; CSS, referenciado
background:yellow; desde este archivo.
}
************* dos.html ***************
<html>
<head>
<LINK REL="stylesheet" HREF="miestilo.css" TYPE="text/css">
</head>
<body>
<P CLASS="destacado"> Pagina web de Taller I </P>
<P> Una Línea normal </P>
<P CLASS="destacado"> Taller I una materia práctica </P>
</body>
</html>
Esta sintaxis nos permitiría definir el formato que deseamos para los párrafos de nuestra
web. Existe una extensión de dicha sintaxis que hace posible definir un estilo que sólo se
aplicará a ciertas partes de nuestro documento. En concreto, nos permite definir clases de
elementos a los que aplicaremos el estilo.

Ejemplos variados: Crear una hoja de estilo como archivo externo

y hacer que todas estas páginas HTML, hagan referencia al archivo
externo.
************* ( a ) ***************
<html>
<head>
<style type="text/css">
body {
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is my first example to TALLER I.</p>
</body>
</html>
************* ( b ) ***************
<html>
<head>
<style type="text/css">
h1 { background-color:#6495ed; }
p { background-color:#e0ffff; }
div { background-color:#b0c4de; }
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
Este es un texto dentro del un elemento DIV
<p>Este párrafo tiene su propio fondo</p>
Todavía estamos dentro del DIV
</div>
</body>
</html>

********** ( c ) ***********
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Materia Taller I.</p>
<p style="color:MediumSeaGreen;">Carrera de Ingeniería

Informática.</p>
</body>
</html>
*********** ( d ) ************
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Materia Taller I -

G1</h1>
<h1 style="border: 2px solid Violet;">Carrera de Ing.

Informática</h1>
</body>
</html>

Guia 7

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia 7

Cargado por

Copyright:

Formatos disponibles

UAJMS Cascading Style Sheets (CSS)

Taller I - Lic. Octavio Aguilar M. 1

1.- Que es CSS?

Ahora cambiar el color del texto a ROJO (H1) y AZUL( P)

Esta modificación esta de la forma tradicional puro HTML.

Taller I - Lic. Octavio Aguilar M. 2

Ahora hacemos lo mismo, pero con CSS.

2.- Versiones de CSS.

Taller I - Lic. Octavio Aguilar M. 3

En conjunto aún está en fase de borrador, se pueden observar sus trabajos en

3.- Sintaxis Básica de CSS.

El selector es normalmente el elemento HTML al que queremos darle estilo, cada

Taller I - Lic. Octavio Aguilar M. 4

5.- Aplicando CSS a un Documento.

a). Usando estilos en línea aplicando el atributo STYLE directamente en un elemento.

b). Directamente incluir hojas de estilo en el <HEAD> del documento.

Taller I - Lic. Octavio Aguilar M. 5

Archivo Externo CSS

Referencia al Archivo Externo

Taller I - Lic. Octavio Aguilar M. 6

************* miestilo.css ***************

************* dos.html ***************

Taller I - Lic. Octavio Aguilar M. 7

Ejemplos variados: Crear una hoja de estilo como archivo externo

Taller I - Lic. Octavio Aguilar M. 8

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Materia Taller I.</p>

<p style="color:MediumSeaGreen;">Carrera de Ingeniería

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Materia Taller I -

<h1 style="border: 2px solid Violet;">Carrera de Ing.

Taller I - Lic. Octavio Aguilar M. 9

También podría gustarte

* miestilo.css ***

* dos.html ***