Usos de las CSS y II

  • Por
Te describimos los usos más avanzados de las hojas de estilo en cascada. Para poder utilizarlas de la manera más potente.

Estilo definido para toda una página

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez.

Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera más avanzada. Pero no te preocupes puesto que con los ejemplos irás aprendiendo su uso y más tarde comentaremos la sintaxis en profundidad.

En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la página para definir los distintos estilos del documento.

A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de estilos.

<html>
<head>
 <title>Ejemplo de estilos para toda una p&aacute;gina</title>
 <STYLE type="text/css">
 <!-- 
 H1 {text-decoration: underline; text-align:center}
 P {font-Family:arial,verdana; color: white; background-color: black}
 BODY {color:black;background-color: #cccccc; text-indent:1cm}
 // -->
 </STYLE>
</head>

<body>
<h1>P&aacute;gina con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s importancia</p>
</body>
</html>

Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará

  • Subrayado
  • Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <BODY>) se le apliquen los estilos siguientes:

  • Color del texto negro
  • Color del fondo grisaceo
  • Margen lateral de 1 centímetro

Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos serán heredados por el resto de las etiquetas del documento. Esto es así siempre y cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta más concreta será el que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, que es más concreta.

Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos: <!--Declaración de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la página. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribirían ese "feo código" en la página.

Pulsa para ver el ejemplo anterior.

Hemos preparado la misma página, pero con declaraciones de estilos distintas, para que comprobéis las diferencias en la forma del documento con sólo unos cambios en sus estilos. Puedes verla pinchando aquí.

Estilo definido para todo un sitio web

Una de las características más potentes de la programación con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas. Con las ventajas añadidas de que se ahorra en líneas de código HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se comentó anteriormente.

Veamos ahora cómo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos

Es un fichero de texto normal, que puede tener cualquer extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erroneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.

P  {
 font-size : 12pt;
 font-family : arial,helvetica;
 font-weight : normal;
}

H1  {
 font-size : 36pt;
 font-family : verdana,arial;
 text-decoration : underline;
 text-align : center;
 background-color : Teal;
}

TD  {
 font-size : 10pt;
 font-family : verdana,arial;
 text-align : center;
 background-color : 666666;
}

BODY  {
 background-color : #006600;
 font-family : arial;
 color : White;
}

2- Enlazamos la página web con la hoja de estilos

Para ello, vamos a colocar la etiqueta <LINK> con los atributos

  • rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
  • type="text/css" porque ela archivo es de texto, en sintaxis CSS
  • href="estilos.css" indica el nombre del fichero fuente de los estilos

Veamos una página web entera que enlaza con la declaración de estilos anterior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <link rel="STYLESHEET" type="text/css" href="estilos.css">
 <title>P&aacute;gina que lee estilos</title>
</head>

<body>
<h1>P&aacute;gina que lee estilos</h1>
Esta p&aacute;gina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy f&aacute;cil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
    <td>Esto est&aacute; dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
    <td>La segunda fila del TD</td>
</tr>
</table>

</body>
</html>

El resultado conseguido se puede ver aquí

Reglas de importancia en los estilos

Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si tenemos declarado en el <BODY> unos estilos, por lo general, estas declaraciones también afectatarán a etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.

En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página. Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se pueden realizar de múltiples modos y con varias etiquetas, también entre estos modos hay una jerarquía de importancia para resolver conflictos entre varias declaracionesde estilos distintas para una misma porción de página. Se puede ver a continuación esta jerarquía, primero ponemos las formas de declaración más generales, y por tanto menos respetadas en caso de conflicto:

  • Declaración de estilos con fichero externo. (Para todo un sitio web)
  • Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la página)
  • Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)
  • Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>)

Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un repaso con la lista anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus páginas y aumentar la productividad de tu trabajo. Pero estate atento a los siguientes capítulos donde aprenderás las lecciones que te faltan para dominar bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que mejorarán tus páginas.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

David

20/7/2004
A ver, veo por todas partes la declaracion "background-color:xxxx", pero la cuestion es, ¿como puedo hacer para que una hoja de estilos coja una imagen como fondo de pagina en vez de un color?, supongo que es algo bastante simple pero no se como hacerlo y no lo poneis en ninguno de vuestros ejemplos.

Borja

27/1/2005
Es la respuesta para la pregunta de David:

No es que mis conocimientos sobre css sean muy notables, pero llevo un par de dias mirando guias sobre css.

Y para poner imágenes de fondo hay que poner:
background-image:url('ruta de imagen')

para la etiqueta body

zerjy

08/2/2007
Donde pones la estructura del fichero "estilos.css"
en el TD se te ha olvidado poner en background-color
la # antes del color, quedaria:

TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : #666666;
}

Excelente trabajo, saludos

Jorge

17/1/2009
Muy bueno y bien explicado

german_gomez-478968

06/6/2009
css
emesa por aca

angel

11/6/2009
bien
Estoy aprendiendo a usar estilo y me parece que es muy clara tu explicación .
muchas gracias

earboledac

21/7/2009
Muy Util
Hola...

Muchas Gracias, soy nuevo en esto y con tu explicacion tan clara fue muy facil hacer un archivo de css para un sitio web de prueba.

Excelente.

Fiorela

26/8/2009
Gracias
Gracias por la ayuda, pero tambien quisiera saber como se coloca una imagen, dentro de la pagina, y con una posicion determinada. Gracias

Rommy

30/9/2009
Excelente
Muchas gracias!!

Muy bien explicado todo esto de los estilos CSS. He entendido su funcionamiento básico

stargate

30/3/2010
sencillo, pero muy practico
Es un excelente tutorial, sencillo y practico, para empezar el diseño de paginas con CSS

Seifus

12/8/2010
Estupendo
Muy claro y preciso, gracias por compartir el conocimiento y seguid así.

Empanada

22/8/2010
Que es TD?
a ver no se si me cegue o ke? pero no vi la explicacion de lo k era TD y por k salio de pronto de la nada???? gracias!!!

midesweb

23/8/2010
Selector TD
Hola,

Las etiquetas TD se utilizan en HTML para generar celdas de tablas. TD en CSS es un selector de elementos de la página, a los que luego podemos aplicar estilos con CSS. por ejemplo:

td{
font-size: 150%;
color: red;
}

Esto hace que todos los TD de la página (osea, celdas de una tabla) tengan una fuente mayor que el resto de elementos de la página, un 150% mayor. Además, estamos definiendo que las celdas tengan el color de texto en rojo.

Hay muchos selectores de etiquetas que se pueden usar en CSS, al menos tantos como etiquetas HTML. por ejemplo, con este código podríamos definir estilos para los párrafos.

P{
color: #ff00ff;
}

Los selectores CSS están explicados en el manual de CSS de desarrolloweb.com.

manzurmetal

16/10/2010
Genial
de lujo me fué de gran ayuda para empezar a adentrarme a las CSS, gracias.

chalo

19/10/2010
se pueden insertar clases en un doc css a manera de plantilla?
Q tal! quiero saber si se pueden declarar clases en un doc y despues mediante el enlace (ejemplo)<link rel="STYLESHEET" type="text/css" href="estilos.html"> acceder a ella...

eugenio

01/12/2010
Me voy a volver loco, ¿que he hecho mal?
Tras leerme los manuales (estupendos, muchas gracias) he hecho un blog de varias webs con un archivo .css común.
Es una cosa muy sencillita que no debería dar problemas, pero en el Chrome se ve fenomenal y en el IExplorer o el Firefox se ven como texto plano.
Lo he revisado mil veces, de arriba a abajo, pero no se que debo corregir.
Mil gracias por la ayuda. Saludos.

Es aquí: http://www.telefonica.net/web2/beta/soto/entrega1.htm y el fichero CSS es soto.css

Daniel

11/12/2010
gracias
Super! =D no sabia que usar las css's era tan sencillo

Pathros

03/11/2011
Exceltente trabajo!!
Muy bueno de verdad, fácil de entender aun para los que recién comenzamos con esto.

Ayer descargue el archivo y encontré un pequeño error en la palabra Text-Align está escrito como Text-Aling sin embargo aquí no encuentro el mismo error quizás ya están al tanto y seguramente pronto será corregido... uff es que no veas mi ingles es tan malo que pase un rato comiéndome la cabeza para centrar el texto jeje y como estoy usando NotePad++ para practicar pues no me reconocía la palabra fue por eso que me di cuenta

Mil felicitaciones más por este excelente sitio del que he aprendido mucho y sin duda seguiré aprendiendo mucho más.

¡Saludos!

metalgod

27/3/2013
Chrome
pongo dentro de una carpeta el archivo html y el .css cuando abro la pagina con google chrome no se visualiza con los estilos, en cambio al visualizarla en internet explorer, se vizualiza correctamente, a que podra deberse? muy bueno los manuales, me han servido de mucho, recien estoy aprendiendo, quiero hacer mis propias paginas web

tibicenasdesign

22/11/2013
¿ o @import ? Cual es mejor
Me sigue quedando una duda básica

¿ Entonces es mejor usar Link o import para referenciar el css al html ?

Mario Olivera

25/3/2015
Mario Olivera
Muy Bueno, bien explicado! Saludos! Mario Olivera