CREACIÓN y APLICACIÓN DE ESTILOS CSS UTILIZANDO

DREAMWEAVER CS5

Crear Estilo CSS Nuevo:

1. En la barra de Menú en la opción Formato, seleccione Estilos CSS y luego

de click en la opción Nuevo…

2. Aparecerá el cuadro de diálogo Nueva Regla CSS.

Autor: Ing. Jackeline Romero Rodríguez

Defina el tipo de estilo CSS que desea crear:

• En Tipo de Selector seleccione Clase (puede ser aplicable a cualquier

elemento HTML).

• En Nombre de Selector digite el nombre del estilo (Ejemplo: .miestilo)

Nota: los nombres de clase deben comenzar por un punto (.) y pueden
contener cualquier combinación alfanumérica (por ejemplo .myhead1). Si no
introduce el punto inicial, Dreamweaver lo hará de forma automática.

• Para incrustar el estilo en el documento actual, donde dice Definición de

Regla seleccione Sólo este documento.

3. De click en el botón Aceptar. Aparecerá el cuadro de diálogo Definición de Estilos.

4. Seleccione las opciones de estilo que desea establecer para el estilo CSS nuevo
como tipo fuente, tamaño, color, etc. y haga clic en el botón Aceptar.

Autor: Ing. Jackeline Romero Rodríguez

Aplicar un Estilo CSS:

Nota: Antes de aplicar los Estilos CSS, se recomienda digitar primero todo el texto
que estará en la página.

Para aplicarle a un texto un Estilo CSS creado previamente debe hacer lo siguiente:

1. Seleccione el texto al que desea aplicarle el estilo

2. En el inspector de propiedades seleccione la opción HTML (en la imagen se

encuentra señalada con un recuadro de color rojo), en el cuadro de texto Clase,
seleccione el nombre del estilo.

Autor: Ing. Jackeline Romero Rodríguez

 Le aparecerá en la página el texto con el estilo que ha seleccionado.

Nota: El procedimiento anterior lo debe realizar para aplicarle un estilo a cada uno
de los textos que se encuentran en la página.

Modificar el Nombre de un Estilo CSS:

Para modificar el nombre de un Estilo CSS, en el panel de archivos en la Ventana

Estilos CSS, seleccione el nombre del estilo que desea modificar, de click derecho y
seleccione la opción Cambiar nombre de clase.

Autor: Ing. Jackeline Romero Rodríguez

Aparecerá el cuadro de diálogo Cambiar nombre de clase, en el cual se encuentra
seleccionado el nombre del estilo que va a cambiar

En el cuadro de texto Nuevo nombre, digite el nombre que desea asignarle al estilo y
de click en el botón Aceptar.

Modificar las Propiedades de un Estilo CSS:

Para modificar las propiedades de un Estilo CSS como tipo de fuente, color, tamaño,
etc, en el panel de archivos en la Ventana Estilos CSS, seleccione el nombre del
estilo que desea modificar, de click derecho y seleccione la opción Edición…

Aparecerá el cuadro de diálogo Definición de regla, en el cual se encuentran las

propiedades actuales del estilo.

Autor: Ing. Jackeline Romero Rodríguez

Modifique las propiedades que desee y por último de click en el botón Aplicar y luego
de click en el botón Aceptar.

Autor: Ing. Jackeline Romero Rodríguez