Tutorial rápido de CSS

Siguiendo con la temática del desarrollo web, esta vez os traigo un pequeño tutorial de CSS, en el que intentaré explicar las bases del lenguaje. Para seguir este tutorial necesitarás conocimientos básicos de HTML por lo que, si no lo has hecho ya, te recomiendo leer mi Tutorial de HTML / XHTML

CSS, de Cascading Style Sheets (hojas de estilo en cascada), es un lenguaje que se utiliza para definir el aspecto que tendrán los documentos HTML o XHTML en pantalla.

CSS 2.1 se encuentra actualmente en estado de Candidate Recommendation (candidato a recomendación), la segunda fase del proceso para convertirse en recomendación (que son, por orden, Working Draft, Candidate Recommendation, Proposed Recommendation y Recommendation). CSS 3 es todavía Working Draft, o borrador de trabajo. Algunas de las características de CSS 2.1 y muchas de CSS 3 no están soportadas aún por los navegadores.

Una hoja de estilo está compuesta por reglas que especifican el aspecto de los elementos del documento. Cada regla, a su vez, está compuesta por un selector, con el que seleccionar qué elemento se verá afectado por la regla, y un bloque de declaración, con una o más declaraciones que indican cómo se verá afectado, separadas por un punto y coma (;). Cada declaración, por último, se compone de una propiedad y un valor, separados por dos puntos (:).

Supongamos por ejemplo que queremos que el texto de nuestra página sea de color rojo. Podríamos usar la siguiente regla:

body {
  color:red;
}

body sería en este caso el selector. Es un selector muy simple, llamado de etiqueta, de elemento o de tipo, que selecciona las etiquetas con el nombre especificado. En este ejemplo sólo tendríamos una declaración, que pone la propiedad color (el color de la fuente) a red (rojo).

Vamos a probar nuestro pequeño ejemplo. Para ello necesitaremos un pequeño documento HTML de prueba:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
</head>

<body><p>Hola Mundo</p></body>
</html>

Y alguna forma de indicar la hoja de estilo que queremos aplicar. Tenemos 4 formas distintas de aplicar las reglas de una hoja de estilo a un documento HTML. Podemos:

  • Insertar las reglas de estilo en el propio documento, en una etiqueta style
  • Insertar las declaraciones en el propio documento, en el atributo style del elemento cuyo aspecto queramos modificar
  • Desde un archivo externo, usando la directiva @import de CSS dentro de la etiqueta style
  • Desde un archivo externo, usando la etiqueta link

Este sería el aspecto del documento de usar la etiqueta style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    body {
      color:red;
    }
  </style>
</head>

<body><p>Hola Mundo</p></body>
</html>

Si utilizáramos el atributo style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  </style>
</head>

<body style="color:red;"><p>Hola Mundo</p></body>
</html>

Si prefiriésemos utilizar la directiva @import dentro de la etiqueta style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    @import url('estilo.css') screen;
  </style>
</head>

<body><p>Hola Mundo</p></body>
</html>

Por último, para usar la etiqueta link, que es el método aconsejado a menos que existan otras consideraciones a tener en cuenta, como la necesidad de reducir el número de peticiones:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <link rel="stylesheet" media="screen" href="estilo.css">
</head>

<body><p>Hola Mundo</p></body>
</html>

Por supuesto, en este último caso, las reglas irían en un archivo estilo.css situado en la misma ruta que el documento HTML.

Utilicemos lo que utilicemos, el aspecto resultante sería el siguiente:

Selectores CSS

Ya vimos anteriormente los selectores de etiqueta, que permiten seleccionar todas las etiquetas de un cierto nombre en el documento HTML

p {
  color:red;
}

blockquote {
  color:blue;
}

También se puede hacer que unas ciertas reglas se apliquen para varios elementos distintos:

h1, h2, h3, h4, h5, h6 {
  color:red;
}

Pero, ¿qué ocurre si sólo quisiéramos aplicar el estilo una sola etiqueta p o una sola etiqueta h1, y no a todas? En ese caso podríamos utilizar el selector de id. Lo primero que tendríamos que hacer es añadir un atributo id (identificador) a la etiqueta cuyo aspecto queramos modificar, dándole un nombre significativo que más tarde utilizaremos en la hoja de estilo:

<p>Texto normal</p>
<p id="rojo">Texto en rojo</p>

El selector en este caso será el nombre del identificador, precedido por un signo de almohadilla (#)

#rojo {
  color:red;
}

También podemos especificar el tipo de etiqueta a la vez que su identificador:

p#rojo {
  color:red;
}

¿Y si quisieramos aplicar un estilo a varias etiquetas p, pero no todas? No sería correcto tener varios elementos distintos con el mismo identificador. En su lugar utilizamos el atributo class (clase)

<p class="rojo">Texto en rojo</p>
<p>Texto normal</p>
<p class="rojo">Otro en rojo</p>

El selector es el nombre de la clase, precedida por un punto (.)

.rojo {
  color:red;
}

También podemos especificar el tipo de etiqueta a la vez que su clase:

p.rojo {
  color:red;
}

Pero, ¿qué ocurre cuando queremos aplicar un cierto estilo a un conjunto de elementos que no están englobados dentro de alguna etiqueta? ¿dónde podríamos colocar el atributo id o el atributo class? En ese caso podemos utilizar la etiqueta div, un elemento de bloque que se utiliza para dividir (de ahí el nombre) la página en varias áreas. Para elementos inline podemos utilizar la etiqueta span. En el siguiente código, por ejemplo, indentamos la información del usuario (margin-left sirve para establecer el margen izquierdo), y mostramos su nombre en rojo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    .rojo {
      color:red;
    }
    
    .usuario {
      margin-left:20px;
    }
  </style>
</head>

<body>
<p>Información del usuario:</p>
<div class="usuario">
  <img src="avatar.jpg" alt="Avatar de zootropo">
  <p>
    <span class="rojo">zootropo</span><br>
    Registrado: 24 Enero 2.010<br>
    Mensajes: 127
  </p>
</div>
</body>
</html>

Si queremos seleccionar una serie de elementos que se encuentren dentro de otro elemento, en lugar de añadir una nueva clase a todos y cada uno de los elementos, podemos utilizar los selectores de descendientes. En el siguiente ejemplo seleccionamos todas las etiquetas p que se encuentren dentro de un elemento con clase «usuario»:

.usuario p {
  color:red;
}

En los selectores de descendientes podemos tener tantos selectores seguidos como queramos, aunque no es aconsejable que sean más de 2 o 3 por cuestiones de rendimiento.

html body .usuario p {
  color:red;
}

Para seleccionar sólo las etiquetas que sean descendientes directas (hijas) de otra etiqueta se utilizan los selectores de hijos. Basta añadir un símbolo mayor qué entre el elemento padre y el elemento hijo (CSS 2.1, no funciona en IE 6)

.usuario>p {
  color:red;
}

También podemos seleccionar el elemento adyacente a otro elemento con el selector de adyacente. En el siguiente ejemplo seleccionamos el primer párrafo después del título para indentarlo ligeramente (CSS 2.1, no funciona en IE 6)

h1+p {
  margin-left:10px;
}

Para seleccionar todos los hermanos, en lugar del adyacente directo, utilizamos el selector de adyacentes indirectos (CSS 3).

h1~p {
  margin-left:10px;
}

Podemos seleccionar elementos basándonos en atributos utilizando los selectores de atributos. Con este código seleccionaríamos todos los párrafos que sigan a imágenes con atributo alt (CSS 2.1, los selectores de atributos no funcionan en IE 6)

img[alt]+p {
  color:green;
}

Con este, todos los enlaces a http://mundogeek.net/

a[href="http://mundogeek.net/"] {
  color:red;
}

Todos los enlaces que comiencen con http://mundogeek.net/ (CSS 3)

a[href^="http://mundogeek.net/"] {
  color:green;
}

Todos los enlaces que terminen con .pdf (CSS 3)

a[href$=".pdf"] {
  color:red;
}

Enlaces que terminen con .pdf y tengan un atributo title

a[href$=".pdf"][title] {
  color:red;
}

Otra forma de seleccionar elementos del documento es a través de los pseudo elementos y las pseudo clases. Los primeros nos permiten seleccionar partes de elementos (son elementos «falsos»), mientras que los segundos permiten seleccionar entre varios elementos según ciertas condiciones (son clases «falsas»).

Para seleccionar la primera línea de un párrafo, por ejemplo, usaríamos el pseudo-elemento :first-line

p:first-line {
  color:red;
}

para seleccionar la primera letra, :first-letter

p:first-letter {
  color:red;
}

Los pseudo-elementos :before y :after nos permiten, ¡sorpresa!, añadir contenido antes o después de otro elemento utilizando la propiedad content (CSS 2.1, no funcionan en IE 6 e IE 7)

h1+p:before {
  content:"Inicio del primer párrafo";
}

h1+p:after {
  content:"Fin del primer párrafo";
}

Algunas pseudo-clases que suelen utilizarse habitualmente son :link (enlaces no visitados), :visited (enlaces visitados) y :hover (enlace señalado por el usuario)

a:visited {
  color:blue;
}

Propiedades CSS

Podemos cambiar la fuente con font-family. Se puede pasar una lista separada por comas para utilizar otra fuente de no encontrarse la primera, y así sucesivamente. Se suele terminar la lista con serif, sans-serif o monospace; de esta forma el navegador utilizará una fuente genérica con serifa, sin serifa o monoespacio como último recurso. Si el nombre de una fuente consta de más de una palabra, este deberá ir entrecomillado.

p {
  font-family:Helvetica, Arial, "Trebuchet MS", sans-serif;
}

Con font-size establecemos el tamaño del texto. Se puede dar el tamaño en píxels (10px), puntos (5pt), milímetros (12mm), según la altura de la letra x (1ex), según el tamaño de la letra M (0.9em), usando tantos por ciento (110%), con palabras clave como x-small, small, medium o large, …

h1 {
  font-size:2em;
}

Con font-style se puede seleccionar el estilo de la fuente, entre normal, italic (itálica, cursiva) u oblique (oblicua, una cursiva falsa resultante de inclinar los caracteres normales).

p.cursiva {
  font-style:italic;
}

La propiedad font-weight nos permite poner un texto en negrita (valor bold).

p.negrita {
  font-weight:bold;
}

p.normal {
  font-weight:normal;
}

La altura de la línea, y por tanto el interlineado, se controla con la propiedad line-height.

p {
  line-height:14px;
}

Estas 5 propiedades se pueden resumir en una sola, font

p {
  font:italic bold 2em 14px Helvetica, Arial, "Trebuchet MS", sans-serif;
}

Para seleccionar el color del texto se utiliza la propiedad color, que ya utilizamos anteriormente. El valor de este puede ser una palabra clave (red, blue, green, black, …), el valor RGB en hexadecimal (#cc281f), el valor RGB con porcentajes (rgb(75%,32%,47%)), el valor RGB con decimales de 0 a 255 (rgb(100,200,122)), …

p {
  color:#00cafe;
}

Para establecer la alineación del contenido dentro de un bloque (no sólo para el texto, pese a su nombre) se utiliza text-align. Se puede alinear a la izquierda (left), a la derecha (right), al centro (center) o justificado (justify)

body {
  text-align:left;
}

Una propiedad útil para los enlaces es text-decoration, que establece distintas decoraciones para el texto. Con el valor none, haríamos que los enlaces no tuvieran una línea de subrayado debajo (valor underline).

a {
  text-decoration:none;
}

Con margin-top, margin-bottom, margin-left y margin-right podemos establecer el margen superior, inferior, izquierdo y derecho de un elemento.

p {
  margin-top:10px;
  margin-bottom:10px;
  margin-left:0px;
  margin-right:0px;
}

También se pueden combinar en una sola propiedad margin. Si pasamos 4 valores a esta propiedad, el orden será margen superior, margen derecho, inferior e izquierdo (desde el superior, en el sentido de las agujas del reloj).

p {
  margin:10px 0 10px 0;
}

Con 3 valores el primero y último serán los valores para borde superior e inferior, y el segundo para borde derecho e izquierdo.

p {
  margin:10px 0 10px;
}

Con 2 valores el primero se referirá al borde superior e inferior, y el segundo al borde derecho e izquierdo.

p {
  margin:10px 0;
}

Con 1 solo valor, todos los márgenes tendrán el mismo valor:

p {
  margin:10px;
}

Además del margen también podemos establecer un margen interno (entre el contenido y el borde) con la propiedad padding, que funciona de manera similar a margin.

div {
  padding:10px;
}

div.usuario {
  padding-top:5px;
}

Para definir el estilo de los bordes de un elemento se utilizan las propiedades border-. En este caso se puede controlar el ancho:

div.usuario {
  border-width:1px;
  border-top-width:2px;
}

el color:

div.usuario {
  border-color:#cc00cc;
  border-left-color:red;
}

y el estilo, que puede ser solid (borde contínuo), dotted (formado con puntos), dashed (formado por guiones), …

div.usuario {
  border-style:dotted;
}

Todas estas propiedades se pueden combinar en una sola, border, o en una para cada borde:

div {
  border:1px dotted red;
  border-left:2px solid blue;
}

El fondo de los elementos se controla con las propiedades background-. Podemos establecer un color de fondo:

body {
  background-color:#ccc;
}

o una imagen de fondo:

body {
  background-image:url("imagenes/fondo.png");
}

Por defecto la imagen de fondo se repite horizontal y verticalmente. Podemos hacer que no se repita (no-repeat) o que se repita sólo horizontal (repeat-x) o verticalmente (repeat-y)

body {
  background-image:url("imagenes/fondo.png");
  background-repeat:no-repeat;
}

También podemos establecer la posición de la imagen, con background-position. Indicaremos la posición en el eje x (con porcentajes, medidas o las palabras clave left, center y right) y en el eje y (con porcentajes, medidas o las palabras clave top, center y bottom). La siguiente regla, por ejemplo, haría que la imagen se mostrara arriba en el centro.

body {
  background-image:url("imagenes/fondo.png");
  background-repeat:no-repeat;
  background-position:center top;
}

Todas estas propiedades se pueden resumir con la propiedad background.

body {
  background:#ccc url("imagenes/fondo.png") no-repeat center top;
}

La propiedad más importante para las listas es list-style-type, que permite modificar el caracter que se mostrará a la izquierda del item, y que por defecto es una viñeta en el caso de las listas no ordenadas, y un número en el caso de las listas ordenadas. Para listas ordenadas podemos utilizar disc (el valor por defecto), circle (un círculo vacío), square (un cuadrado) o none (ningún caracter)

ul li {
  list-style-type:square;
}

para listas ordenadas, decimal (un número), decimal-leading-zero (un número con uno o más ceros delante para que todos tengan el mismo número de dígitos), upper-alpha (una letra mayúscula), lower-alpha (letra minúscula), upper-roman (número romano en mayúscula), lower-roman (número romano en minúscula), none (ninguno)…

ol li {
  list-style-type:upper-roman;
}

Maquetado CSS con div

Como ya comentamos en el tutorial de HTML, actualmente los div son los elementos más importantes a la hora de maquetar una página web (anteriormente lo eran las tablas).

Tres son las propiedades básicas más utilizadas: width, para definir el ancho del elemento

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    div {
      border:1px solid black;
    }
    
    #cabecera, #pie {
      width:100%;
    }
    
    #menu {
      width:100px;
    }
  </style>
</head>

<body>
<div id="cabecera">Mi web de ejemplo</div>
<div id="contenido">Lorem ipsum</div>
<div id="menu">Inicio<br>Archivos<br>Contacto</div>
<div id="pie">Fin</div>
</body>
</html>

float, para hacer que flote a un lado u otro del elemento contenedor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    div {
      border:1px solid black;
    }
    
    #cabecera, #pie {
      width:100%;
    }
    
    #menu {
      width:100px;
      float:right;
    }
    
    #contenido {
      float:left;
    }
  </style>
</head>

<body>
<div id="cabecera">Mi web de ejemplo</div>
<div id="contenido">Lorem ipsum</div>
<div id="menu">Inicio<br>Archivos<br>Contacto</div>
<div id="pie">Fin</div>
</body>
</html>

y clear para que no se coloque ningún elemento a derecha o izquierda (valores left, right o both)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    div {
      border:1px solid black;
    }
    
    #cabecera, #pie {
      width:100%;
    }
    
    #pie {
      clear:both;
    }
    
    #menu {
      width:100px;
      float:right;
    }
    
    #contenido {
      float:left;
    }
  </style>
</head>

<body>
<div id="cabecera">Mi web de ejemplo</div>
<div id="contenido">Lorem ipsum</div>
<div id="menu">Inicio<br>Archivos<br>Contacto</div>
<div id="pie">Fin</div>
</body>
</html>

No hay que tener miedo a utilizar tantos divs como sea necesario, pero, ojo, es una mala práctica introducirlos cuando no es necesario. En los fragmentos anteriores, sin ir más lejos, también podríamos haber utilizado una lista para el menú lateral, por ejemplo, ya que al fin y al cabo nuestro pequeño menú no es más que una lista de enlaces.




39 comentarios en «Tutorial rápido de CSS»

    1. ¿Eh? No entiendo. Ya digo que tenerlo en un archivo a parte es lo adecuado.

      A menos que quieras disminuir el número de peticiones HTTP y te pongas a hacer cosas raras, como usar la etiqueta style, o sprites CSS para las imágenes.

  1. ¿de verdad esto «Mi web de ejemplo» o esto «InicioArchivosContacto» te parece correcto (y no me refiero a si sintácticamente es correcto)? En fin, para mi es una muestra de la calidad del artículo.

    1. No. No sé a qué te refieres. Creo que eso es una muestra de la calidad del comentario 😛

      Ahora en serio. ¿La queja es porque no utilizo una etiqueta h1 para el título o una lista para el menú en lugar de divs? Porque si es así, me parece igual de absurdo que quejarse de que en la explicación de los selectores por identificador no tenga más que
      <p>Texto normal</p>
      <p id="rojo">Texto en rojo</p>

      en lugar del doctype, la etiqueta html, la etiqueta head, la etiqueta title, posiblemente un meta para definir el juego de caracteres, y la etiqueta body.

      No son más que pequeños snippets de ejemplo, y esto no es un tutorial de HTML.

      1. Bueno, a mi me parece evidente que no es lo mismo obviar cierto código que no viene al caso para el ejemplo, pero que se da por hecho que ha de estar, que poner código que no es «correcto» y que(repito, desde mi punto de vista)puede llevar a confusión a la gente a la que va destinada esta entrada (que entiendo que es gente que no sabe nada no de CSS ni de HTML.
        Es decir, no todo son DIV, ni mucho menos y la explicación habría funcionado exactamente igual con código «más correcto».
        En cualquier caso, pretendo que esto sea una crítica constructiva y que así se entienda. Llevo tiempo leyendo el blog y lo seguiré haciendo (y quiero que cada vez sea mejor 😉 )

        1. Si es una crítica constructiva, se acepta y se agradece. Perdón por el tono de mi respuesta, pero lo había tomado por otra cosa.

          Añado una pequeña nota de aviso para dejar claro que no es algo que se deba hacer.

        2. Daniel no toques las narices xD! Este es un fantástico tutorial y el código está perfecto!

          El creador pone ese código igual que a ti o a cualquiera que vaya a aprender un nuevo lenguaje de programacion le enseñan el «Hola Mundo». Estarás de acuerdo conmigo en que ese programa no sirve para nada, pero sin embargo lo haces.

  2. Un magnifico tutorial para quienes recien empiezan con la Web
    bueno yo no sabia lo que agregar contenido con :after :before 😛

    gracias!!

  3. Pingback: links for 2010-03-03 | RGBitmap – Diseño, Desarrollo y Creatividad + TICs

  4. Genial tutorial pero sigo sin entender las ventajas e inconvenientes de usar @import o link.
    A ver si me lo aclaras.

    Gracias!

  5. Muy bueno, pero no entendi que es lo que se guardaria dentro del archivo estilo.css donde indicas que: «las reglas irían en un archivo estilo.css»
    Perdón pero es que empiezo a conocer esto…

    1. Facil. Lo que se guarda en estilo.css es el estilo de la pagina, es decir, el codigo css. Siguiendo el ejemplo, deberias tener un archivo estilo.css (o como quieras llamarlo) con el contenido:
      # div {
      # border:1px solid black;
      # }
      #
      # #cabecera, #pie {
      # width:100%;
      # }
      #
      # #pie {
      # clear:both;
      # }
      #
      # #menu {
      # width:100px;
      # float:right;
      # }
      #
      # #contenido {
      # float:left;
      # }

      y llamarlo desde una etiqueta link para que puedas usar esos estilos en tu pagina.

  6. Pingback: Iniciarse en CSS | UnUsuario

  7. Pingback: Tutorial rápido de jQuery

  8. Pingback: El diminuto y poderoso JQuery – ubiraci.me | BLOG |

  9. Pingback: >ARR # 3: Tutorial rápido de CSS (Vía Mundo Geek)

  10. Pingback: Tutorial rápido de jQuery | Recopilo jQuery

  11. Pingback: Humor con CSS

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.