El lenguaje de Estilos CSS

1. Introducción a los estilos CSS

CSS (Cascading Style Sheets) es el lenguaje utilizado para determinar el aspecto de todo aquello que se puede identificar con una etiqueta de HTML. Podemos considerar a los estilos CSS como los “disfraces” del código HTML.

Desde el principio de curso estamos evitando la utilización de código CSS y hemos ido construyendo todas las páginas del proyecto en el que estamos trabajando usando exclusivamente código HTML. A partir de este momento, empezaremos a aplicar estilo, diseño y personalización a nuestro proyecto utilizando los estilos CSS.

Trabajar con estilos CSS es similar a trabajar con hojas de estilo en programas de maquetación como Indesign o QuarkXpress, aunque los estilos CSS van un poco más allá de la simple edición y formato de párrafos y textos. Algunas ventajas de trabajar con CSS son:

Control total sobre el diseño. Con estilos CSS podemos aplicar opciones de diseño imposibles con HTML: ajustes de interlineado, posición de elementos, aplicación de bordes, definición de márgenes y otras muchas más.
Actualización eficaz del diseño del sitio. Con la edición los estilos CSS asociados a un sitio, es posible cambiar de un plumazo el diseño y la apariencia de todos los documentos HTML del mismo.
Mejor accesibilidad y usabilidad. Al tener por separado el contenido (XHTML) y su apariencia (CSS), los navegadores procesarán un código más limpio y mejor estructurado y será accesible a número mayor de navegadores y usuarios.

Desde las “Propiedades de página” de Dreamweaver, es muy sencillo establecer algunas instrucciones de diseño basadas en estilos CSS relativas a la apariencia general de la página, a los encabezados y a los vínculos y sin necesidad de escribir una sola línea de código. Esto es sólo la punta del iceberg de todo lo que es posible realizar con estilos CSS.

1.1 Un avance a los estilos CSS en Dreamweaver

Ya hemos visto como desde las “Propiedades de página” en Dreamweaver se pueden modificar algunos aspectos relacionados con la apariencia relativa a 3 bloques básicos:

Apariencia general: Desde este panel es posible modificar la tipografía general del documento, aplicar un color o imagen de fondo y definir unos márgenes.
Encabezados: Nos permite definir una tipografía específica para todos los encabezados así como modificar sus tamaños y colores.
Vínculos: Desde aquí podemos modificar la apariencia de los textos enlazados. De forma predeterminada se muestran de color azul y subrayado, de color morado cuando han sido visitados y de color rojo al pulsar sobre ellos. Podemos determinar una tipografía específica y un tamaño para los vínculos, diferente al resto del texto de la página y también determinar un color específico para cada uno de los posibles estados del enlace: estado inicial; al pasar el ratón por encima; enlace visitado; al hacer clic en el enlace.

Todas estas opciones, se traducen automáticamente en estilos CSS dentro de la etiqueta <style> que a su vez está dentro del <head> de la página.

2. Fundamentos de los estilos CSS

Cada una de las instrucciones de estilo que se generan automáticamente en el <head> de la página es a lo que se le denomina “regla de estilo”. Es importante conocer los fundamentos de las reglas de estilo CSS y sus partes para poder crearlas y editarlas.

2.1 Anatomía de las reglas de estilo CSS

Vamos a describir las partes de una regla de estilo CSS.

Selector: El selector de una regla CSS (nombre o título) determina a qué elementos va dirigida dicha regla. Veremos que el selector podrá ser una etiqueta HTML, una combinación de ellas (table; h1, h2; p strong) o cualquier otro nombre definido por nosotros mismos, que se vinculará sobre algún elemento de la página. (“.destacado”, “.cancion”, #contenedor”,…).
Propiedad: Cada una de las características que puede modificarse por una regla de estilo. Por ejemplo font-size cambiaría el tamaño de la letra o color modificaría el color del texto. Existen muchas propiedades para modificar casi cualquier cosa que podamos imaginarnos.
Valor: Es el dato que se le asigna a una determinada propiedad y debe estar entre comillas. Por ejemplo font-size: ”24px”; color: ”white”.
Declaración: Está formada por el conjunto “propiedad: valor;”. Para finalizar una propiedad se usa ;. Las declaraciones de una regla CSS van a continuación del selector y están encerradas entre llaves. Esta llave de apertura { se utiliza antes de comenzar las declaraciones y esta llave de cierre } se utiliza para finalizar la regla de estilo.

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333; }

2.2 Colocación y aplicación de los estilos CSS

Existen tres ubicaciones desde las que es posible aplicar reglas de estilos CSS a un documento o elemento HTML. Vamos a verlas desde la más concreta a la más genérica.

Aplicación de estilos CSS en línea

Esta es la forma de aplicar estilos CSS sobre un elemento HTML específico dentro de la página. Es una alternativa para modificar condiciones concretas sobre un elemento en la página. Los estilos en línea se integran dentro del elemento HTML mediante el atributo style.

<h1 style="color: red; font-family: Verdana, Arial;" >Título</h1>

Aplicación desde el <head> del documento

En este caso, las reglas CSS se definen dentro de la etiqueta <style> que a su vez se coloca dentro del <head> del documento. De esta forma, los estilos se aplican automáticamente a todo el documento.

<head>

h1 {…}
…

</style>

</head>

Aplicación de CSS desde una hoja de estilos externa

Esta opción es la más recomendable y consiste en utilizar un archivo externo que sólo va a contener reglas de estilo con código CSS. Estos archivos tienen extensión “.css” y es lo que llamamos “hoja de estilos externa”.

Con este método, es posible dirigir los estilos CSS a varios documentos HTML al mismo tiempo. Para esto, debemos añadir la siguiente línea de código en el head del documento con la ruta a la hoja de estilo que se vaya a aplicar.

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

Dentro del archivo estilos.css las reglas de estilo se definen con una sintaxis idéntica a la que hemos visto hasta ahora. Un documento HTML puede utilizar cualquiera de las tres formas de aplicar las reglas de estilo CSS y puede estar vinculado con varias hojas de estilo externas. En caso de conflicto entre varias reglas de estilo, el navegador tomará como bueno el estilo más cercano al contenido del documento.

Comentarios dentro de las hojas de estilo CSS

Cuando trabajamos con hojas de estilo externas, podemos incluir comentarios que no se verán y que sirvan para aclarar o comentar cualquier circunstancia. Para abrir un comentario se utiliza /* y para cerrarlo */.

Hojas de estilo CSS de la W3C

Desde la w3c ponen a disposición una serie de hojas de estilo CSS que pueden usarse libremente. Solamente debemos añadir una línea en el “head” de la página indicando el link hacia la hoja de estilo:

Podemos sustituir la hoja Traditional y usar algunas de las otras que ponen a disposición: Midnight, Ultramarine, Chocolate, Oldstyle, Modernist, Steely o Swiss.

3. Los selectores CSS

Ya hemos visto que una regla de estilo CSS está formada por un selector y una serie de declaraciones (conjunto de propiedades y sus valores).

La declaración indica que formato hay que aplicar y el selector indica donde hay que aplicarlo. El elemento básico de una regla de estilo CSS es su selector. Existen diferentes tipos que iremos viendo a continuación.

3.1 Selectores de etiquetas

Un selector de etiqueta irá dirigido a todos los elementos cuya etiqueta HTML coincida con el valor del selector. Podemos definir selectores de etiqueta para cualquier elemento HTML que esté dentro del “body” de nuestra página HTML (p, h1, strong, label, body,…) y su aplicación será automática.

body {
font-family: Courier, Monospace;
color: red; }

También podemos crear un selector dirigido simultáneamente a más de una etiqueta, separando las diferentes etiquetas HTML con comas.

h1, h2, h3, h4, h5, h6 {
color: blue; }

Selectores de etiquetas descendientes

Si tenemos la necesidad de dirigir con mayor precisión una regla de estilo, tenemos la posibilidad de usar selectores descendientes para dirigir estilos CSS a elementos HTML que se encuentran dentro de otros elementos. Esta opción nos permite personalizar cualquier elemento que queramos dentro de nuestra página. Vamos a continuación un ejemplo.

Si necesitamos dirigir una regla de estilo para que sean de color rojo sólo los textos que vayan en negrita y que se encuentren dentro de un elemento de lista, usaríamos un selector descendiente. En este caso la regla de estilo sería la siguiente:

li strong {
color: red; }

El selector descendiente debe de estar formado por, al menos, dos selectores pero podría tener más si así lo precisamos. Veamos otro ejemplo.

Si queremos convertir en versalitas los textos en cursiva (em) que estén dentro de un elemento de lista (li) pero solo los que estén dentro de una tabla (table), la regla sería:

table li em {
font-variant: small-caps; }

3.2 Selectores de clase

Los selectores de clase se utilizan cuando necesitamos aplicar un estilo específico sobre elementos concretos del documento. Para aplicar una regla de clase, debemos asociar manualmente el elemento en cuestión con el estilo CSS.

El selector de una regla de “clase” será un nombre que decidamos precedido de un punto “.nombre” y las declaraciones se definirán exactamente igual que antes.

.destacado {
color: red;
font-weight: bold; }

Para aplicar un selector de clase sobre un elemento HTML debemos usar el atributo “class” dentro de la etiqueta correspondiente.

<h1 class=”destacado”>Este titular iría destacado</h1>

<h1>Este titular sería predeterminado</h1>

Si solamente queremos aplicar un estilo de “clase” a una o varias palabras que se encuentren dentro de un bloque, debemos colocar el atributo “class” dentro de la etiqueta <span> (veremos más adelante que se trata de una etiqueta “vacía”) que nos permite aplicar una clase dentro de un bloque sin que afecte al total del mismo.

<p>En este párrafo, sólo hay una
<span class=”destacado”> PARTE DESTACADA</span></p>

3.3 Selectores de ID

El selector de “id” es muy similar al selector de “clase” con la diferencia principal un selector de “id” solo debería usarse una vez en la página, mientras que los de “clase” se puede aplicar tantas veces como sea necesario.

Al igual que los selectores de “clase”, se utilizan cuando necesitamos aplicar un estilo específico sobre algún elemento concreto de la página.

El selector de una regla de estilo de “id” será el nombre que decidamos precedido del símbolo almohadilla “#”.

#principal {
font-size: 2em;
font-weight: bold;
background-color: yellow; }

Para aplicar un selector de “id” sobre un elemento HTML debemos usar el atributo “id” dentro de la etiqueta. Si queremos asociar la regla de estilo del ejemplo con un encabezado concreto, el código sería el siguiente:

<h1 id=”principal”>Este titular sería el principal</h1>

<h1>Este titular sería predeterminado</h1>

Restricciones de uso del selector id

La restricción del selector ID en un único elemento dentro de la página es algo que debemos cumplir, aun sabiendo que si lo usamos en más de un sitio, el navegador aplicará correctamente los estilos indicados en todas las ocurrencias del mismo. No obstante, no sería correcto y por tanto debemos evitarlo.

El atributo id identifica elementos en JavaScript para generar comportamientos u otras funciones dirigidas a dichos elementos. Este es el motivo por el que no deben estar repetidos en la página.

Selectores combinados

Tanto los selectores de “clase” como los de “id” pueden ser descendientes o combinados. Por ejemplo, si queremos dirigir un selector de “clase” para que sólo se aplique sobre una determinada etiqueta que ya está vinculada con ese selector (atributo class dentro de la etiqueta), podemos combinarlo con el selector de etiqueta. En este ejemplo que vemos a continuación, la regla se aplicaría solamente sobre los encabezados “h1” que tengan la clase “azul”.

h1.azul { color: blue;}

Debemos prestar atención a como se escriben los selectores combinados, ya que pequeñas modificaciones tendrán funcionamientos diferentes. No debemos confundir las tres diferentes formas de combinación de selectores que hemos visto hasta ahora.

h1, .azul {color: blue; } En este caso, la regla se aplicaría a todas las etiquetas h1 y además a cualquier etiqueta que tenga un atributo class=”azul”
h1 .azul {color: blue; } En este caso, la regla se aplicaría a cualquier etiqueta con un atributo class=”azul” que se encuentre dentro de un h1.
h1.azul {color: blue; } En este último caso, la regla sólo se aplicaría sobre las etiquetas h1 que tengan un atributo class=”azul”

3.4 Selector de hijos

Este selector se utiliza cuando queremos dirigir una regla de estilo a los elementos “hijos” de otro elemento, es decir, a los que cuelgan de dicho elemento.

La sintaxis es: elemento “padre” + signo “mayor que” (>) + elemento “hijo”.

.noticias > p { background: yellow; }

En este ejemplo, la regla se aplicará automáticamente a todos los párrafos que cuelguen directamente del elemento con clase “noticias”.

Selector universal

El asterisco * se utiliza como un selector universal cuando se quiere aplicar una regla que afecte a todos los elementos de la página. Es frecuente su utilización cuando se quieren resetear valores predeterminados y que deberán ser escritos para definirlos.

La sintaxis es la misma que se utiliza para cualquier regla de estilo. En el siguiente ejemplo, se aplicaría el color rojo a todos los elementos de la página.

* { color:red; }

4. Medidas y colores en CSS

Son muchas las propiedades CSS en las que sus valores se expresan en medidas. Estas unidades de medida, pueden ser absolutas o relativas.

Es preciso manejarlas correctamente para determinar el tamaño de tipografías y otros elementos tales como interlineado, márgenes, separaciones u otros. Vamos a ver las diferentes opciones.

LONGITUDES RELATIVAS

px	Píxeles (relativo al dispositivo)
em	Relativo al tamaño de la fuente del elemento (2em = 2 veces el tamaño de la fuente actual)
%	Porcentaje (relativo al elemento padre)
vh y vw	Medidas relativas de acuerdo al viewport 1vh = 1% de la altura del viewport - 100vh = altura del viewport

LONGITUDES ABSOLUTAS

in	Pulgadas (1 pulgada = 2.54 cm)
cm	Centímetros
mm	Milímetros
pt	Puntos (1 sspt = 1/72 pulgadas)
pc	Picas (1pica = 12 puntos)

Uso de medida recomendada

Es recomendable el uso de unidades de medida relativas, ya que mejora la accesibilidad de la página web y permite que los documentos se adapten fácilmente a cualquier medio.

El W3C, recomienda el uso de la unidad em para indicar el tamaño de los textos.

CONVERSIÓN ENTRE MEDIDAS

px	em	%
12	0,7500	75
14	0,8750	87,50
16	1,0000	100,00
18	1,1250	112,50
20	1,2500	125

Consideraciones en el uso de medida para textos

Además de las unidades de medida que acabamos de ver, existe la posibilidad de definir valor al tamaño de los textos mediante una palabra clave: Los valores permitidos serían xx-small, x-small, small, medium, large, x-large y xx-large para aplicar un valor fijo absoluto o larger y smaller para aplicar un valor relativo que elevará o reducirá la fuente sobre el tamaño que le correspondería.

.pie_pagina {font-size: x-small;}
h3 {font-size: large;}
p {font-size: smaller;}
p.grande {font-size: larger;}

Usando unidades absolutas podemos aplicar pulgadas (in), centímetros (cm), milímetros (mm), puntos (pt) o picas (pc). Para separar los decimales se usa el punto; Si la parte entera de un valor es “0”, éste se puede suprimir; Entre la magnitud y la unidad no debe haber espacios. Para web no es recomendable el uso de medidas absolutas.

h2 {font-size: 14.5pt;}
p.peq {font-size: .5em;}
td {width: 10pc; }

Ya hemos comentado que las unidades relativas son mucho más flexibles que las absolutas y es el método más recomendado para que nuestros diseños se adapten mejor a diferentes tipos y tamaños de dispositivos.

El píxel dependerá de las dimensiones y configuración de la pantalla y podrá tener diferente tamaño en distintas pantallas.
1 em es el equivalente el ancho de la letra “M” mayúscula que estamos usando como referencia. Podemos aproximar que 1em = 16px
1 ex equivale a la altura de una letra “x” minúscula. Se suele aproximar, que 1ex equivale a 0.5 em.
El porcentaje (%) es otra medida utilizada para expresar el tamaño de una fuente.

EL TAMAÑO DE LETRA DE REFERENCIA

La “referencia” sobre la que se calcula el tamaño relativo de un elemento cuando usamos medidas relativas es siempre el tamaño de letra de su elemento “padre”, es decir, del elemento en el que se encuentra.

Si el elemento no está dentro de ningún otro elemento, la referencia es el tamaño de letra del body. Si no se indica de forma explícita un tamaño para el texto dentro del body, la referencia es el tamaño de letra por defecto del navegador. Lo podemos ver con este ejemplo:

body { font-size: 10px; }

h1 { font-size: 2em; font-weight: normal;}

Al aplicar estas reglas CSS a nuestra web, definimos el tamaño de letra base en 10 píxeles y el tamaño de los titulares h1 en 2em, lo que equivaldría al doble del tamaño de base (2x10px).

4.2 Definición de colores en CSS

Podemos definir las propiedades de color de cualquier selector de CSS mediante las propiedades “color” y “background-color”.

La propiedad color, define el color del texto o del elemento. Si no se define color concreto se aplicará “black” como color por defecto.
La propiedad background-color, define el color de fondo del elemento. Si no se define color concreto, se aplicará “transparent” como valor por defecto.

El valor de estas propiedades CSS se puede definir mediante su nombre, en hexadecimal o mediante valores RGB (Red, Green, Blue), HSL (Hue, Saturation, Lightness), RGBA (Red, Green, Blue, Alpha) y HSLA (Hue, Saturation, Lightness, Alpha). También es posible definir junto con el color, el valor de opacidad.

En el siguiente enlace aparece un listado con los nombres de los colores que soportan los navegadores modernos y su valor en código hexadecimal y en RGB. Lista de colores.

h1 { color: darksalmon; }
h1 { color: #E9967A; }
h1 { color: rgb(233, 150, 122); }
h1 { color: rgb(91%, 58%, 48%); }
h1 { color: rgba(233, 150, 122,0.3); }
h1 { color: HLS(47, 68%, 36%); }

5. Propiedades CSS relacionadas con los textos

Son muchas las propiedades CSS que están relacionadas con los textos. Unas hacen referencia a la propia tipografía y están más asociadas a los caracteres, mientras que hay otras que hacen referencia al bloque o párrafo.

Vamos a ver a continuación algunas de las más utilizadas.

5.1 Propiedades CSS relacionadas con la tipografía

La propiedad font-family

Esta propiedad determina la tipografía que se va a aplicar sobre el selector. Si el nombre de la tipografía tiene más de una palabra es obligatorio ponerlo entre comillas.

En principio, la tipografía definida en la regla deberá estar instalada en el ordenador donde se vaya a visualizar la página ya que en caso contrario se sustituirá por la tipografía genérica del sistema, aunque veremos que existen alternativas para usar tipografías específicas que no necesariamente tengan que estar instaladas en el equipo.

Es recomendable utilizar una lista de tipografías acabando siempre en el tipo “genérico” según la familia. Las familias genéricas admitidas son serif, sans-serif, monoespace, cursive, o fantasy.

Veamos algunos ejemplos de esto:

h1 {font-family: Verdana, Arial, sans-serif; }

p {font-family: Georgia, "Times New Roman", serif; }

h4 {font-family: "Courier New", Courier, monospace; }

La propiedad font-size

Esta propiedad nos permite cambiar el tamaño de las fuentes. Puede definirse usando medidas absolutas y relativas, aunque para diseños de pantalla, se recuerda la idoneidad de usar medidas relativas.

h1 {font-size: 2em; }

p {font-size: 18px; }

h4 {font-size: 1,5ex; }

La propiedad font-weight

Esta propiedad modifica el grosor de la fuente y puede definirse mediante una palabra clave (lighter, normal, bold o bolder) o usar un valor numérico entre 100y 900 donde 400 se corresponde con normal y el 700 con bold. Sólo tenemos garantía de que funcionen “normal” y “bold” ya que el resto dependerá de la tipografía.

La propiedad font-style

Permite elegir entre normal, italic u oblique. El estilo italic debe existir dentro del diseño tipográfico de la fuente, mientras que la opción oblique se consigue forzando una inclinación de entre 8 y 12 grados la fuente regular. Siempre que sea posible, la opción italic ofrecerá mejor calidad.

La propiedad font-variant

Esta propiedad permite dos únicas opciones: normal o small-caps, lo que en español sed conoce como versalitas.

La propiedad text-transform

Permite definir textos en mayúsculas o minúsculas. Tiene cuatro valores posibles: none, capitalize (mayúscula la primera letra de cada palabra), uppercase (todo mayúscula) y lowercase (todo minúscula).

La propiedad text-decoration

Esta propiedad permite definir que un texto vaya subrayado (underline), suprarrayado (overline), tachado (line-through) o con parpadeo (blink).

5.2 Propiedades CSS relacionadas con el bloque

La propiedad text-align

Esta propiedad define la alineación horizontal del bloque de texto. Los posibles valores son left, right, center o justify. Esta propiedad no sólo alinea el texto, sino que hace lo mismo con las imágenes que estén contenidas dentro del bloque.

Las propiedades word-spacing y letter-spacing

Estas propiedades permiten modificar la separación entre palabras o entre letras respectivamente. A partir de un valor normal, es posible aplicar valores numéricos positivos o negativos para definir la separación.

La propiedad line-height

Esta propiedad define la altura de la línea de texto, lo que sería el equivalente al interlineado del bloque. Puede definirse con valores en “px”, “em” y “%”.

La propiedad text-indent

Esta propiedad determina la sangría de primera línea y puede indicarse con valores en “px”, “em” y “%” e incluso pueden definirse valores negativos.

La propiedad vertical-align

Esta propiedad ajustar la alineación vertical del texto dentro del bloque o línea donde se encuentre. Los posibles valores son top, middle y bottom.

La etiqueta SPAN

La etiqueta <span> es una etiqueta de línea y se usa para agrupar elementos a los que aplicar estilos diferenciados.

Imaginemos por ejemplo que queremos aplicar un estilo diferente a la primera letra del primer párrafo de un texto. Lo primero que deberíamos hacer es definir el estilo para esta situación:

.primeraletra {
font-family: Helvetica;
font-size: 500%;
font-weight: bolder;}

Y el código HTML quedaría de esta forma:

NOTA: Existe otra forma más adecuada de hacer esto mediante el uso de “pseudo-elementos”.

6. Uso de Google Fonts con CSS

Una alternativa al uso de tipografías instaladas en el ordenador es el uso de fuentes accesibles en Internet. Hay diferentes opciones gratuitas y de pago. Una opción muy extendida y popular es Google Fonts, un repositorio de fuentes online gratuito de Google: https://fonts.google.com/

Al acceder a la página, se muestra todo el catálogo tipográfico disponible, que se puede filtrar por “Categoría”, por “Idioma” u usando otros criterios o parámetros.

Al pinchar sobre una tipografía, se muestra diversa información, además de todos los estilos disponibles de la misma.

Una vez que se han elegido las tipografías que se van a utilizar, hay que seleccionar el estilo deseado y se irán añadiendo a una ventana “emergente”, desde la que se podrán ir añadiendo y eliminando fácilmente las tipografías y estilos seleccionados.

El proceso tiene dos partes.

En la primera parte hay que crear un enlace a las tipografías seleccionadas y colocarlo dentro del <head> de cada una de las páginas donde se vayan a utilizar las tipografías.
Para ello, en la pestaña “Embed” de la ventana emergente en la que estaban las tipografías seleccionadas, aparece la etiqueta <link> que es la que hay que copiar y pegar dentro del <head> de las páginas.
La segunda parte pasa por definir la regla de estilo con la propiedad font-family que se quiera aplicar. Esto aparece en la parte inferior de la pestaña “Embed” donde está la declaración font-family y su valor, que habrá que llevar a la regla de estilo en la que queramos incluir cada una de las tipografías que se hayan seleccionado.

Por ejemplo, para usar la fuente “Gochi Hand” debemos incluir la siguiente línea en el <head> de nuestro HTML y nuestra regla quedaría como sigue:

<head>
...

...
</head>

h1 {font-family: "Gochi Hand", cursive;}

7. Los estilos CSS en Dreamweaver

7.1 El panel de estilos CSS

Según la versión de Dreamweaver, los paneles y menús varían ligeramente, pero en todos los casos podremos crear reglas de estilo fácilmente y sin necesidad de escribir manualmente el código, aunque ya sabemos la importancia de conocer y comprender lo que estamos generando. En caso necesario, siempre podremos editar o introducir manualmente lo que necesitemos desde la vista de código.

Accedemos al panel relacionado con los estilos CSS desde el menú “Ventana”. Desde el panel de estilos CSS se podrán gestionar todas las reglas de estilo del documento que tengamos abierto en ese momento. En estas imágenes vemos el aspecto del panel de estilos CSS de Dreamweaver CS6 y de Dreamweaver CC.

7.2 Creación de reglas de estilo

Para crear una nueva regla de estilo en Dreamweaver, será distinto según la versión del programa que estemos utilizando. Antes de definir las declaraciones o propiedades de una regla de estilo debemos tener claro el tipo de selector que vamos a usar, es decir si la regla será para una etiqueta, si será para una clase, para un identificador único o para una combinación de algunos de estos.

Con algunas variaciones según la versión, al pulsar la opción para crear una nueva regla, debemos definir si la regla será de etiqueta, de clase, de identificador o compuesta.

En las versiones CC, no pasaremos por un menú intermedio. Directamente debemos escribir el nombre del selector para después empezar a definir las propiedades. Por defecto escribirá un nombre de selector según la posición en la que tengamos colocado el cursor.

En el momento de crear la regla debemos definir donde queremos ubicarla, ya sea en el <head> del propio documento o en una hoja de estilos externa. Según la versión del programa esto lo haremos de una y otra forma, pero en cualquier caso debemos tener claro que es lo que estamos haciendo.

Una vez hayamos definido donde se guardará la regla, el tipo de regla que vamos a crear y le demos nombre al selector, pasaremos a definir las propiedades de la regla.

A partir de las versiones de Adobe Dreamweaver CC hay algunos cambios en cuanto a la forma de definir estas propiedades, pero será cuestión de familiarizarse con los paneles y menús para controlar lo que estamos haciendo.

En versiones anteriores a Dreamweaver CC aparecerá un cuadro desde el que establecemos las propiedades del estilo y los valores para cada una de estas propiedades que deberemos ir definiendo.

Al “Aceptar”, podemos comprobar como en el panel “Estilos CSS” aparece la nueva regla creada y como se actualiza automáticamente el documento con la regla definida.

La gestión de los estilos CSS desde Dreamweaver es bastante fácil e intuitiva. Lo mejor será practicar un poco con todas las posibilidades: crear estilos nuevos, modificar estilos, borrarlos y todas las acciones que te permitan familiarizarte con ello.

7.3 Creación de hojas de estilo externas

Desde Dreamweaver podemos crear hojas de estilo desde “0” o partir de estilos que ya estén creados en el <head> de la página. El archivo externo tendrá la extensión “.css”.

Cuando creamos una nueva regla de estilo podemos establecer que se almacene directamente en una hoja externa, indicándolo en el panel de “Nueva regla CSS”. Como se va a crear un nuevo archivo “debemos indicar su ubicación y su nombre. Este panel es similar en las distintas versiones de DW hasta la versión CC, en la que debemos crear antes el documento “.css” donde queremos incluir la regla y también debemos indicar su localización.

Para mover estilos CSS del <head> de una página a una hoja externa hay que seleccionar los estilos que queremos mover y al pulsar sobre el botón derecho nos aparece un cuadro de diálogo en el que indicaremos “Mover reglas CSS...”

Aquí tendremos la opción de mover las reglas a una hoja de estilos que ya exista en el sitio o a una nueva. Si elegimos una hoja nueva, hay que determinar un nombre y una ubicación. En Dreamweaver CC basta con seleccionar las reglas de estilo que queramos mover y las arrastremos sobre la hoja de estilos que se muestra en el panel “Fuentes”.

7.4 Adjuntar una hoja de estilos a una página

También es posible adjuntar una hoja de estilos externa que ya está creada a una página HTML.

Desde el panel “Estilos CSS” hay que pulsar la opción “Adjuntar hoja de estilos…” y localizar el archivo, que debe estar en la carpeta raíz del sitio. Hay que verificar que está activada la opción Vincular o Vínculo, según la versión de Dreamweaver.