Está en la página 1de 33

ESTILOS CON MICROSOFT EXPRESSION WEB

INTRODUCCIÓN.........................................................................................................2
LAS HOJAS DE ESTILO .............................................................................................4
LOS ESTILOS...............................................................................................................5
CÓMO TRABAJAR MICROSOFT EXPRESSION WEB y CSS ...............................7
STYLE APPLICATION .......................................................................................... 7
DEFINIR LOS ESTILOS EN UNA HOJA DE ESTILOS EXTERNA......................10
APLICANDO ESTILOS CON EL PANEL STYLE APPLICATION Y LA BARRA
DE HERRAMIENTAS STYLE ..................................................................................16
MANEJANDO ESTILOS CON LA VENTANA PROPIEDADES CSS Y CON EL
PANEL MANAGE STYLES ......................................................................................24
PANEL MANAGE STYLES ................................................................................. 24
VENTANAS CSS PROPERTIES Y TAG PROPERTIES .................................... 26
REDEFINIR UNA ETIQUETA O TAG HTML ........................................................29
CSS REPORTS ...........................................................................................................32

1
INTRODUCCIÓN

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal
usado para definir la presentación de un documento estructurado escrito en HTML o
XML (y por extensión enXHTML). El W3C (World Wide Web Consortium) es el
encargado de formular la especificación de las hojas de estilo que servirá de estándar
para los navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un


documento de su presentación.

Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un


encabezamiento y que es más importante que un bloque etiquetado como <h2>.
Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta
para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta
<h1> debía disponer de la información si se deseaba un diseño consistente para una
página, y además, una persona que lea esa página con un navegador pierde totalmente el
control sobre la visualización del texto.

Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre


como va a ser visualizado, solamente marca la estructura del documento. La
información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar
<h1> : color, fuente, alineación del texto, tamaño, y otras características no visuales
como definir el volumen de un sintetizador de voz, por ejemplo.

La información de estilo puede ser adjuntada tanto como un documento separado o en el


mismo documento HTML. En este último podrían definirse estilos generales en la
cabecera del documento o en cada etiqueta particular mediante el atributo "style".

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

• Control centralizado de la presentación de un sitio web completo con lo que se


agiliza de forma considerable la actualización del mismo.
• Los navegadores permiten a los usuarios especificar su propia hoja de estilo
local que será aplicada a un sitio web, con lo que aumenta considerablemente la
accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar
su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los
enlaces.
• Una página puede disponer de diferentes hojas de estilo según el dispositivo que
la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa,
mostrada en un dispositivo móvil, o ser "leída" por un sintetizador de voz.
• El documento HTML en sí mismo es más claro de entender y se consigue
reducir considerablemente su tamaño.

Hay varias versiones: CSS1 y CSS2, con CSS3 en desarrollo por el World Wide Web
Consortium. Los navegadores modernos implementan CSS1 bastante bien, aunque
existen pequeñas diferencias de implementación según marcas y versiones de los
navegadores. CSS2, sin embargo, está solo parcialmente implementado en los más
recientes.

2
3
LAS HOJAS DE ESTILO

Habitualmente, las hojas de estilo se definen en un fichero externo y diferente a la


página web y cada página web tiene un link o referencia a este fichero por medio de la
etiqueta <link>

Sin embargo, hay tres caminos diferentes para aplicar los estilos:

a) Fichero externo: Es el método más eficaz sobre todo cuando la Web es extensa. Se
crea un fichero de estilos -una hoja de estilos- y se almacena en un fichero diferente y
cada página html hará referencia a la hoja de estilos mediante la etiqueta <link>.
Cuando se desea hacer alguna modificación en la presentación de la página basta con
cambiar la hoja de estilos y los cambios se realizan de manera automática. Una misma
hoja de estilos servirá para muchas páginas web o para todo el sitio, por lo que los
cambios son tan sencillos de realizar cuando nuestro sitio consta de una sola página que
cuando contiene 500. Es en este modo de trabajo en donde se ve más claramente que la
presentación y el contenido están separados.

La etiqueta a la que se ha hecho referencia tiene más o menos este “aspecto”.


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

b) En el propio fichero html: Es posible definir los estilos en la propia página web
utilizando la etiqueta <style> en el interior de la cabecera de la página, es decir, dentro
de la etiqueta <head>. El problema de esta forma de trabajo se presenta en grandes
Webs, ya que cuando se desean hacer los cambios, hay que ir también página a página.
En esta forma la presentación y los contenidos están de manera separada, sin embargo
están definidos en cada página con lo que – a mi modo de ver- no hay plena separación.

En el siguiente bloque de código, se presenta un ejemplo de cómo sería un estilo muy


sencillo definido de esta manera:

<style type="text/css">
.menu {
width: 150px;
float: left;
}
#mainContenido {
margin-left: 165px;
}
p{
background-color:lime;
list-style:upper-roman;
}
</style>

c) En línea: Es posible definir el estilo en la propia etiqueta de un elemento. El aspecto


del estilo de un elemento párrafo definido de esta forma podría ser el siguiente:

<p style="color: #FF0000; font-family: 'Lucida Sans', sans-serif;


background-color: #FFFF00">

4
LOS ESTILOS

Una hoja de estilos consiste en un fichero de texto donde se definen una serie de reglas
que determinan el aspecto o presentación de nuestra página web. Estas reglas consisten
en propiedades de fuentes, propiedades de posicionamiento, propiedades de bordes de
los elementos, etc.

Por ejemplo:
body{
color: red;
font-size: 10px;
}
p{
background-color:lime;
list-style:upper-roman;
}
.miClase {
width: 150px;
float: left;
}
#mainID {
margin-left: 165px;
}

Figura 1

Un estilo típico contiene un selector y un bloque donde se definen los estilos. En


nuestro ejemplo anterior, selectores serían body, p, .miClase o #mainID y bloque sería
el código que está entre llaves por cada selector. Cada línea de un bloque se estructura
de la siguiente forma:

propiedad: valor;

Por ejemplo:

color: red

Los estilos se pueden aplicar de tres formas diferentes, que se corresponden con los tres
tipos de selectores:

a) Clases: Las clases permiten definir un estilo y asignarle un nombre. Dicho


nombre se coloca como atributo en todos los objetos o elementos de nuestra
página o páginas web en los que se desee aplicar dicho estilo.

Por ejemplo, si definimos el fichero .css siguiente:

h3{
font-size: 10px;
}
.miClase{
font-family:"Lucida Sans";
color:red;

5
}
#miID {
margin-left: 165px;
font-family:"Courier";
color: yellow;

}
Figura 2

o bien, si en el <head> de nuestro fichero html incluimos el bloque

<style>
h3{
font-size: 10px;
}
.miClase{
font-family:"Lucida Sans";
color:red;
}
#miID {
margin-left: 165px;
font-family:"Courier";
color: yellow;
}
<style>

Figura 3

si deseamos que un párrafo determinado tenga el tipo de letra Lucida Sans y


color rojo, insertaríamos como atributo en dicho párrafo el nombre de la clase
miClase, sin el punto inicial:

<p class=miClase”> Esto es un párrafo </p>

b) Identificador: El estilo se aplica al elemento cuyo atributo atributo id sea un


identificador determinado. Por ejemplo, si en un fichero incluimos el código
de la figura 2 o en el interior de la página html, en la cabecera, añadimos el
código de la figura 3, el objeto cuyo id sea miID tendrá ese margen izquierdo, y
el tipo de letra será Courier y amarilla. Así, el párrafo siguiente tendrá ese
“aspecto”:
<p id=miID”> Esto es un párrafo </p>

c) Redefinición de las etiquetas: Cada elemento tiene una presentación por


defecto. Por ejemplo, los elementos <h1> tienen un tamaño de letra diferente que
los elementos <h3> aunque el tipo de letra por defecto sea el mismo. Para variar
la presentación por defecto basta con redefinirlos bien en la hoja externa o bien
en la propia página. Si incluimos como antes los códigos de las figuras 2 o 3
como anteriormente hemos dicho, en el navegador, las propiedades definidas
anteriormente variarán la presentación de todos los elementos <h2> de nuestro
sitio Web o de la página respectivamente.

6
Muchos diseñadores web ignoran la posibilidad de implementar en contenido y la
presentación de sus sitios de manera separada. Es además muy posible que no salgan de
este error hasta que deseen realizar cambios en la presentación de sus sitios.

Realmente, cuando se implementa un nuevo sitio y la herramienta que utilicemos en el


diseño no nos aporte estas posibilidades, la tarea de separar los contenidos de la
presentación se hace realmente complicada y se comprende bien que muchos
diseñadores tiren “por la calle de en medio” para definir su presentación uniendo
contenido y presentación.

Para mí, en este momento, Microsoft Expression Web es la mejor herramienta del
mercado para trabajar de esta forma, es decir, el paquete que más ayuda al diseñador
Web a separar el contenido de la presentación en sus sitios web.

Sin embargo, es necesario comprender bien cuando se deben aplicar los estilos en línea,
en el propio documento o en una hoja de estilos externa. Además, en Microsoft
Expression Web es necesario comprender bien cuándo se aplican los estilos de manera
automática o manual.

Como regla general, se puede decir que crear páginas Web utilizando los estilos en línea
o en la propia página permite que la implementación o creación de las páginas sea más
rápida ya que casi todo el trabajo de presentación lo puede hacer Microsoft Expression
Web de manera automática y el diseñador no tiene que ocuparse de ello. Definir los
estilos en una hoja de estilos externa significa que hay que definir “manualmente” –
aunque Microsoft Expression Web nos ayuda con ventanas de diálogo donde
prácticamente todo se puede hacer al golpe de ratón- dichos estilos para cada elemento
de la página o sitio.

Con esta forma de trabajo la creación es más lenta, pero sin embargo, como
contrapartida, se gana muchísimo tiempo, se cometen muchos menos errores y, yo me
atrevería a decir, que se mejora enormemente la posibilidad de mejorar la presentación
del sitio o página cuando se desean realizar cambios en la presentación

En resumen: en la primera forma el trabajo de creación es más rápido pero resulta


verdaderamente complejo modificar la presentación de nuestras páginas.

CÓMO TRABAJAR MICROSOFT EXPRESSION WEB y CSS

STYLE APPLICATION

Microsoft Expression Web permite definir la forma de trabajo –en línea, en el propio
documento o página o en un fichero externo- y cómo aplicar estilos –manual o
automáticamente-. Para ello, proporciona una barra de herramientas:

7
Para añadir esta barra a la barra de herramientas podemos clicar con el botón derecho
del ratón sobre la caja de herramientas y elegir Style Application o bien en el menú,
seleccionar View/Toolbar/Style Application.

• Barra Style Application:

Este elemento tiene dos opciones: automática o manual.

a) Automática: si se elige esta opción, el resto de las opciones de esta barra de


herramientas se inhabilita. Esto significa que si se selecciona un elemento en la
página web y se le aplica, por ejemplo un tamaño de letra 14 y letra Courier –
pulsando los botones de la propia barra de herramientas mientras el elemento
está seleccionado- Microsoft Expression Web crea de manera automática una
clase en la cabecera del propio documento o página y asocia esa clase al
elemento seleccionado. Es decir, se selecciona un elemento y se crea la
presentación o los estilos del elemento seleccionado pulsando en las diferentes
opciones de presentación de la propia barra de herramientas. Esta forma de
trabajo está lejos de ser flexible.
b) Manual: con esta opción, se habilitan el resto de las opciones de la barra donde
se permite elegir cómo Microsoft Expression Web debería crear y como
consecuencia, aplicar, los estilos en la página Web. Así, se puede elegir si se
crea el estilo en línea, en el propio documento o página o se añade el estilo a un
fichero externo de extensión css. Estas opciones están disponibles en la barra, en
el menú Target Rule.
• Target Rule: En el caso de ahber elegido que el estilo se aplique de forma manual,
hay que decidir cómo se crea el estilo: esto se hace desde el menú Target Rule. Si se
eligiese la opción Auto en Style Application Target Rule estaría deshabilitada. Las
formas de crear el estilo se obtienen pulsando en TargetRule. Nos aparecen las
siguientes posibilidades:

a) New Auto Class: se define una clase en la cabecera del propio documento o página
y se van añadiendo propiedades conforme se van pulsando en la barra de
herramientas como el tipo de letra, su color o su tamaño, el color del fondo, etc…
b) New Style in line: Conforme se pulsa en las distintas opciones de la barra Microsoft
Expression Web se define un estilo en línea.
c) Apply New Style: Microsoft Expression Web (MEW a partir de ahora) abre una
ventana de diálogo que nos permite definir el estilo de manera totalmente visual, a
golpe de ratón.

8
Esta ventana la explicaremos con más detalle más adelante, pero ahora adelantamos
que es la opción más flexible de todas porque además de ayudarnos mucho a la hora
de diseñar nuestros estilos de manera visual, nos permite:
o Crear el estilo –en línea, en la propia página o en un documento externo-.
o Crear una clase o un identificador donde definir el estilo.
o Modificar, sobrescribiendo, los estilos que vienen por defectos de los
elementos Web.

Ya veremos más adelante que esta ventana la podemos abrir también desde otros
lugares del propio entorno.

A continuación, puede verse el video Barra StyleApplication de 9m. 08seg. de


duración. Es un video de introducción sobre cómo aplicar los estilos con MEW. Se
estudia con detalle la barra de herramientas Style Application

• Reuse Properties: Si, por ejemplo, seleccionamos un elemento y elegimos un tipo de


fuente Arial en la barra de herramientas, dependiendo de la opción seleccionada en
Target Rule, MEW crea un estilo –por defecto las va llamando style1, style2, etc.- y
lo aplica al elemento seleccionado. Si ahora seleccionamos un segundo elemento y
aplicamos fuente Arial también MEW reconoce que esta propiedad ya está en el
estilo style1 y no crea un nuevo estilo y utiliza style1 en el nuevo elemento. Si el
botón Reuse Properties está deshabilitado, MEW crea una nueva clase –style2- para
ese elemento aunque la definición sea la misma.

• Show Overlay: Con el botón pulsado, se presenta un recuadro de puntos alrededor


del elemento seleccionado. Es una opción meramente visual. La verdad es que los
autores de este manual no entendemos muy bien el porqué de esta opción.

9
Microsoft Expression Web permite elegir entre crear el estilo en línea, en el propio
documento o página o definir el estilo al comienzo del documento.

Dependiendo de las necesidades de nuestra Web y del modo personal de trabajar


escogeremos una u otra forma de trabajar pero, en todo caso, aconsejamos vivamente
“perder tiempo” en explorar todas las posibilidades de esta barra de herramientas porque
posteriormente no sólo nos permitirá trabajar de distintos modos cuando estemos
diseñando sino que sabremos perfectamente qué código añade MEW por nosotros de
modo automático. Esta última consideración es muy importante porque nos permite
controlar en todo momento el aspecto de nuestra Web y nos aporta la posibilidad de
trabajar directamente sobre el código de los estilos.

DEFINIR LOS ESTILOS EN UNA HOJA DE ESTILOS EXTERNA

Antes de comenzar a estudiar este punto, creo que es muy útil ver los siguientes videos:

Cómo definir una hoja de estilos externa con MEW (Duración: 3m. 48seg.) En este
video se hace una introducción para explicar una de las maneras de definir uno o varios
estilos en una hoja de estilos externa. Se aprovecha para explicar algunas peculiaridades
de la interfaz de usuario de MEW y para explicar cómo definir un atributo en un
elemento web.

Cómo definir un estilo in line o en línea con MEW (Duración 3m. 19seg.)

Cómo definir un estilo en el propio documento con MEW (Duración 3m. 26seg.). Se
explica una manera sencilla de definir un estilo en la cabecera del propio documento

Esta es la opción más flexible y potente a la hora de trabajar con estilos y


verdaderamente es este modo de trabajar donde se condensa el verdadero sentido del
trabajo con CSS.

Para construir una hoja de estilos externa, podemos trabajar de dos formas:

a) Visualmente, es decir, a golpe de ratón, con la ventana de diálogo de Estilos.


Esta ventana se puede abrir de dos formas:

a. En el panel de tareas Apply Styles, pulsar sobre New Style

10
b. En la barra de herramientas de ApplyStyles, con la opción Manual
seleccionada, escoger Apply New Style en Target Rule.

b) Directamente, escribiendo el código en un fichero y salvándolo con la extensión


css. En esta forma de trabajo, MEW nos ofrece una ayuda muy grande y a las
personas que nos gusta escribir el código personal y directamente y que no sea el
programa el que lo haga por nosotros encontraremos en MEW una herramienta
excelente que ayuda al diseñador pero que le permite controlar su trabajo, es
decir lo que el programa escribe o no de manera automática. Posteriormente, es
necesario vincular el fichero web con el de estilos. Esto se hace por medio de la
etiqueta <link>.

Vamos a ver todo esto con un ejemplo:

1. Creamos una página web. Nada más crearla, lo mejor es guardar esta página.
Parra ello pulsamos sobre el botón guardar de la barra de herramientas o bien
File/Save en el menú principal. Nos pedirá un nombre y, por ejemplo, podemos
llamar a nuestra página AplicarEstilos.htm –ver nota sobre la diferencia entre las
extensiones htm y html-. Una vez guardada nuestra página, insertamos un
elemento <h5> y tres párrafos. Para añadir estos elementos, podemos hacerlo
escribiendo directamente el código en el fichero html –y esto es perfectamente
posible porque MEW nos ayuda mucho- o bien podemos hacerlo desde la barra
de herramientas Common de MEW –si no la tenemos en el entorno de trabajo
podemos pulsar View/Toolbar/Common o bien pulsar el botón derecho del
ratón sobre una parte vacía de la barra de herramientas de MEW y seleccionar
Common-. Una vez aquí, basta con pulsar sobre el ComboBox primero de esta
barra –como se aprecia en la figura siguiente- y seleccionar Heading <h5> y
Paragraph <p> respectivamente para insertar esos elementos.

A los párrafos les llamaremos respectivamente, pUno, pDos y pTres. Para ello,
en el panel de Tag Properties -si por lo que sea no podemos ver este panel, lo
podemos abrir en el menú Task Panes/Tag Properties- definimos para esos tres
elementos los atributos id pUno, pDos y pTres respectivamente, como se indica
en la figura.

11
A continuación escribimos un título –el que queramos- y tres contenidos –uno
por cada párrafo-.
2. En la barra de herramientas de Style Application, seleccionamos Manual y en
Target Rule, Apply New Style… Se os abrirá entonces la ventana de diálogo
que nos ayuda a definir los estilos de manera visual, a golpe de ratón.

3. En esta ventana de diálogo podemos definir un estilo en línea, en el propio


documento o en un fichero externo.

Para definir un nuevo estilo, tenemos varias opciones que vamos a ir explicando:
a. Define in: nos permite definir el tipo de estilo que vamos a crear.
Tenemos varias posibilidades:
i. Current Page: En la página actual. En general, añade un estilo
en la etiqueta <style> de la cabecera de la página. Si el foco está
en la página css porque estamos trabajando en ella, añade el estilo
a esta hoja de estilos.
ii. New Style Sheet: Crea una nueva hoja de estilos externa.

12
iii. Existing Style Sheet: Añade el estilo a una hoja de estilos ya
existente. Dicha hoja la seleccionaremos en la opción URL que
está situada a la derecha de la ventana, en la parte superior.
Permite también crear un estilo en línea. Lo vemos en el siguiente
punto.
b. Selector: Permite dar cualquier nombre a un selector, tanto si se trabaja
con clases (.miClase) como con Identificadores (#miIdentificador)
como si se desea sobrescribir o redefinir un determinado estilo de un
elemento cualquiera (por ejemplo un <h5> o <p>. Permite también crear
un estilo en línea, seleccionando in line en Selector.
c. En la parte inferior de esta ventana hay tres botones. Tanto Aceptar
como Cancelar tienen el sentido que se espera de ellos y Apply nos
permite aplicar ese estilo al elemento que esté seleccionado, sin que se
cierre la ventana.

Siguiendo nuestro ejemplo, en Selector escogemos New Style Sheet –


nueva hoja de estilos-, indicamos un nombre para nuestro estilo –por
ejemplo .miEstilo- y deseleccionamos la opción Apply New Style
Document Selection, porque sólo queremos crear el estilo, no aplicarlo.

d. Ahora definimos el estilo para el elemento que esté seleccionado en


Selector. Basta con ir seleccionando distintas “categorías” en la lista
Category: opciones para la fuente, el fondo, los bordes, etc… Las
diferentes categorías dan lugar a distintas opciones en la parte derecha de
esta zona central. Un poco más adelante seguiremos hablando de
Category. En este caso, estamos definiendo el estilo de la etiqueta
.miEstilo. Por ejemplo, seleccionamos una letra Lucida, Sans, un
tamaño de fuente X-Large, un color de la letra rojo. Más o menos, la
ventana quedaría así:

13
4. Pulsamos el botón Ok y se nos presenta la ventana

Para preguntarnos si queremos que en el documento htm actual se haga una


referencia a esta hoja de estilos recién creada en la cabecera del documento.
Respondemos que sí, porque si respondemos negativamente no se nos “lincarán”
ambos documentos. En la cabecera de la página web se nos añade la línea

<link rel="stylesheet" type="text/css" href="unsaved:///Untitled_1.css" />

Los dos ficheros –htm y css- quedan vinculados por esta etiqueta <link> que
indica que este documento html tiene una hoja de estilos asociada de tipo texto e
indica la ruta donde se almacena dicho fichero.

A continuación, guardamos nuestro documento Web –o el css, es igual- y se nos


pide un nombre para nuestro fichero css. Por ejemplo, lo llamaremos
Estilos.css. Vemos que en la línea que nos ha añadido antes en el fichero
html, se actualiza el nombre del fichero css.

5. En la ventana de diálogo para definir visualmente los estilos hay otras opciones.

14
a. Category: Aquí se selecciona el tipo de elemento para el que se desea
definir el estilo –fuente, fondo, posicionamiento, etc.- del elemento
seleccionado en Selector –en la figura, es el elemento párrafo <p>. En
la figura se ha definido una serie de opciones para este elemento: la
fuente –porque es la que está seleccionado- y el fondo –se indica con
letra negrita el hecho de haber seleccionado algo de esa propiedad-.
b. Preview: este recuadro es meramente visual, y se utiliza para que el
usuario pueda ver el aspecto de su estilo en esta pequeña ventana.
c. Description: En esta caja de texto se escribe el código que define este
estilo y que se va a añadir a nuestro fichero css o a nuestro propio
documento o al elemento –dependiendo de la opción seleccionada en
Define in-.
6. Aceptamos y el aspecto de nuestro documento debería ser, más o menos- el
siguiente:

15
Vemos que nada más cerrar la ventana se ha actualizado el aspecto o
presentación de nuestra página y en dicha página no hay nada que haga suponer
que hemos definido una presentación para nuestros elementos de párrafo. Sólo la
etiqueta <link> define, como hemos dicho- la referencia a un fichero css que
define este aspecto. Dicho fichero tiene el suiente contenido:

p {
background-color: #FF0000;
font-family: "Lucida Sans", sans-serif;
font-size: x-large;
font-style: italic;
color: #0000FF;
text-decoration: overline;
}

Aquí es donde de verdad se aprecia que la presentación está separada del


contenido. Bastaría con cambiar, por ejemplo, el color de fondo para que nada
más guardar el fichero css, cambiarán todos los fondos de todos los párrafos de
todas las páginas que hagan referencia a esta hoja de estilos.

Poco a poco iremos estudiando cada una de las propiedades de esta ventana de diálogo.

APLICANDO ESTILOS CON EL PANEL STYLE APPLICATION Y


LA BARRA DE HERRAMIENTAS STYLE

16
Es conveniente ver los dos videos siguientes antes de estudiar este punto.

Formas de aplicar estilos (Duración: 8m. 57seg.) En este videotutorial se explica de


manera pormenorizada tres diferentes maneras de aplicar un estilo definido por medio
de una clase a distintos elementos: por medio de la ventana Tag Properties, por medio
de la barra de herramientas Styles y por último, por medio del panel de tareas Apply
Styles. Se explica también cómo eliminar la aplicación de un estilo a un elemento o
cómo borrarlo. Se utiliza un ejemplo de una página htm con tres párrafo. Se definen de
manera visual dos clases para definir dos estilos y se aplican a los diferentes elementos.

Panel ApplyStyles (Duración: 10m. 20seg.) En este video tutorial se explica con detalle
el panel Apply Styles, que se utiliza para aplicar o borrar estilos en nuestra página.

Una vez que hemos definido un estilo en una hoja de estilos externa… ¿cómo aplicarlo?
Hay varias maneras de hacerlo. Con MEW esta tarea resulta muy sencilla. Para verlo,
vamos a hacer un ejemplo. Nos vamos a apoyar en el ejemplo anterior, donde tenemos
definidos un elemento h5 como título y tres párrafos cuyos IDs son respectivamente
pUno, pDos y pTres. Hemos definido un estilo para la clase .miEstilo.
Antes de empezar, es absolutamente necesario tener seleccionado “Manual” en la barra
de herramientas Style Application.
a) En primer lugar abrimos el fichero htm o html.
b) Como antes hemos dicho hay varias formas de aplicar estilos:
a. Ventana o panel Tag Properties. (Si el lector no lo tiene en pantalla,
puede visualizarlo sin más que pulsar desde el menú Task Pane/Tag
Properties). Para ello, seleccionamos el párrafo pUno y, en la ventana
Tag Properties, seleccionamos en el atributo class, la clase .miEstilo
como se describe en la figura. (En este combo box aparecerán todas las
clases que tengamos definidas).

Podemos ver que en cuanto se selecciona .miEstilo, cambia el aspecto de ese


párrafo pUno.
b. Barra de Herramientas Styles. Si no está en la barra de herramientas
podemos visualizarla desde el menú View/Toolbar/Styles. Esta barra
nos da información sobre el elemento seleccionado. Si seleccionamos el
párrafo pUno, el aspecto de esa barra será:

17
En el caso de hacerlo sobre pDos, sólo aparecerá información sobre el
elemento sobre el ID, pero no en el elemento class porque no tiene ninguna
clase asignada. Una vez explicado esto ya se puede aplicar el estilo. Sólo es
necesario seleccionar nuestro elemento –en este caso vamos a seleccionar el
párrafo pDos- y, en el ComboBox correspondiente a class de esta barra de
herramientas, elegimos la clase que queramos aplicar, en nuestro caso,
.miEstilo. De manera inmediata se aplica al elemento pDos la clase
.miEstilo.

c) Panel de tareas Apply Styles. Es con mucha diferencia la manera más flexible
de aplicar un estilo. (Si no vemos este panel, lo podemos visualizar desde el
menú Task Pane/Apply Styles). En este panel se listan los estilos actualmente
definidos en nuestro proyecto y una aproximación gráfica del estilo
seleccionado. El aspecto de la ventana es el siguiente:

Para aplicar un estilo a un elemento:

a. Seleccionamos el elemento. Por ejemplo, pTres.


b. Pulsamos sobre el estilo –la clase .miEstilo, en la figura superior el
elemento en rojo- en el panel Apply Styles. De manera instantánea se
aplica el estilo a nuestro elemento. Si deseamos no aplicar dicho estilo,
seleccionamos el elemento y pulsamos, en esta misma ventana sobre la
opción Clear Styles. En ese momento el aspecto del elemento se
transforma en el estilo por defecto para ese elemento.
En este Panel hay muchas más opciones. Ya hemos dicho que se trata del
lugar más flexible del programa para trabajar con los estilos. No sólo nos
permite “aplicar estilos” a un deteminado elenemto, sino que podemos crear
o definir nuevos estilos, “atachar” o rfefernciar una hoje de estilos a un

18
determiknado fichero htm o html, categorizar las vistas de los estilos, borrar
estilos, renombrarlos, editarlos, etc.

A continuación vamos a ir enumerando las distintas funcionalidades de este


panel Apply Styles.

1. New Style. Abre la caja de diálogo Nuevo estilo en la


ventana de diálogo de estilos, que anteriormente hemos
explicado, que permite definir de manera visual, a golpe
de ratón nuestros estilos, tanto en línea, como en el propio
documento como en una hoja de estilos externa.

19
2. Attach Style Sheet… Abre una caja de diálogo que nos
permite lincar o referenciar una hoja de estilos externa a
una determinada página web si es que esa hoja no está ya
referenciada. Podemos referenciar uno o varios fichero
css, a una o varias páginas web y lincar o importar –ya
veremos la diferencia más adelante- dicho fichero.

Al pulsar sobre Browse… aparece la típica ventana de


diálogo, que nos sirve para especificar dicho fichero css.

3. Botón Options… Opciones para definir las distintas


vistas de este panel. Me parece que es muy útil la
categorización por orden o el tipo. Permite también un
fondo aunque, la verdad, a mí me parece inútil esta
opción.

4. Si pulsamos con el botón derecho sobre un determinado


elemento o estilo de la lista aparecen un menú contextual

20
con una serie de opciones realmente útiles. La lista es más
o menos –depende del elemento o estilo- la siguiente:

• Appy Style: sirve para aplicar el estilo al elemento


seleccionado.
• Go To Code: Abre la hoja de estilos o lleva la
selección a la cabecera del fichero html donde está
definido dicho estilo. A mí me parece muy útil porque
permite trabajar directa y rápidamente con el código.
• Select All Instances Selecciona todos los objetos –y
nos indica además el nº de objetos- que tienen aplicado
el estilo en cuestión sobre el que estamos pulsando con
el botón derecho.
• New Style… Abre la ventana de diálogo Nuevo estilo,
ya explicada anteriormente. Creo que no tiene mucho
sentido tener esta opción aquí.
• New Style Copy… Crea una copia del estilo actual,
sobre el que estamos trabajando, y nos abre la ventana
de diálogo de nuevo estilo con las opciones del estilo
actual definidas. A partir de aquí esmuy fácil añadir,
cambiar o definir un nuevo estilo basado en el anterior.
Creo que es muy útil esta opción.
• Modify Style… A mi modo de ver la opción más útil
de este menú contextual. No abre la ventana de diálogo
de nuevo estilo, tal y como se dejó, es decir, con el
estilo ya definido en esa ventana, y en ella podemos
modificar nuestro estilo.
• Rename… Cambia el nombre de la clase o del estilo.
Lo modifica no sólo en esta ventana sino también en
todo el código donde aparezca dicho elemento.
• Delete. Borra el estilo actual.
• Clear Style: Borra del código la referencia a la clase o
ID. No borra el estilo, sólo deja de aplicarlo a ese
elemento.

21
• Remove Link. Permite desvincula o desrefernciar
nuestra hoja de estilos externa del fichero web o página
html.
• Attach Style Sheet… Justo lo contrario. Permite
vincular la hoja de estilos con la página web. Añade a
la cabecera de la página una etiqueta <link> donde se
define el vínculo a la hoja de estilos.
• Manage Style Sheet Links... Abre la ventana de la
figura desde donde es possible gestionar las
vinculaciones de las páginas web y las hojas de estilo.
Desde aquí puede cambiarse la referencia de la página
actual.

• Remove Class, Remove ID, Remove in Line Style. A


mí me parece que esta opción se utiliza mucho. Sirve
para borrar la referencia a la clase, el ID o el estilo en
línea que está seleccionado. Se puede hacer desde el
código pero a mí me parece muy cómodo hacerlo desde
aquí.

5. Características: En esta ventana –y también en la de


Manage Styles que veremos más adelante y que sirve para
gestionar los estilos- hay una simbología que creo que es
interesante conocer:
• Puntos verdes: representa a una clase.
• Punto rojo: representa un ID o identificador.
• Punto azul: representa un estilo de una etiqueta o tag.
• Punto amarillo: representa un estilo en línea
• @nombre: representa un fichero css importado.

Cuando los puntos de diferentes colores están rodeados


por un círculo, significa que ese estilo se ha aplicado en la
página actual.

22
Esta ventana nos ayuda también a identificar los diferentes
estilos porque nos representa el aspecto de cada uno ellos.
En las dos siguientes figuras se puede ver un ejemplo de
cada uno de los elementos anteriores. La ventana nos
representa en diferentes bloques los estilos que están
definidos en las hojas de estilo y los estilos definidos en la
página actual, ya sea en línea, en el propio documento o
importados. En la primera de las representaciones nunca se
representan los estilos de los elementos, ya que éstos no se
pueden aplicar –están aplicados por sí mismos-.

23
MANEJANDO ESTILOS CON LA VENTANA PROPIEDADES CSS
Y CON EL PANEL MANAGE STYLES

PANEL MANAGE STYLES

El panel de tareas Manage Styles está disponible en el menú Task Pane/Manage


Styles. Funcionalmente, este panel es muy parecido al panel Apply Styles pero sin
embargo proporciona una alternativa cuando se tienen muchos estilos definidos. Este
panel tiene:

a) CSS Style List o listado de estilos del sitio web. Se puede acceder desde aquí a
cualquiera de los estilos que tengamos definido en nuestro sitio Web. Clicando
con el botón derecho sobre cualquiera de los estilos –ya sea de la página actual o
bien de la hoja de estilos- se puede acceder a muchas posibilidades en el menú
contextual.

24
Por ejemplo, si pulsamos con el botón derecho sobre el estilo .otroEstilo,
aparece el menú:

Desde aquí se puede aplicar estilos al elemento de la página que tengamos


seleccionado (Apply Style), ir al código del propio estilo para modificarlo (Go
To Code), seleccionar todas las instancias donde aparece este estilo (Select All
Instances), crear un nuevo estilo por medio de la ventana de diálogo Nuevo
estilo (New Style), crear un nuevo estilo que sea exactamente igual a éste pero
que podamos construirlo a partir de él (New Style Copy), modificar el estilo
actual ejecutando la ventana de nuevo estilo (Modify Style), renombrar –en este

25
caso- el nombre de la clase (Rename Class), borrar el estilo o la clase (Delete),
quitar o añadir la referencia de la página web a nuestra hoja de estilos (Remove
Link & Attach Style Sheet), y por último, manejar o controlar las referencias
de nuestra página a una o varias hojas de estilo (Manage Style Sheet Links). No
explicamos estas posiblidades ahora porque he hablado de ellas en el punto
anterior de forma detallada.

b) Select Style Preview. En esta pequeña zona de este panel se presenta el aspecto
que tiene el estilo seleccionado.
c) Botón Options. Ya se ha explicado en el anterior punto.
d) New Style. Ya se ha explicado en el anterior punto
e) Attach Style Sheet. Ya se ha explicado en el anterior punto

Panel Manage Styles (Duración: 9m. 44seg.) En este video tutorial se explica la
funcionalidad del Panel Manage Styles. Para hacerlo, me apoyo en un sencillo ejemplo
que permite ir describiendo sus distintas opciones.

VENTANAS CSS PROPERTIES Y TAG PROPERTIES

Esta ventana proporciona una alternativa cuando se desea hacer pequeñas


modificaciones o añadir alguna o algunas propiedades a un estilo existente sin
“relanzar” la ventana de diálogo de estilos. Su aspecto es el de la figura:

a) En la parte superior parecen tres botones o iconos:

26
El primero nos permite ver las propiedades CSS por categorías, el segundo
nos ordenas dichas propiedades por orden alfabético y la tercera nos presenta
en la parte superior las propiedades CSS que han sido definidas o
modificadas y el resto listadas por categorías o por orden alfabético según se
tenga pulsado el primer o segundo botón. En la figura anterior puede verse
que se tiene pulsado el primer botón –listado por categorías- y el tercero por
lo que se sitúan en la parte superior de dicha lista las tres propiedades CSS
que se han definido. El texto está en color azul cuando una propiedad se ha
definido y en la parte derecha de la ventana aparece el valor de dicha
propiedad.

b) En la parte que está situada un poco más hacia abajo, Current Rule, se
informa de cómo se ha aplicado el estilo –en línea, en el propio documento o
en un a hoja de estilos externa y en éste último caso se informa del nombre
del fichero css y un poco más abajo el selector que se ha utilizado –una
etiqueta, una clase, un identificador, etc (en este caso la clase .miEstilo).
Si se pulsa sobre el nombre del fichero css se accede al código de la hoja de
estilos.

En la zona CSS Properties se listan todas las propiedades susceptibles de


ser definidas. Una pequeña cruz en la izquierda de una propiedad indica que
esta propiedad tiene sub-propiedades o propiedades que dependen o están
relacionadas con esta propiedad. Si se pulsa sobre la cruz se desglosan estas
propiedades y aparece un pequeño recuadro con un guión indicando que la
lista está desplegada. La ventana no es exactamente la misma si se trata de
un estilo definido en una hoja de estilos o definido en la propia página o en
línea. Por ejemplo, en la figura se puede ver ahora un estilo en línea, definido
en un párrafo cuyo identificador es pTres- que sólo ha cambiado una
propiedad –el color de la letra- y están listadas las propiedades por orden
alfabético y en la parte superior de la lista se encuentra la propiedad definida.
Ahora aparece en la primera zona la leyenda Applied Rules que nos informa
de los elemento que tienen aplicado este estilo y un botón que antes no
aparecía –Summary- porque se trataba de un estilo definido en una hoja de
estilos.

27
Si se pulsa sobre el botón Summary la ventana cambia su contenido:

28
Ahora nos aparecen sólo las propiedades que afectan a este estilo. Haya que tener en
cuenta que este botón permanecerá en estado pulsado si no lo volvemos a pulsar.

Si esta ventana está vacía es porque el foco de la aplicación no se encuentra sobre algún
estilo en el panel Manage Styles.

Panel CSS Properties (Duración: 7m. 54seg.) Se explica en detalle el Panel CSS
Properties. A través de un ejemplo, se enseña que sirve para obtener información de un
elemento que se haya seleccionado pero también y sobre todo, para realizar pequeñas
modificaciones en un determinado estilo ya definido sin tener que ejecutar la ventana de
edición de estilos o hacerlo directamente sobre el código.

En el video tutorial Tag Properties (Duración: 6m. 27seg.) se explica con detalle la
utilización de la ventana Tag Properties y cómo trabajar con ella. A través de un
ejemplo se enseña que sirve, sobre todo, para trabajar con el código HTML y no con
estilos aunque también podría modificarse un estilo desde esta ventana.

REDEFINIR UNA ETIQUETA O TAG HTML

Por defecto, los elementos HTML tienen un estilo pre-definido. Por ejemplo, el
elemento <h1> tiene un tamaño y un color de letra por defecto. Los mismo sucede con

29
cualquier elemento. ¿Es posible modificar estos estilos predefinidos?. La respuesta es
afirmativa y vamos a hacer un ejemplo para comprender cómo hacerlo.

El elemento <body> por ejemplo, tiene un estilo definido por defecto. La fuente o letra
por defecto es Times New Roman, de color negro. Por otro lado tiene unos márgenes
determinados arriba, abajo, izquierda y derecha. Vamos a modificar la apariencia que el
elemento <body> tiene por defecto. Para entender cómo redefinir etiquetas HTML
utilizando CSS con MEW. Para ello se deben seguir estos pasos:

a) Desde el panel Apply Styles o Manage Styles, pulsamos sobre New Style y se
abrirá la ventana de diálogo de estilos.

b) En Define in: seleccionar Existing Style Sheet si es que estamos trabajando ya


con una hoja de estilos externa o New Style Sheet si es una nueva. En URL
seleccionamos la página HTML en el primero de los casos en el elemento. En el
menú Selector, elegimos la etiqueta <body> que es el elemento al que queremos
redefinir el estilo por defecto.

30
c) Cambiamos ahora en la ventana alguna propiedades: La categoría Font
Arial/Helvetiva en la opción Font-Family. El tamaño o Font-Size Small y
Color Rojo. La categoría Box quitar Same for All for margin en el checbox
correspondiente e introducir el valor 35 for left. Esto añadirá 25 píxeles de
espacio en la parte izquierda de la página.

d) Al pulsar sobre el botón Ok el aspecto de la página se modifica porque se ha


redefinido el estilo de la etiqueta <body> . Por otro lado podemos ver que se ha
definido el código en la hoja de estilos externa. Además se añade la etiqueta
body a la lista de estilos en el panel Manage Styles, con un icono azul, que
significa que hemos redefinido el estilo de una etiqueta: también puede verse
en la ventana que aparecen en letra azul las propiedades que se han modificado
las propiedades CSS Properties.

31
En el video tutorial Redefinir Etiquetas (Duración: 5m. 27seg.) se explica cómo
redefinir el estilo que por defecto se aplica a cada uno de los elemento HTML. Para ello,
nos apoyamos en un ejemplo muy sencillo y se modifican algunas de las propiedades
CSS que están predefinidas por defecto para el elemento body. También se explica con
detalle cómo quedan reflejados estos cambios en en los paneles Apply Styles y Manage
Styles así como en la ventana CSS Properties.

CSS REPORTS

En ocasiones, es posible tener algunos errores en nuestro código y que la visualización


de nuestra página no se vea afectada por este error. Un ejemplo sencillo se da cuando a
un elemento determinado se asocia un nombre de una clase que no existe. En este caso,
si se visualiza la página con cualquier visualizador, no tenemos manera de saber que
tenemos un fallo en nuestro código.

MEW nos proporciona un herramienta que permite chequear nuestro código para saber
si tiene errores. Dicha herramienta se denomina CSS Reports. Esta herramienta nos
permite conocer las clases indefinidas, los estilos no utilizados, lo errores, etc.

Para ejecutar esta herramienta lo podemos hacer de dos maneras: desde el menú Task
Panes/CSS Reports o bien desde el menú Tools/ CSS Reports. La única diferencia
entre ambas es que en la segunda la aplicación se ejecuta directamente y en la primera
de las opciones tenemos que hacerlo sobre la ventana que se nos abre.

Si la plaicación se ejecuta de la segunda forma, es decir, desde el menú Tools/CSS


Reports s eabre la ventana de la figura siguiente. Si lo hemos hecho desde el panel,

32
tenemos que ejecutar la aplicación, pulsando sobre el botón PLAY situado en la esquina
superior izquierda del panel, en color verde.

En pestaña Errors, seleccionamos la o las páginas que deseemos chequear y


seleccionamos todas las opciones de la parte derecha de la ventana. Al pulsar sobre el
botón Check, el panel CSS Reports nos da una información del tipo del de la figura:

En el video tutorial Chequear Estilos (Duración 4m. 11seg.) se explica esta herramienta
que proporciona MEW para chequear nuestras páginas. Con ella se puede acceder a
errores que sería muy difícil detectar visualizando el código directamente o ejecutando
nuestras páginas web.

33

También podría gustarte