You are on page 1of 4

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL

AREA: Tecnología e Informática – Grado 11


TEMA: Diseño Web – Estilos CSS

Objetivo
 Conocer y comprender el funcionamiento y la importancia de los Estilos CSS en el diseño de páginas web.

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 mejorar el aspecto de 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:

<style type="text/css">
body { font-family: Verdana,Arial,sans-serif;
font-size: 15px;
color: #111111;
text-align: justify;
background-color: #063306;}
h1 { margin-left: 80px;
margin-top: 20px;
font-size: 180%;
color: #338433;}
h2, h3 { font-family: Georgia,Times,serif;
font-size: 150%;
color: #a52a2a;
margin-top: 0;
margin-left: 30px;}
h3 { color: #916908;}
p { margin: 35px;
line-height: 1.5em;
text-indent: 15px;}
img { border: 2px solid #005b00;
margin: 10px;
float: right;}
div.cuerpo { margin: 0 20px 20px;
background-color: #f3f3f3;}
.azul { font-weight: bold;
color: #3333ff;}
</style>

1. Estilos
La forma en que se ven todos los elementos de nuestra página web depende del estilo.
El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades pueden ser el color de la fuente, el
tamaño, la alineación, los márgenes, etc... Los valores dependen de cada propiedad, por ejemplo, a la propiedad color le
podemos asignar valores como red (rojo), blue (azul), ... y a la propiedad tamaño fuente le podemos asignar un valor en
porcentaje 100%, 120%, ... o en pixels 12px, 15px, ....
El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad: valor1 valor2 valor3; si puede
tener varios valores.
Por ejemplo, si queremos que el texto sea de color rojo y un tamaño de fuente de 120%, escribiríamos el siguiente estilo:
color:red; font-size:120%

y obtendríamos el siguiente resultado:


Texto rojo a 120%
¿Dónde escribimos el estilo? Lo más recomendable es agrupar todas las declaraciones de estilos en un solo lugar, definiendo un
bloque dentro de la etiqueta Head que contenga la definición de estilos. Para ello, tenemos que incluir en la etiqueta <style
type="text/css"> ... </style> y definir dentro los estilos correspondientes a cada elemento de nuestra página.
Si queremos que un estilo afecte a todos los elementos de la página, debemos definir un estilo para la etiqueta body. En esta
etiqueta se suele definir el color de fondo y los valores genéricos de color y tamaño del tipo de letra. En nuestro ejemplo hemos
definido el estilo del body así:
body { font-family: Verdana,Arial,sans-serif;
font-size: 15px;
color: #111111;
text-align: justify;
background-color: #063306;}

Que quiere decir que, el tipo de letra o fuente, será Verdana, (o Arial si no existe Verdana, o sans-serif si no existen las
anteriores); el tamaño será 15 pixeles, el color será el definido por el valor #111111, la alienación del texto será justificada y el
color de fondo de la página será el #063306.

A continuación vamos a definir el estilo de la etiqueta H1, de la siguiente forma:


h1 { margin-left: 80px;
margin-top: 20px;
font-size: 180%;
color: #338433;}

Que quiere decir que todas las cabeceras H1 tendrán un margen izquierdo de 80 pixeles (si no se pone la unidad, se toman
pixeles), un margen superior de 20 pixeles, un tamaño de letra de 180% y el color #338433, como puedes comprobar en la
imagen del principio de este punto, la cabecera "Bienvenido al ITSI" queda así:

Bienvenido al ITSI
Es decir, el color y tamaño de este estilo han prevalecido sobre los ya definidos en la etiqueta Body.
Siguiendo con nuestro ejemplo, a continuación definimos un mismo estilo para las cabeceras H2 y H3, pero como queremos que
la cabecera H3 tenga un color diferente, volvemos a definir otro estilo a continuación para H3 con el valor del color deseado. Es
decir, el valor válido es el último valor definido, por esto los estilos se llaman CSS (Cascade Style Sheet. Hojas de estilo en
cascada). A continuación definimos el estilo de los párrafos (etiqueta p) con un line-height (interlineado) de 1.5em (2 veces el
tamaño de la fuente actual), una tabulación de 15 pixeles y un margen de 35 pixeles.

Con lo definido hasta ahora el texto que escribamos en los párrafos tomará las propiedades definidas en los estilos de la etiqueta
Body y de la etiqueta p, pero ¿Cómo podemos cambiar el color de una palabra concreta dentro de un párrafo? Para hacer esto
tenemos que definir un nuevo tipo de estilo: las clases. Definir un estilo de clase es muy sencillo, basta escribir un punto y un
nombre elegido por nosotros, por ejemplo:
.azul {font-weight: bold;
color: #3333ff;}

Así hemos definido un estilo para la clase azul con tipo de fuente negrita (bold) y color #3333ff.

Una vez definida la clase, para aplicársela a una palabra basta utilizar la etiqueta span enmarcando la palabra. Por ejemplo, para
asignarle la clase azul a la palabra información (que esta dentro de un párrafo), escribiríamos:
<p> En esta web encontrarás <span class="azul">información </span>sobre nuestra
institución y una colección de fotografías de las instalaciones.</p>

Lo cual, haría que el párrafo se viese así:

En esta web encontrarás información sobre nuestra institución y una colección de fotografías de las
instalaciones
Puedes observar que la clase azul ha "añadido" las propiedades color azul y negrita a la palabra información, manteniendo las
otras propiedades que ya tenía por pertenecer a un párrafo. Es decir, los estilos van sumando propiedades sin eliminar las que ya
se tienen.

2. 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 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/.

Si todavía no lo has hecho, es conveniente que veas el tema básico sobre colores en el archivo colores en la web.pdf
suministrado por el profesor.

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;.

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 (pixeles), 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.

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 si).

Mayúsculas y minúsculas
Aunque escribamos el texto en mayúsculas o minúsculas, luego podemos cambiarlo a través del estilo. Por ejemplo utilizando
text-transform podemos transformar el texto de ejemplo "Es un texto de EJEMPLO" de las siguientes maneras:
 uppercase, para transformarlo todo a mayúsculas. "ES UN TEXTO DE EJEMPLO".
 lowercase, para transformarlo todo a minúsculas. "es un texto de ejemplo".
 capitalize, para poner la primera letra de cada palabra en mayúsculas. "Es Un Texto De EJEMPLO".
 none, para no realizar ninguna transformación.

Existe otra propiedad que juega con la mayúsculas, font-variant. Esta propiedad puede hacer que las minúsculas se muestren
como mayúsculas de menor tamaño. Vamos a utilizar "Este texto de Ejemplo".
 small-caps, realiza la conversión de las minúsculas. "ESTE TEXTO DE EJEMPLO".
 normal, no realiza la conversión.

A continuación, desarrolle en Bloc de Notas el siguiente ejercicio de lo visto hasta ahora:


<html>
<head>
<title>Estilo del Texto</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1 style="font-size:100%">&Eacute;ste es un h1 del mismo tama&ntilde;o que un p&aacute;rrafo
normal.</h1>
<p>&Eacute;ste es un p&aacute;rrafo normal.</p>
<p style="color:red">&Eacute;ste p&aacute;rrafo es de color rojo,
con algunas palabras en <span style="color:blue">azul</span>.</p>
<p>Podemos cambiar la fuente: <span style="font-family:serif;">y poner este texto en
serif</span>,
<span style="font-family:sans-serif;">esta parte en sans-serif</span>, <span style="font-
family:cursive;">
la familia de esta palabra es cursive</span>, <span style="font-
family:fantasy;">tambi&eacute;n tenemos fantasy</span>,
<span style="font-family:monospace;">y acabamos con monospace</span>. </p>
<p style="font-weight:bold; text-decoration:underline">Este p&aacute;rrafo
(<span style="font-weight: normal; text-decoration: none;">menos esta parte</span>)
est&aacute;
en negrita y subrayado. <span style="text-decoration:overline">Este fragmento, adem&aacute;s
sobrerrayado</span>.</p>
<p style="text-transform:lowercase;"><span style="font-size:85%;">&Eacute;STE,</span>
EST&Aacute;
<span style="font-size:110%;">ESCRITO TODO </span><span style="font-size:120%;">EN
MAY&Uacute;SCULAS</span>,
<span style="font-size:130%;">Y ADEM&Aacute;S VA</span><span style="font-size:140%;">
CRECIENDO.</span></p>
</body>
</html>

3. Dónde declarar un Estilo


En casos muy puntuales y concretos, declararemos el estilo incrustado al elemento o en línea, utilizando el atributo style. Por
ejemplo, en un determinado párrafo al que queremos aumentar un poco el margen porque queda mejor. Nos será más sencillo
recordar que el estilo está en el elemento, que crear una clase que no nos serviría de nada si borramos el elemento. De todas
formas, no aquí no declararemos todo el estilo, solo los atributos que sean distintos al resto de elementos del mismo tipo.

Si sólo tenemos una página, podemos definir los estilos dentro del <head>. Para ello, tenemos que incluir en la etiqueta <style
type="text/css"> ... </style>. En esta etiqueta, definiremos los estilos con el selector y su bloque de declaración.

Pero lo más habitual es tener varias páginas. En este caso resulta muy útil tener los estilos definidos en una hoja independiente,
una hoja de estilos. Una hoja de estilos no es más que un archivo de texto, pero con la extensión .css, donde aparecen definidos
los estilos que utilizarán las páginas. Para que funcione, debemos de enlazar con la hoja de estilo, para lo que utilizaremos la
siguiente etiqueta en el <head> de nuestras páginas:
<link href="hoja_de_estilo.css" rel="stylesheet" type="text/css" />

 href indica la ubicación de la hoja de estilo, tal como lo pondríamos en un enlace.

 rel se refiere a la relación del archivo con nuestra página. Al poner stylesheet le indicamos que se trata de una hoja
de estilo. Por ejemplo, podríamos poner alternate stylesheet lo que indicaría que se trata de una hoja de estilo
alternativa. Algunos navegadores como Firefox, nos permiten elegir entre la hoja normal o la alternativa a través del
menú Ver → Estilo de página.

Ejercicio:

Utilizando el bloc de notas, u otro programa similar,


modifica la página la página platosemana.html creada en
el ejercicio anterior, aplícale los estilos necesarios para
que se vea así: