Unidad 3

1. Aspecto de la página. Estilos básicos (I)
Hasta ahora hemos aprendido a utilizar los elementos básicos de HTML para escribir
texto, imágenes y enlaces, pero los resultados han sido muy pobres desde el punto de
vista estético. A continuación vamos a ver como poner "guapa" nuestra página
formateando el texto, con bordes, márgenes y fondos. Veremos un concepto muy
importante y potente: el estilo CSS. El aspecto de la página se controla con los estilos
CSS.
Por ejemplo, añadiendo estilos CSS a la página de nuestro ejemplo obtenemos este
resultado.
Los estilos que hemos añadidos son los que puedes ver en esta imagen y que vamos a
comentar a continuación:

2. Aspecto de la página. Estilos básicos (I)
Hasta ahora hemos aprendido a utilizar los elementos básicos de HTML para escribir
texto, imágenes y enlaces, pero los resultados han sido muy pobres desde el punto de
vista estético. A continuación vamos a ver como poner "guapa" nuestra página
formateando el texto, con bordes, márgenes y fondos. Veremos un concepto muy
importante y potente: el estilo CSS. El aspecto de la página se controla con los estilos
CSS.
Por ejemplo, añadiendo estilos CSS a la página de nuestro ejemplo obtenemos este
resultado.

3. Los estilos que hemos añadidos son los que puedes ver en esta imagen y que vamos a
comentar a continuación:
Formato del texto
Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en más detalle
viendo las posibilidades que ofrecen. Empezaremos con el formato del texto y las

4. propiedades que se le pueden aplicar: color, fuente, tamaño, inclinación, grosor,
decoración y mayúsculas/minúsculas.
Color
El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se
puede expresar de varias formas:
a. Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;.
b. Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);.
c. Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);.
d. Un nombre. Algunos colores se pueden expresar con su nombre en inglés. Por ejemplo
color: green; o color: DarkGreen;.
Como todo esto es un poco lioso, hay herramientas que facilitan el trabajo con los
colores, por ejemplo, ColorPic es un pequeño programa gratuito que puedes descargarte
en esta dirección: http://www.iconico.com/colorpic/. Los mejores editores gráficos
también incorporan herramientas en este sentido, más adelante veremos como trabajar
con colores con el editor Kompozer.
Puedes encontrar más información sobre los colores en el Curso de Illustrator.
En el tema 8 volveremos a hablar sobre colores, ampliando algunas cuestiones relativas
a la elección de los colores más apropiados.
Fuente
Podemos elegir la fuente (o tipo de letra) a través del atributo font-family. Podemos
indicar cualquier fuente que queramos, teniendo en cuenta que si incluye espacios, debe
de ir entre comillas dobles. Por ejemplo font-family: arial; o font-family:
"Times New Roman";.
Pero hemos de tener en cuenta que puede que quien vea la página no tenga instalada la
fuente que queramos. Para evitar esto, existen cinco fuentes genéricas que sí se
mostrarán en cualquier equipo: serif, sans-serif,cursive,fantasy, monospace. Esto no
quiere decir que sólo debamos de utilizar estas cinco. El valor de font-family pueden ser
varias fuentes, separadas por comas. El navegador elegirá, comenzando por la derecha,
la primera disponible, por lo que es conveniente terminar por una genérica.
Por ejemplo, font-family:Georgia, "Times New Roman", Times, serif;.
Igual que ocurría con el color, los editores gráficos ofrecen la posibilidad de elegir
diferentes fuentes y previsualizar su forma, más adelante veremos como hacerlo con
Kompozer.

5. Tamaño
El tamaño se regula a través de la propiedad font-size. Podemos utilizar cualquiera de
las unidades de tamaño, pero lo más frecuente es utilizar px (pixels), o porcentajes % o
em, estas dos últimas son tamaños relativos al tamaño de la fuente del elemento que está
por encima. 100% o 1em, sería el mismo tamaño, mientras que 200% o 2em sería el
doble y 50% o 0.5em sería la mitad.
Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamaño todo el
texto de la página de forma más coherente. Así los discapacitados visuales podrán
utilizar el comando para cambiar el tamaño de texto que tienen los navegadores.
http://usalo.es/152/botones-para-cambiar-el-tamano-de-letra/
Inclinación
Podemos poner una fuente en cursiva utilizando la propiedad font-style. Puede tomar
uno de los siguientes valores:
 normal. Coloca el estilo de forma normal, sin inclinación.
 oblique. Inclina el texto.
 italic. Además de inclinarlo, susituye la fuente por su versión en itálica si está
disponible. Aunque la mayoría de los navegadores no lo hacen.
Grosor
Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla en negrita,
utilizando font-weight. Puede tomar los siguientes valores:
 normal. El texto no se muestra en negrita.
 bold. El texto se muestra en negrita.
Nota. En teoría se pueden expresar distintas intensidades de negrita, pero los
navegadores no las muestran.
Decoración
Con la propiedad text-decoration podemos hacer que el texto muestre, por ejemplo,
los distintos tipos de subrayado, con los siguientes valores:
 none, el texto se muestra sin ningún tipo de decoración.
 underline, el texto aparece subrayado.
 overline, el texto aparece sobrerrayado.
 line-through, el texto aparece tachado.
 blink, el texto parpadea. (No funciona en Internet Explorer, en Firefox 3, si).
Bordes
Podemos agregar un borde alrededor de un elemento html, con la propiedad border.
Esta propiedad engloba las tres propiedades del borde.

6.  color, un color RGB. Se define con la propiedad border-color. Por ejemplo,
border-color: blue; o border-color: #F37760;.
 grosor, normalmente expresado en px. se define con la propiedad border-width.
Por ejemplo, border-width: 2px;.
 estilo, uno de los estilos o aspecto que puede tener el borde. Puede ser cualquiera de
los siguientes, que definimos con la propiedad border-style:
none dotted dashed solid double groove ridge inset
outset
Por lo tanto, podríamos definir el borde de un elemento de la siguiente manera:
<p style="border-color:#009933; border-width: 3px; border-style:
double;">bordes</p>
bordes
En este caso, podemos resumirlo con el atributo border, siguiendo el formato border:
color grosor estilo;, lo que quedaría border:#009933 3px double;.
Cada elemento tiene cuatro bordes, que podríamos definir de forma independiente,
como border-top, border-right, border-bottom y border-left. A su vez, para
cada uno de ellos podemos definir su color, grosor y estilo de forma independiente, por
ejemplo border-bottom-color o border-top-width.
3.4. Márgenes
Los elementos html tienen dos márgenes. El margen externo y el margin interno.
Ambos se refieren a la la distancia hacia uno u otro lado con respecto al borde del
elemento, a su límite, independientemente de que el borde sea visible o no.
El margen externo se regula con la propiedad margin. El margen exterior es la distancia
mínima que habrá entre el borde exterior del elemento y el elemento siguiente, por cada
uno de sus cuatros lados.
margin: 0
margin: 0
margin:5px
margin:5px 35px

7. margin:15px
margin: 0
margin-left:-20px
Los margenes no se suman, se solapan, prevaleciendo el mayor. Así, si un párrafo tiene
un margen inferior de 50px y el de abajo un margen superior de 30px, entre ellos
quedará un margen de 50px, por ser el mayor, pero no de 70px.
Otro valor que podemos dar al margen es auto. Este valor da a ambos márgenes el
mismo valor, y nos permite, por ejemplo, horizontalmente un elemento con una anchura
determinada.
El margen está fuera del elemento. Observa, por ejemplo que no mantiene el color de
fondo del elemento.
El margen interno se regula con la propiedad padding. Se refiere a la distancia que hay
ente el borde del elemento y su contenido, por ejemplo el texto.
padding: 0
padding: 0
padding:5px
padding:5px 35px
padding:15px
padding: 0
padding-bottom:20px
El padding si que forma parte del elemento, por eso muestra el mismo fondo.
Por defecto, la mayoría de elementos incluyen un margen exterior, y algunos un margen
interior, que debemos de tener en cuenta.
Veamos un ejemplo con lo que hemos visto. Ve cambiando los valores:
<html>
<head>
<title>Bordes y m&aacute;rgenes</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-
1" />
</head>
<body style="background-color:whitesmoke; font-family: sans-serif;">
<h1 style="font-size: 120%; background-color: #99CCFF; color:

8. #FFFFFF; border-color: #6666FF;
border-style: solid; border-width: 0 0 2px 5px; padding-left:
20px;">Bordes y m&aacute;rgenes</h1>
<p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es un
p&aacute;rrafo sin margen.</p>
<p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es otro
p&aacute;rrafo sin margen.</p>
<p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un
p&aacute;rrafo con margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un
p&aacute;rrafo con margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding:
10px">&Eacute;ste es un p&aacute;rrafo con
margin:20px y padding:10px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px;
border: cyan 4px inset">&Eacute;ste
es un p&aacute;rrafo con margin:20px, padding:10px y border: cyan
4px inset</p>
<p style="background-color:#99CCFF; margin-right:25%;">&Eacute;ste es
un p&aacute;rrafo con margin-right:25%.<br />
Cambia al cambiar la ventana.</p>
</body>
</html>