Definición de los estilos
Hasta el momento siempre que hemos definido los estilos estos han ido asociado a una etiqueta HTML.
El problema es que una misma etiqueta tendra que presentar el mismo aspecto en toda la página y esto evidentemente no nos interesa. Hemos visto que utilizando las reglas que determinan la cascada se puede evitar en parte este problema , pero mediante el uso de clases y de la definición de estilos con ID lo solucionaremos completamente.
A traves de ellos asociaremos a un identificador un estilo de manera que luego podamos utilizar este identificador con la etiqueta HTML que nos interese.
Mediante clases
Definiendo los estilos mediante la utilización de clases creamos un estilo, un formato que en principio no esta asociado a ninguna etiqueta HTML y que nosotros podemos asociar con la que queramos a traves del atributo CLASS.
Para definir una clase que identifica un estilo se hace como hasta ahora, lo que cambiamos el nombre de la etiqueta por el nombre de la clase.
.NombreClase {color: blue}
que luego asociaremos a la etiqueta HTML con el atributo CLASS.
<p class="NombreClase">Este parrafo ira en azul.</p>
<h2 class="NombreClase">Y este tambien</p>
pudiendo ser las etiquetas diferentes.
Conviene tener bien clara la utilización de las clases ya que posiblemente sea la forma más habitual de definir los estilos dada la libertad de acción que nos permiten al no obligarnos a presentar una misma etiqueta con el mismo aspecto en toda la página.
Mediante ID
Los ID funcionan de forma similiar a las clases pero están limitados a su utilización con un sólo elemento.
Los ID se definen utilizando el signo "#" seguido por el mombre del identificador y luego las propiedades del estilo.
#NombreID {color: blue}
que luego asociamos a la etiqueta HTML mediante el atributo ID.
<p id="NombreID">Este parrafo ira en azul</p>
Lo importante de definir estilos utilizando ID es que de esa manera identificamos de forma univoca un elemento de la página HTML.
Diferencias entre clases e ID
La principal diferencia entre utilizar un identificador o una clase para definir un estilo es que mediante un ID estamos identificando algún elemento de la página de forma univoca y por tanto sólo lo podemos utilizarlo con ese elemento. Esto se suele hacer porque luego posiblemente querremos realizar alguna acción sobre ese elemento.
Mientras que con una clase estamos definiendo un estilo genérico que luego podremos utilizar sobre cualquier elemento del HTML.
Tutoriales
