Un selector ID y uno Class se diferencian, además de la forma en que se prensentan en el código CSS, por la influencia e importancia que los mismos tienen dentro de una página HTML.

Sí, con cualquiera de ambos se puede hacer casí lo mismo, pero un elemento DIV acompañado de un selector ID es mucho más poderoso y potente que un elemento SPAN o P con un selector Class. Observa el código HTML siguiente:

Y ahora el código CSS para los selectores ID y Class utilizados:

He resaltado en negritas las declaraciones que se presentan tanto en el selector ID (top) como en el selector Class (comentario). ¡Exacto! El texto Enviado por: Eva Green aparecerá tal cual se indica en el selector ID. Es decir, aparecerá con un tamaño de 13 pixeles, normal y con arial como fuente, además de aparecer en un color gris que tiende al color negro.

Ah, pero además de estar despegado 15 pixeles del margen izquierdo, presentará márgenes a su alrededor de 4 pixeles y tendrá un ancho de 160 pixeles. Cualquier texto que sobrepase los 160 piexeles aparecerá en el renglón siguiente.

¡Pruébalo! Cambia el nombre Eva Green por uno mucho más largo, algo como Dulce María Margarita del Socorro de los Remedios (no sé si exista tal nombre).

Los selectores ID siempre están precedidos por el signo de número (#) y, como ya se ha comentado anteriormente, se pueden utilizar sólo una vez dentro de la página. Es decir, son únicos, ningún otro elemento HTML de la página debe contener el mismo ID o pones como loco al navegador (mentira, a lo más, te tirará de a loco y no aplicará ningún estilo al elemento en cuestión).

Puesto que a través de este tutorial te estoy transmitiendo parte de mi conocimiento (ya te cobraré algún día, ¡ja!), utilizaremos los selectores ID en forma exclusiva para estructurar la página, con lo cual en nuestro archivo CSS colocaremos un código similar al siguiente:

Y, por ende, el código HTML de nuestra página presentará algo como lo siguiente:

Tranquilo, tranquilo... los ejemplos enfocados a que practiques y aprendas se encuentran en el Capítulo 3.

Y puesto que considero que no existe nada más que agregar al respecto, pasemos a conocer cómo se realiza la implementación de imágenes en CSS.