> Manuales > Tutorial de CSS básico

Analizamos y explicamos las distintas formas de incluir estilos CSS en una página web, desde las declaraciones más específicas a las más generales. Te explicamos qué estilos tienen preferencia cuando incorporas CSS de todos estos modos.

CSS sirve para definir el aspecto de las páginas web, eso ya debe haber quedado claro. No obstante, hay diferentes niveles a los que podemos aplicar los estilos y es algo que vamos a describir ahora.

Usos de las CSS

Hemos denominado a este apartado los diferentes usos de las CSS y relata justamente eso, los distintos niveles a los que podemos usar las Hojas de Estilo, que van desde definir los estilos de manera específica, para un pequeño fragmento de una página, hasta los estilos para todo un sitio web completo. Todo esto pasando por diversos niveles intermedios que resultarán de mucha utilidad también en nuestro día a día como diseñadores.

Vamos por orden, describiendo los puntos desde el más específico al más general, de manera que que también iremos aumentando la dificultad e importancia de los distintos usos. Hemos partido este capítulo en dos partes por su extensión y por haber varias formas distintas de aplicar estilos, aquí veremos las más sencillas y en el capítulo siguiente otras más complicadas pero más potentes.

Nota: CSS tiene una sintaxis propia. En este artículo ofreceremos diversos códigos de CSS, aunque no hemos explicado la sintaxis todavía.

A través de los próximos ejemplos veremos una pequeña introducción a la manera de escribir código CSS, pero lo explicaremos con detalle más adelante cuando tratemos la sintaxis CSS.

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se puede utilizar el atributo style en la etiqueta sobre la que queremos aplicar estilos. Como valor de ese atributo indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color verde.

<p>
Esto es un párrafo en varias palabras <span style="color:green">en color verde</span>. resulta muy fácil.
</p>
Nota: La etiqueta <span> del HTML quizás no sea tan conocida como otras. Es una etiqueta que, por si sola, no tiene ninguna representación en la página. Es muy habitual usarla justamente para lo que hemos hecho en el anterior ejemplo, separar partes del contenido de texto de una etiqueta, para aplicarle estilos determinados a esa parte de dentro de la etiqueta.

Estilo definido para una etiqueta

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML.

Nota: Este uso de las CSS podríamos decir que es en realidad el mismo que el anterior. Solo que la etiqueta es de bloque y no una etiqueta inline (en línea) como <span>.
<p style="color:#990000">
Esto es un párrafo de color rojo.
</p> 
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Estilo definido en una parte de la página

Con la etiqueta <div> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.

Nota: Para ser rigurosos, este ejemplo sigue siendo el mismo que los dos anteriores, solo que en este caso aplicamos estilos en divisiones que conseguimos con la etiqueta <div>. El uso de esta etiqueta suele ser justamente ese: englobar partes de un documento HTML para que podamos aplicar estilos a todo el grupo de etiquetas, como el posicionamiento, color, borde, tamaño de letra...
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos 
</p> 
</div>

Hasta aquí hemos visto los usos de las CSS más específicos, que se consiguen usando el atributo style en la etiqueta. Realmente todos los usos anteriores eran el mismo, pero el enfoque era distinto ya que las etiquetas del HTML que hemos usado tienen distintos alcances. Sin embargo, hay otras formas más avanzadas de usar las CSS, que deberías tener en cuenta porque son todavía más versátiles y recomendadas.

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í "ensuciar" las etiquetas HTML colocando el atributo style.

Además, es común que los estilos declarados se quieran aplicar a distintas etiquetas dentro del mismo documento. Gracias a la aplicación de estilos para toda la página, podemos escribir los estilos una vez y usarlos para un número indefinido de etiquetas. Por ejemplo podremos definir el estilo a todos los párrafos una vez y que se aplique igualmente, sea cual sea el número de párrafos del documento. Por último, también tendremos la ventaja que, si más adelante deseamos cambiar los estilos de todas las etiquetas, lo haremos de una sola vez, ya que el estilo fue definido una única vez de manera global.

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 <style> y </style>, se coloca el nombre de la etiqueta (o selector) para la 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>
 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á

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

Caber destacar que muchos de los estilos aplicados a la etiqueta <body> son heredados por el resto de las etiquetas del documento, como el color del texto o su tamaño. Esto es así siempre y cuando no se vuelvan a definir esos estilos en las etiquetas hijas, 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.

Estilo definido para todo un sitio web

Una de las características más potentes del desarrollo con hojas de estilos es la posibilidad de definir los estilos de todo un sitio web en una única declaración.

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, reutilizando el código CSS de una manera mucho más potente.

Este es el modelo más ventajoso de aplicar estilos al documento HTML y por lo tanto el más recomendable. De hecho, cualquier otro modo de definir estilos no es considerado una buena práctica y lo tenemos que evitar siempre que se pueda.

Las ventajas de este modelo de definición de estilos son las siguientes:

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 siguientes:

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

<!DOCTYPE html>

<html>
<head>
 <link rel="STYLESHEET" 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>

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, en muchos casos, 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.

La propagación o herencia de estilos desde padres a hijos no ocurre siempre. Depende del estilo en particular. Por ejemplo, el color del texto sí que se propaga, pero no ocurre con el borde del elemento. Es decir, si tenemos un borde definido en el BODY no provocaría que todos los párrafos que hay dentro del documento tengan también un borde.

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:

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.

Nota: Para aprender de una manera visual y práctica los diferentes usos de las CSS recomendamos ver la primera parte del videotutorial sobre las CSS.

En el siguiente artículo veremos otra manera de incluir estilos en un documento externo, que no habíamos mencionado todavía porque su uso es un poco menos habitual. Más adelante empezaremos a detallar la sintaxis de las CSS.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual