Hojas de estilo en cascada (CSS)

1. Introducción
 Historia

 El organismo W3C (World Wide Web Consortium), encargado de crear todos los
estándares relacionados con la web, propuso la creación de un lenguaje de hojas de
estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos
propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y
la SSP (Stream-based Style Sheet Proposal). La información de nuestros sitios WEB
tienen que estar almacenadas en páginas (X)HTML sin incluir ningún tipo de
información a cerca de su estilo.

 En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió

a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera
recomendación oficial, conocida como "CSS nivel 1".

 A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres
secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de
trabajo de CSS.
 Introducción

 El objetivo fundamental de las hojas de estilo CSS es separar el contenido

de la apariencia
 La información de nuestros sitios WEB tienen que estar almacenadas en páginas
(X)HTML sin incluir ningún tipo de información a cerca de su estilo.

 Las hojas de estilo en cascada es una forma de asociar información de

presentación a documentos HTML y XML.
 Permite definir estilos para la presentación de los distintos elementos de un
documento
 Los estilos normalmente se almacenan en una hoja de estilo (un fichero de texto
con la extensión .css)
 Permite administrar el estilo de sitios WEB que sean grandes y que requieran
ser sofisticados.
 Creando las hojas CSS una vez, podemos compartirlas entre varios
desarrolladores WEB.
 Si necesitamos realizar un cambio de estilo simplemente tenemos que hacerlo en
la hoja CSS pertinente.
 Unidades de medida
 Las hojas de estilo CSS permiten utilizar numerosas unidades de medida, bien en pulgadas
(inches), en centímetros, en milímetros, en puntos, en picas, en píxeles o en porcentaje.
 También se distingue entre valores relativos, que pueden variar según el ordenador
utilizado, y valores absolutos, que permanecen constantes sea cual sea el dispositivo o el
software utilizado.
Los valores absolutos son:
Unidad Nombre Descripción Valor Ejemplo
pt punto 72 pt = 1 inch entero 48pt
pc pica 1 pc = 12 pt real 4.5pc
mm milímetro 1 mm = .24 pc entero 60mm
cm centímetro 1 cm = 10 mm entero 6cm
in pulgada (inch) 1 in = 2.54 cm real 0.1in

Los valores relativos son: Unidad Descripción Valor Ejemplo

Unidad relativa que se basa
en el tamaño del tipo de
em real 1.8em
letra por defecto de la
página.

Unidad relativa a la altura de

ex la letra minúscula en el real 1.3ex
elemento seleccionado.

Un píxel es la parte más

pequeña de una imagen.
px entero 220px
Depende de la resolución de
pantalla.
% Porcentaje. entero 80%
 Unidades de medida
Absolutas:
 Una medida indicada mediante unidades absolutas está completamente definida,
ya que su valor no depende de otro valor de referencia. A continuación se muestra
la lista completa de unidades absolutas definidas por CSS y su significado:
• in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.
• cm, centímetros.
• mm, milímetros.
• pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.
• pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.
A continuación se muestran ejemplos de utilización de unidades absolutas:
 Unidades de medida
Absolutas:

 La principal ventaja de las unidades absolutas es que su valor es directamente el valor que
se debe utilizar, sin necesidad de realizar cálculos intermedios. Su principal desventaja es
que son muy poco flexibles y no se adaptan fácilmente a los diferentes medios.

 De todas las unidades absolutas, la única que suele utilizarse es el punto (pt). Se trata de la
unidad de medida preferida para establecer el tamaño del texto en los documentos que se
van a imprimir, es decir, para el medio print de CSS.
 Unidades de medida
Relativas:
 La unidades relativas, a diferencia de las absolutas, no están completamente definidas, ya
que su valor siempre está referenciado respecto a otro valor. A pesar de su aparente
dificultad, son las más utilizadas en el diseño web por la flexibilidad con la que se adaptan
a los diferentes medios.

 A continuación se muestran las tres unidades de medida relativas definidas por CSS y la
referencia que toma cada una para determinar su valor real:
• em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de
letra del elemento.
• ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño de
letra del elemento.
• px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se
visualiza la página HTML.

 Las unidades em y ex no han sido creadas por CSS, sino que llevan décadas utilizándose en
el campo de la tipografía. Aunque no es una definición exacta, la unidad 1em equivale a la
anchura de la letra M ("eme mayúscula") del tipo y tamaño de letra del elemento.

 La unidad em hace referencia al tamaño en puntos de la letra que se está utilizando. Si se

utiliza una tipografía de 12 puntos, 1em equivale a 12 puntos. El valor de 1ex se puede
aproximar por 0.5 em.
 Unidades de medida
Relativas:
Si se considera el siguiente ejemplo:

 La regla CSS anterior indica que los párrafos deben mostrar un margen de anchura igual a
1em. Como se trata de una unidad de medida relativa, es necesario realizar un cálculo
matemático para determinar la anchura real de ese margen.
 La unidad de medida em siempre hace referencia al tamaño de letra del elemento. Por otra
parte, todos los navegadores muestran por defecto el texto de los párrafos con un tamaño
de letra de 16 píxel. Por tanto, en este caso el margen de 1em equivale a un margen de
anchura 16px.
 A continuación se modifica el ejemplo anterior para cambiar el tamaño de letra de los
párrafos:

 El valor del margen sigue siendo el mismo en unidades relativas (1em) pero su valor real ha
variado porque el tamaño de letra de los párrafos ha variado. En este caso, el margen
tendrá una anchura de 32px, ya que 1em siempre equivale al tamaño de letra del
elemento.

 Si se quiere reducir la anchura del margen a 16px pero manteniendo el tamaño de letra de
los párrafos en 32px, se debe utilizar la siguiente regla CSS:
 Unidades de medida

 El valor 0.5em se interpreta como "la mitad del tamaño de letra del elemento", ya
que se debe multiplicar por 0.5 su tamaño de letra (32px x 0.5 = 16px). De la misma
forma, si se quiere mostrar un margen de 8px de anchura, se debería utilizar el valor
0.25em, ya que 32px x 0.25 = 8px.
 La gran ventaja de las unidades relativas es que siempre mantienen las proporciones
del diseño de la página. Establecer el margen de un elemento con el valor 1em
equivale a indicar que "el margen del elemento debe ser del mismo tamaño que su
letra y debe cambiar proporcionalmente".
 En efecto, si el tamaño de letra de un elemento aumenta hasta un valor enorme, su
margen de 1em también será enorme. Si su tamaño de letra se reduce hasta un valor
diminuto, el margen de 1em también será diminuto. El uso de unidades relativas
permite mantener las proporciones del diseño cuando se modifica el tamaño de letra
de la página.
 El funcionamiento de la unidad ex es idéntico a em, salvo que en este caso, la
referencia es la altura de la letra x minúscula, por lo que su valor es
aproximadamente la mitad que el de la unidad em.
 Por último, las medidas indicadas en píxel también se consideran relativas, ya que el
aspecto de los elementos dependerá de la resolución del dispositivo en el que se
visualiza la página HTML. Si un elemento tiene una anchura de 400px, ocupará la
mitad de una pantalla con una resolución de 800x600, pero ocupará menos de la
tercera parte en una pantalla con resolución de 1440x900.
 Unidades de medida
 Las unidades de medida se pueden mezclar en los diferentes elementos de una
misma página, como en el siguiente ejemplo:

 En primer lugar, se establece un tamaño de letra base de 10 píxel para toda la página.
A continuación, se asigna un tamaño de 2.5em al elemento <h1>, por lo que su
tamaño de letra real será de 2.5 x 10px = 25px.
 Como se vio en los capítulos anteriores, el valor de la mayoría de propiedades CSS se
hereda de padres a hijos. Así por ejemplo, si se establece el tamaño de letra al
elemento <body>, todos los elementos de la página tendrán el mismo tamaño de
letra, salvo que indiquen otro valor.
 Sin embargo, el valor de las medidas relativas no se hereda directamente, sino que se
hereda su valor real una vez calculado. El siguiente ejemplo muestra este
comportamiento: La propiedad text-indent, se utiliza para tabular la primera línea de un texto. El
elemento <body> define un valor para esta propiedad, pero el elemento <h1> no lo
hace, por lo que heredará el valor de su elemento padre. Sin embargo, el valor heredado
no es 3em, sino 36px.
Si se heredara el valor 3em, al multiplicarlo por el valor de font-size del elemento <h1>
(que vale 15px) el resultado sería 3em x 15px = 45px. No obstante, como se ha
comentado, los valores que se heredan no son los relativos, sino los valores ya
calculados.
Por lo tanto, en primer lugar se calcula el valor real de 3em para el elemento <body>:
3em x 12px = 36px. Una vez calculado el valor real, este es el valor que se hereda para el
resto de elementos.
 Unidades de medida
 Las unidades relativas expresan tamaños en función de otros.

unidad relativa a

‘em’ tamaño de letra del elemento

altura del carácter 'x' del tipo de letra del

‘ex’
elemento

anchura del carácter '0' del tipo de letra del

‘ch’
elemento

‘rem’ tamaño de letra del elemento raíz

‘vw’ 1% de la anchura del viewport

‘vh’ 1% de la altura del viewport

1% de la dimensión más pequeña del

‘vmin’
viewport

‘vmax’ 1% de la dimensión más alta del viewport

 La ventaja de utilizar estas unidades es que se adaptan muy bien a distintos tipos y
tamaños de pantalla.

 El valor de las medidas relativas no se hereda directamente, sino que se hereda su

valor real una vez calculado.
 Unidades de medida
A continuación estudiaremos las características de las unidades más utilizadas.

Unidad 'em'
 Esta unidad hace referencia al tamaño de letra calculado heredado por el elemento.
Por tanto, para calcular el valor real aplicado habrá que determinar los valores que se
van heredando de los elementos contenedores.

Unidad 'rem'
 Esta unidad tiene una referencia fija, que es el tamaño de letra definido en el
elemento raíz. Por tanto, para calcular el valor real aplicado simplemente hay que
mirar el elemento raíz.

Unidades 'vw', 'vh', 'vmin' y 'vmax'

 Estas unidades hacen referencia al tamaño del viewport. CSS define el viewport como
el tamaño del área que se utiliza para representar la página web. Coincide con el
<body> incluyendo los márgenes. Es importante indicar que en los navegadores
móviles el viewport tiene un tamaño superior al tamaño real de la pantalla: es por
ello que las páginas web se muestran completas como vistas desde un zoom de
alejamiento .
 Estas unidades tienen una referencia fija, que es el ancho ('vw'), alto ('vh'),
dimensión más pequeña ('vmin') o dimensión más grande ('vmax') del viewport. P1 or
tanto, para calcular el valor real aplicado simplemente hay que mirar el elemento
raíz.
 Unidades de medida
Comentarios:

 Las unidades de medida siempre se abrevian mediante dos caracteres.

 No puede dejarse un espacio entre el valor y la unidad. Si se deja algún espacio entre el
valor y la unidad, la hoja de estilo no se acepta y, por lo tanto, no se muestra.

 Ciertas propiedades aceptan valores negativos.

 Las unidades 'em'y 'ex'son relativas al tamaño de letra dentro del propio elemento,
excepto para la propiedad "font-size" para la que se toma el tamaño de letra del padre.

 Las unidades relativas se heredan como valores calculados

 Los porcentajes se heredan como valores calculados

 Por lo general, se recomienda utilizar la unidad em para describir el tamaño del tipo de
letra y así lograr una estabilidad mayor entre los distintos sistemas operativos y
navegadores.
 Unidades de medida
Los porcentajes:

 El porcentaje también es una unidad de medida relativa, aunque por su importancia

CSS la trata de forma separada a em, ex y px. Un porcentaje está formado por un
valor numérico seguido del símbolo % y siempre está referenciado a otra medida.
Cada una de las propiedades de CSS que permiten indicar como valor un porcentaje,
define el valor al que hace referencia ese porcentaje.
 Los porcentajes se pueden utilizar por ejemplo para establecer el valor del tamaño de
letra de los elementos:
Los tamaños establecidos para los elementos <h1>
y <h2> mediante las reglas anteriores, son
equivalentes a 2em y 1.5em respectivamente, por
lo que es más habitual definirlos mediante em.

La referencia del valor 80% es la

anchura de su elemento padre. Por
tanto, el elemento <div> cuyo
atributo class vale principal tiene
una anchura de 80% x 600px =
480px.
 Unidades de medida
Los porcentajes:

La utilización de porcentajes en la definición de anchuras y alturas tiene algunas

diferencias:
 La anchura de los elementos es independiente de su contenido: depende del ancho
del elemento contenedor o del ancho de la ventana del navegador en última
instancia.
 La altura de los elementos es dependiente de su contenido: si el contenido ocupa
más espacio, la altura será mayor; si ocupa menos, será menor.
 Debido a estas características, la utilización del porcentaje como unidad de medida
varía: mientras que puede utilizarse sin problemas en la anchura aunque no se
defina una anchura absoluta de base (ya que el 100% corresponde al ancho del
contenedor), para que pueda utilizarse en la altura deberá definirse una altura de
referencia en algún elemento contenedor para que pueda funcionar correctamente.
 Para solucionar este problema puede utilizarse la unidad vh en lugar del porcentaje.
Puedes encontrar la explicación en:
https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
 A continuación se muestra un ejemplo de cómo especificar altura de capas:
http://jsbin.com/hajuki/edit?html,css,output
 Estilo básico
 CSS define una serie de términos que permiten describir cada una de las partes que
componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo
CSS muy básico:
Los diferentes términos se definen a continuación:
 Regla: cada uno de los estilos que componen una hoja de
estilos CSS. Cada regla está compuesta de una parte de
"selectores", un símbolo de "llave de apertura" ({), otra
parte denominada "declaración" y por último, un símbolo
de "llave de cierre" (}).

 Selector: indica el elemento o elementos HTML a los que

se aplica la regla CSS.
Declaración: especifica los estilos que se aplican a los
elementos. Está compuesta por una o más propiedades CSS.

 Propiedad: característica que se modifica en el elemento

seleccionado, como por ejemplo su tamaño de letra, su
color de fondo, etc.

 Valor: establece el nuevo valor de la característica

modificada en el elemento.
Un archivo CSS puede contener un número ilimitado de
reglas CSS, cada regla se puede aplicar a varios selectores
diferentes y cada declaración puede incluir tantos pares
propiedad/valor como se desee.
 Reglas de CSS

 Sintaxis
 Un selector en CSS es la herramienta que nos sirve para seleccionar
uno o varios elementos de los que tenemos en nuestro HTML.
Cuando decimos seleccionar nos referimos a referenciar ese elemento
para aplicarle el estilo.
 selector {propiedad: valor}
 Normalmente el selector es el elemento al que se aplica el estilo.

selector declaración

h2 { color : purple; }

propiedad valor
 Propiedades

 Propiedades "resumidas"
Propiedades de texto

h1 {
font-weight:
bold; font-size:
12pt; line-
height: 14pt;
font-family:
Helvetica; font-
variant: normal; font-
style: normal;
}Propiedad resumido

h1 { font: bold 12pt/14pt Helvetica }

 A cada propiedad se le puede asignar un valor dentro de su conjunto de

valores válidos
 Identificadores específicos: blue, auto, Arial, center
 Números (enteros y reales): 10, 12.1
 URLs: url( http://www.bg.com/pin.gif)
 Cascada y Herencia
 Un documento (X)HTML tiene una estructura determinada que es equivalente a un árbol
genealógico cuando se hace referencia a la relación entre elementos:
 Se dice que un elemento es "hijo" de otro si está contenido directamente en él y este
último pasa a ser su "padre". Por ejemplo: el elemento p es hijo del elemento body y
elelemento body es padre del elemento p.

• Los elementos que tienen el mismo padre son "hermanos". Por ejemplo: un elemento
p puede ser hermano de otro elemento p si ambos son hijos directos del
elementobody.

 Controlar la relación padre-hijo es fundamental para el funcionamiento de CSS. Un hijo

puede "heredar" valores de propiedad de su padre. Con una buena planificación, la
herencia puede emplearse para hacer más eficiente la especificación de los estilos.

Este principio por el que algunas reglas se ignoran y otras se heredan nos introducen un
concepto muy importante: "la cascada".
 Cascada y Herencia

 A menos que haya una regla más específica, los elementos

comprendidos dentro de una etiqueta, heredan el estilo definido para
esta etiqueta
 Regla
 h1 { color: red; }

 Fragmento de documento
 <h1>un documento con titulo con palabra
<em>enfatizada</em><h1>

 La palabra enfatizada aparecerá enfatizada y en rojo

 Si existe una regla del tipo em { color: blue; } entonces se
mostrará en azul ya que es una regla más específica que prevalece
sobre la herencia
 Cascada y Herencia

 Algunas propiedades no son heredadas

 E.j propiedad background

 Valores de atributos porcentuales

 Para los valores de algunas propiedades se admite un valor en forma de
porcentaje.
p { font-size: 10pt }
/* ' line-height' Hace referencia a 'font-size', i.e. 12pt */
p { line-height: 120% }

 En estos casos se hereda el "valor efectivo" (el valor calculado) para dicha
propiedad.

 Cuando una hoja de estilo contiene varias reglas en conflicto de igual peso, sólo
se tendrá en cuenta la que está en último lugar. En el siguiente ejemplo, todas las
cabeceras de primer nivel del documento serían rojas porque se impone siempre
la última regla:

h1 {color: green;} h1 {color: blue;} h1 {color: red;}

 Cascada y Herencia

 Resolución de conflictos
 Si tenemos varias reglas que afectan a los mismos elementos, para resolver
los conflictos asignamos un peso a dichas reglas  gana la que tiene mayor
peso.

 Algoritmo de resolución del valor de una propiedad

 Buscar todos las reglas que apliquen sobre una etiqueta, casos:
 No existen reglas: Se usa el valor heredado y si no existe, se usa el valor
por defecto.
 Si existen reglas: Criterios de ordenación
 Se asigna un peso según donde provenga la regla  Prioridad:
navegador, usuario, autor (prioridad ascendente)
 Se asigna mayor peso a las reglas marcadas con !important
 Se asigna mayor peso a las reglas que tengan selectores sean más
específicos.
 Si dos reglas tienen el mismo peso, al última en definirse gana.
 Nos quedamos con la regla de mayor peso
 Cascada y Herencia

 Prioridad de selectores. Calcular:

 a = Número de atributos "id"
 b = Número de atributos "class"en el selector
 c = Número de etiquetas en el selector
 Concatenar estos 3 valores y ésta es la prioridad € "abc"
li {...} /* a=0 b=0 c=1 -> specificity = 1 */
ul li {...} /* a=0 b=0 c=2 -> specificity = 2 */
ul ol li {...} /* a=0 b=0 c=3 -> specificity = 3 */
li.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
ul ol li.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
 Las reglas definidas en atributo style tienen la misma prioridad que reglas que
usan selectores ID

 Declaraciones !important
 Como hemos visto, sirven para aumentar la prioridad de una regla sobre otra
para asignar el valor de un atributo particular.
 Sintaxis
selector { atributo:valor ! important ; atributo: valor ; }
 Cascada y Herencia

Ejemplo:

En el ejemplo, el párrafo tendrá color verde, ya que el valor de su peso "a" es 1. Como
el peso "a" es el más importante, es el que se impone a los demás.
 Tipos de etiquetas

 Los tipos son

 Bloque
 En línea
 Listas
 Cada etiqueta HTML pertenece a uno de estos tipos y cada tipo de
etiqueta se mostrará de una manera distinta
 Bloque: El contenido está separado del resto de elementos que lo rodean,
normalmente se deja un margen de espacio encima y debajo de la
etiqueta.
 En línea: Los elementos no son separados del resto de elementos que
lo rodean.
 Listas: Se comportan de manera similar al tipo bloque, pero además se
muestra una marca a su izquierda, para identificar cada elemento de la
lista
 El tipo al que asociamos la etiqueta se controla con el atributo display
 display : box € Convierte la caja en tipo bloque
 display: inline € Convierte la caja en tipo en línea
 display: list-item € Convierte la caja en tipo lista
 Las etiquetas <div> y <span>

 Son elementos genéricos que no tienen por sí mismos ningún

significado que afecte a la presentación.
 El navegador no presenta su contenido de ninguna manera especial.

 La etiqueta <div>sirve para organizar el contenido a nivel de bloque

 La etiqueta <span>sirve para organizar el contenido a nivel de línea
 Los elementos <div> y <span> se usan mucho para organizar la presentación
de los documentos HTML mediante el uso de selectores de clase.

Ejemplo de uso de <div> y <span>

div{ font-family: Comic Sans MS; font-size: 14 pt }

span.cursiva { font-style: oblique }

<div>Este es un elemento de <span class="cursiva">nivel de

bloque</span>.</div>
 Tipos de Selectores

 Una etiqueta
p {text-align: center; color: red}c

 Se pueden agrupar varias etiquetas a las que se les aplica el mismo estilo

h1, h2, h3, h4, h5, h6 { color: green }

 Clase
 ID
 Pseudo clase
 Pseudo elemento
 Contextual
 Tipos de dispositivo

 Nos sirven para especificar como presentar como se presentará un

documento en distintos tipos de dispositivo.
 Tipos de dispositivos
all Todos los dispositivos
braille Dispositivos braille táctiles
embossed Dispositivos braille impresión
handheld Dispositivos móviles
print Impresión
Projection Dispositivos de presentación
screen Dispositivos de pantalla
speech Sintetizadores de voz
tty Terminales, teletitipos
tv Televisiones (baja resolución)
 Como asociar una hoja de estilos a un fichero XHTML

 Dentro del propio elemento (no aconsejable)

<p style="color: green; margin-left: 20px">esto es un párrafo </p>

 Hoja de estilo interna

 Definición de los estilos dentro de la sección <head>del propio documento
marcado
<head>
<style
type="text/css"> hr
{color: blue};
p {margin-left: 20px}
body {background-image: url("fondo.jpg")}
</style>
</head>
 Hoja de estilo externa
 Fichero de texto (.css) con todas las definiciones de estilo
<head>
<link rel="stylesheet" type="text/css" href="miestilo.css" />
</head>
 Como asociar una hoja de estilos a un fichero XHTML

 Regla @import

 Permite importar una hoja .css dentro de otra hoja de estilos

 Syntaxis: @import url( http://host/path_to_css )

<style type="text/css">
@import url(http://style.com/basic); H1 {
color: blue }
...
</style>

 Las hojas de estilo importadas, también se ven afectadas por las reglas de
la cascada.
 Las reglas @import deben ir al comienzo de la hoja de estilo, antes de
definir ninguna regla con atributos
 Especificando tipos de medio en las CSS

 Dentro de una hoja CSS

@import url("estilosPantalla.css") screen;
@media print {
/* Hoja de estilo para impresión */
}

 Al referenciar una hoja de estilo externa

<link rel="stylesheet" type="text/css" media="print, handheld" href="estilos.css" />

 Podemos especificar varios tipos de medio en una regla @media

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
 Minimización de las hojas de estilo
 La minimización de código tiene como objetivo reducir el tamaño del archivo eliminando
caracteres innecesarios. Se utiliza en diseño web para reducir el tamaño de los archivos
CSS y JavaScript y así reducir el tiempo de carga del sitio web.

 El proceso de minimización es distinto del de compresión, ya que el archivo minimizado es

totalmente compatible con el original y no requiere de un proceso previo (descompresión)
para su correcta interpretación.

 El procedimiento consiste en eliminar espacios en blanco innecesarios, saltos de línea y

comentarios. En ocasiones también se renombran los nombres de variables (cambiándolas
por otros más cortos, como letras) y se optimiza el código eliminando las instrucciones
innecesarias o redundantes.

 Existen varias herramientas para minimizar código. En concreto, para CSS podemos utilizar
algunos de los siguientes servicios online:

http://cssminifier.com/
http://csscompressor.com/
http://gpbmike.github.io/refresh-sf/
1
 Recursos en la WEB sobre CSS

 http://www.w3schools.com/css
 http://www.devguru.com/Technologies/css/quickref/css_intro.html
 http://www.brainjar.com/css/positioning/default.asp
 http://www.htmlhelp.com/reference/css/
 http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtm
l/dhtml_node_entry.asp
 http://www.westciv.com/style_master/academy/browser_support/index.h
tml
 http://www.w3.org/TR/CSS1
 http://www.w3.org/TR/CSS21
 Bibliografía

• Resumen,CSS_FP. Federico Peinado www.federicopeinado.es

• https://librosweb.es/libro/css/
• http://interfacesweb.github.io/unidades/02-estilos/index.html
• https://openlibra.com/es/book/download/guia-completa-de-css3
• https://www.arkaitzgarro.com/css3/
• http://www.sitiolibre.com/daw.php
En el enlace siguiente puedes encontrar información actualizada sobre las
actividades del W3C WG.
www.w3.org/Style/CSS