Los selectores ID trabajan en forma similar a las clases con un par de excepciones. En primer lugar, en la definición de un selector ID, el elemento del nombre va seguido por un símbolo numeral (#) y un identificador (que se corresponde con el valor del atributo "id" del elemento al que pretende afectar).
p#help {
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
*#hframe {
border-style: solid;
border-color: blue;
border-width: 2px;
}
#hcolor {
background-color: #9EC7EB;
color: white;
}
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
*#hframe {
border-style: solid;
border-color: blue;
border-width: 2px;
}
#hcolor {
background-color: #9EC7EB;
color: white;
}
Excepto por el símbolo "#" y el nombre (que debe ser un identificador), este método funciona igual que las clases.
Usando el atributo "id"
La aplicación de propiedades CSS a elementos HTML mediante los selectores ID se da a través de los atributos "id" de los elementos. Como ya debes saber, el atributo "id" está diseñado para actuar como un identificador para elemento (por lo que debe ser único en el documento). Esto claramente significa, que las propiedades definidas a través de este método sólo podrán aplicarse a un único elemento por documento.
En este caso podríamos decir que las propiedades se refieren a un elemento específico, caso contrario al de las clases que son diseñadas para que los elementos se refieran a ellas. En el siguiente ejemplo, un párrafo tiene un valor en su atributo "id" que coincide con una de las fediniciones previas.
<p id="hframe">Párrafo</p>
