La diferencia fundamental en la definición de un estilo por medio de id con respecto a las clases, es que sólo podremos aplicar dicho estilo a una solo elemento HTML dentro de la página, ya que todos los id que se definen en una página HTML deben tener nombres distintos.
La sintaxis para definir un estilo por medio de id es:
#cabecera {
font-family:Times New Roman;
font-size:30px;
text-align:center;
color:#0000ff;
background-color:#bbbbbb;
}
Es decir, utilizamos el carácter numeral (#) para indicar que se trata de un estilo de tipo id.
Luego, sólo un elemento HTML dentro de una página puede definir un estilo de este tipo:
<div id="cabecera">
Hay que subrayar que sólo un elemento HTML puede definir la propiedad id con el valor de cabecera.
Los dos archivos completos del ejemplo entonces quedan (pagina.html):
<!DOCTYPE html> <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> <h1>Título de la cabecera</h1> </div> </body> </html>
Y el archivo de estilos (estilos.css) es:
#cabecera {
font-family:Times New Roman;
font-size:30px;
text-align:center;
color:#0000ff;
background-color:#bbbbbb;
}