Hola Under_ground:
Trataré de ser concreto, pero completo.
Elementos:
Es cualquier "objeto" al que puedas hacer referencia en un lenguaje de marcación, como por ejemplo, la etiqueta <strong> o <img> o cualquier otra.
Estos elementos pueden ser
etiquetas,
clases o identificadores (
ID).
Selectores:
Lo que va antes de los {} se llama
selector, y sirve, como su nombre lo indica, para "seleccionar" un
elemento en un lenguaje de marcación (como el HTML, el XML o el XHTML que está a medio camino entre los dos).
Tipos de selector: Etiquetas:
Cualquier etiqueta de un lenguaje de mercación. En el caso de (X)HTML, algunas muy comunes son: <body>, <div>, <h1>, <p>, etc.
Si haces una regla como:
h1 { color:red;} p { width: 300px; }
le estás diciendo a todos los elementos marcados como <h1> que sean de color rojo, y a todos los párrafos que tengan una anchura máxima de 300 píxeles.
Clases:
A veces no quieres que un estilo
afecte a todos los elementos con el mismo marcador, es decir, no quieres que todos los párrafos sean de 300px de ancho, sino sólo aquellos a los que quieras aplicarles dicho estilo, aquí es cuando se usan las clases.
Si tienes un estilo como:
.miAnchura { width:300px; }
Y luego tienes un HTML como este:
<p>Párrafo normal</p> <p class="miAnchura">Párrafo de 300px de ancho</p>
sólo aquél que tiene el atributo
class="miAnchura" (nótese que en el HTML
NO lleva el punto) se verá afectado.
Esta clase se la puedes asignar a "casi" cualquier etiqueta (el
casi es motivo de otro tema que no entra a juego por ahora).
Las clases las puedes usar las veces que quieras en un archivo. Es decir, pueden haber por ejemplo tres etiquetas <p> una <img> y un <h2> con la misma clase.
ID:
El HTML admite un atributo llamado ID que permite asignarle
un nombre único a cada elemento.
Su sintaxis en HTML es así:
<h1 id="principal">El encabezado principal</h1>
La condición es que
NO debes repetir ese ID en el mismo archivo. Es decir, que mientras las clases las puedes reciclar, los ID sólo se usan una vez por página.
En CSS, si queremos que el elemento llamado "principal" sea azul, escribimos una regla así:
#principal { color:navy;} En resumen: .nombre --> para clases (atributo class en la etiqueta). Se puede repetir.
#nombre --> para id (atributo id en la etiqueta). Debe ser único.
nombre --> para etiquetas. Afecta a todos los elementos marcados con dicha etiqueta.
Lo interesante está cuando las empiezas a combinar, pero eso ya es otro tema.
Googlea sobre tutoriales de XHTML.
Espero haber sido de ayuda. Saludos.