CSS

Corresponde a Cascading Style Sheetss (hoja de estilo en cascada) es un lenguaje que describe semánticamente la presentación de un lenguaje escrito en lenguaje de marcas (como por ejemplo el HTML) modificando su aspecto y formato.

Lo más normal es escribir el código en un documento diferente (generalmente con extensión .css) y vincularlo desde la cabecera del HTML (es decir dentro de la etiqueta <head>) de la siguiente forma y siguiendo la ruta relativa (también es válida la ruta absoluta) al fichero:

<link rel='stylesheet' href='mifichero.css' type='text/css' media='all' />

Se ha especificado el tipo de fichero (texto CSS) y con media se hace referencia a qué dispositivos afecta (en este caso a cualquier dispositivo).

Cuando se pone el código CSS dentro del código HTML (es decir, sin utilizar ficheros externos) se ha de añadir la etiqueta <style> en el <head> de la página web y dentro de la etiqueta <style> escribir el código de la misma forma que si se hiciese en el fichero externo.

Enlaces de interés

Ejemplo

Al siguiente trozo de HTML aplicaremos unos estilos concretos:

<div id="caja-unica"></div>
<div class="cajas"></div>
<div class="cajas otracosa"></div>

En este ejemplo se actuará sobre body (es decir, toda la página web a la vez) escogiendo un tipo de letra, un color de letra negro y un fondo blanco.

En el ID=»caja-unica» se aplicará un estilo mediante #caja-unica y en este ejemplo se ha puesto un borde de 1 píxel.

Y en cualquier elemento de clase «cajas» tendrá un fondo de color rojo.

Siendo los estilos:

body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #ffffff;
}
#caja-unica {
border: border: 1px solid rgb(202, 202, 202);
}
.cajas{
background-color: #ff0000;
}

Como se puede apreciar, cuando se pone el nombre de una etiqueta HTML (en el ejemplo body) se aplica ese estilo sobre TODOS los elementos de ese tipo.

Cuando se antepone una almohadilla (en el ejemplo #caja-unica) se actuará sobre el único elemento que tenga por ID ese valor (recuerda: no puede haber 2 ID iguales).

Y anteponiendo un punto al nombre de la clase se aplicará el estilo sobre todos los elementos que lleven class=»eseNombre» (en el ejemplo .cajas).