Apuntes de Informática

A todos quienes desarrollamos sistemas Web nos gusta que las páginas de los mismos
luzcan uniformes, elegantes y atractivas. Si bien HTML proporciona algunas facilidades a
tal fin, la potencia necesaria se encuentra en los estilos CSS1.

Tres modos de uso

Los estilos CSS se pueden usar de tres modos diferentes:

1) En línea: el estilo CSS se inserta directamente en la marca HTML que se quiere

modificar. Es simple y directo, pero tiene el inconveniente que sólo afecta a la
marca intervenida.

2) Hoja interna: el estilo CSS se define en una hoja dentro de la página HTML. Todas
las marcas de la página son afectadas por los estilos definidos. Tiene la ventaja que
no hay que definir los estilos marca a marca, pero su alcance se limita a la página
dentro de la cual la hoja está definida.

3) Hoja externa: la hoja de estilos se define en un archivo independiente, de extensión

css, y se importa a las páginas que la van a usar. Es el ideal para definir estilos
generales para un sistema Web.

Prioridad

Cada modo de uso tiene prioridad sobre el otro: el modo en línea prevalece sobre la
hoja interna, y ésta prevalece sobre la hoja externa.

En línea

Hoja Interna

Hoja Externa

Un ejemplo puede ayudarnos a entender los tres modos y como cada uno prevalece
sobre el otro.

1
CSS es la sigla de Cascading Style Sheets, en español Hojas de Estilo en Cascada

Profesor Carlos Cuesta Anton – profecuesta@gmail.com Página 1

Apuntes de Informática

En una hoja externa, botones.css, definimos que los botones son azules2:

button {
background-color: blue;
}

En nuestra página Web importamos esta definición y creamos tres botones:

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

<button>Botón 1</button><br/>
<button>Botón 2</button><br/>
<button>Botón 3</button>

Como esperábamos los tres botones son azules:

En la misma página Web agregamos una hoja de estilo interna definiendo que los
botones son verdes, sin quitar la importación de la hoja de estilo externa:

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

<style type="text/css">
button {
background-color: green;
}
</style>

<button>Botón 1</button><br/>
<button>Botón 2</button><br/>
<button>Botón 3</button>

Veremos que los botones son verdes porque la definición de la hoja interna prevalece
sobre la de la hoja externa.

2
Los colores se definen en RGB mediante códigos hexadecimales, lo que genera más de 16 millones de
colores diferentes. Unos pocos de esos colores tienen definidos sus nombres en inglés. Para simplificar el
apunte se usan precisamente esos colores

Profesor Carlos Cuesta Anton – profecuesta@gmail.com Página 2

Apuntes de Informática

Finalmente agregaremos un estilo en línea al segundo botón para que sea rojo.

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

<style type="text/css">
button {
background-color: green;
}
</style>

<button>Botón 1</button><br/>
<button style=”background:color:red;”>Botón 2</button><br/>
<button>Botón 3</button>

Y el segundo botón es rojo ya que la definición en línea prevalece sobre las otras dos:

JavaScript

Los estilos CSS de cualquier objeto HTML pueden ser modificados desde JavaScript.
Veámoslo mediante un ejemplo. Creamos una página Web con un botón alto y rojo:

<button style="height:100px; background-color:red;">Botón</button>

Agregamos código JavaScript para cambiar el alto del botón3 a 50 pixeles:

<button style="height:100px; background-color:red;">Botón</button>

<script type="text/javascript">
botones = document.getElementsByTagName("button");
boton = botones[0];
boton.style.height="50px";
</script>

Y el botón queda efectivamente reducido en su altura.

3
Este apunte supone cierto dominio de JavaScript

Profesor Carlos Cuesta Anton – profecuesta@gmail.com Página 3

Apuntes de Informática

En vez de recorrer el arreglo de botones reescribimos poniéndole un nombre al botón y

simplificando el código JavaScript:

<button style="height:100px; background-color:red;" name=”boton”>

Botón
</button>

<script type="text/javascript">
boton.style.height="50px";
</script>

Entonces la sintaxis básica para modificar algún estilo de un objeto es:

Objeto.style.estilo = valor;

Modificamos el color a verde:

<button style="height:100px; background-color:red;" name=”boton”>

Botón
</button>

<script type="text/javascript">
boton.style.height="50px";
boton.style.backgroundColor=”green”;
</script>

En este ejemplo podemos notar que el estilo se escribe diferente4 en JavaScript:

CSS JavaScript
background-color backgroundColor

Por lo tanto conviene siempre consultar una referencia5 para estar seguros de cómo se
escribe el atributo en cuestión en JavaScript:

Los valores de los estilos son siempre texto. En algunos casos es posible asignar
valores numéricos, aprovechando el casting automático que JavaScript realiza para
cambiar ese valor a texto. Por ejemplo:

boton.style.height = 50;

JavaScript convierte el valor numérico 50 a su equivalente en texto “50”. En cualquier

caso es mejor no confiarse en que tan bien JavaScript hará esas conversiones.

4
CSS no es sensible a mayúsculas y minúsculas, mientras que JavaScript sí
5
Se recomienda la referencia oficial de la W3C en su sitio de la W3Schools

Profesor Carlos Cuesta Anton – profecuesta@gmail.com Página 4

Apuntes de Informática

Si queremos reducir el tamaño del botón a un tercio del tamaño actual:

boton.style.height = parseInt(boton.style.height)/3;

Esto no siempre va a resultar bien debido a que CSS acepta varias unidades de
medida, lo que se verá a continuación.

Unidades de Medida

CSS admite varias6 unidades de medida. Las más usadas son:

 px: pixel, la que se asume si no se especifica ninguna unidad

 in: pulgadas
 cm: centímetros
 %: porcentaje

Por ejemplo:

<button style=”height:100%”>Botón</button>

Se trata de un botón que usa el 100% del alto del elemento que lo contiene, en este
ejemplo la ventana del explorador:

El botón se redimensiona junto con la ventana, por lo que la medida % es apropiada

para conservar las proporciones independiente de cual sea el tamaño de la ventana
donde se muestre.

6
A saber em, ex, px, in, cm, mm, pt y pc

Profesor Carlos Cuesta Anton – profecuesta@gmail.com Página 5

Apuntes de Informática

El cuidado que hay que tener es en JavaScript, ya que al asignarse valores numéricos
se asume son px:

boton.style.height = 100;

En este ejemplo la medida asumida son 100px, no 100%.

Si el botón tiene un alto definido de 100%, entonces la siguiente asignación:

boton.style.height = parseInt(boton.style.height)/2;

No reduce a la mitad, 50%, su alto, sino a 50px. Esto debido a que parseInt ignora el
% y convierte sólo el número, vale decir 100.

Hojas de Estilo Externas e Internas

Las hojas de estilo externas e internas tienen el mismo formato. Primero el nombre de
la marca HTML, y luego entre llaves los atributos CSS y sus valores. Por ejemplo:

button {
background-color: blue;
height: 40px;
}
select {
background-color: green;
height: 50px;
}

En este ejemplo definimos la hoja con estilos para los botones y los selectores7.

Si la hoja es externa entonces va tal cual en un archivo de extensión css:

7
Nótese que el estilo para la altura no tuvo efectos sobre el selector. Algunos estilos CSS no tienen efecto
sobre ciertos elementos de HTML

Profesor Carlos Cuesta Anton – profecuesta@gmail.com Página 6

Apuntes de Informática

Si es interna va dentro del archivo HTML entre marcas style:

La hoja de estilo externa debe ser importada mediante la marca link8:

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

Estilos con Nombre

Al definir estilos se hace referencia a la marca HTML a la cual esos estilos se aplican.
Por ejemplo, si los estilos se aplican a la marca button:

button {
background-color: blue;
height: 40px;
}

Todas las marcas button tendrán el color y altura definidos. Si se precisa que algunos
botones tengan un color y otros botones uno diferente, entonces se pueden crear estilos
con nombre:

button.azul {
background-color: blue;
height: 40px;
}
button.rojo {
background-color: red;
height: 40px;
}

8
El atributo rel permite establecer estilos alternativos. No se explica aquí por ser este un apunte
introductorio

Profesor Carlos Cuesta Anton – profecuesta@gmail.com Página 7

Apuntes de Informática

Ahora tenemos dos estilos con nombre para botones. La forma de aplicar estos estilos
con nombre es mediante el atributo class:

<button>Botón 1</button><br/><br/>
<button class="azul">Botón 2</button><br/><br/>
<button class="rojo">Botón 3</button>

El primer botón es estándar porque no se definió un estilo sin nombre

para la marca button. Si así se hubiese hecho entonces el estilo sin
nombre se aplica a todas las marcas correspondientes que no especifiquen
el atributo class.

Conclusión

CSS es la paleta de pintor para decorar nuestras páginas Web, así que ya no tenemos
excusas para no sacar ese Picasso que llevamos dentro y hacer de HTML una obra de
arte. Para una referencia completa de todos los estilos CSS se recomienda consultar la
página Web de la W3C: http://www.w3schools.com/

Profesor Carlos Cuesta Anton – profecuesta@gmail.com Página 8