Los elementos «class» e «Id» sirven para identificar y agrupar etiquetas, aunque el principalmente lo usamos para agrupar elementos que deban tener un mismo estilo.
¿Porque agrupar i/o identificar etiquetas?
Identificar etiquetas permite tener una mayor claridad y una mejor organización en el código, para ello usaremos un «ID», este solo debe usarse para identificar elementos unicos en un pagina.
Agrupar etiquetas te ahorra mucho trabajo ademas de dejar un codigo mucho mas limpio, esto lo haremos con el «class».
Crear y hacer referencia a una «class» o «ID»
Cuando sea una «class», nos referiremos con ella mediante un » . » (punto) y su nombre:
HTML:
<elemento class=»importante»> </elemento>
CSS:
.importante{
color: red; (Modifica el color)
}
Cuando sea un «ID», nos referiremos con ella mediante un » # » (punto) y su nombre:
HTML:
<elemento id=»
CSS:
#TituloImportante{
color: red; (Modifica el color)
}
Identificar un elemento
Para identificar elementos usamos las Id, estas son un elemento unico, eso quiere decir que en una misma pagina solo puede haber un elemento identificado por cada «ID» sin embargo esta id puedes usarla en diferentes paginas que requieran de este elemento. Para ello se suele usar un fichero CSS el cual guarda todos los estilos de las «etiquetas», «clases» e «id» del sitio web, en vez de escribirlos en el header de cada una de las paginas (esto ya lo veremos con profundidad en el tutorial de CSS).
Agrupar elementos de una misma pagina
Para ello usamos una «class»
Ejemplo sin agrupar:
<html>
<head>
</head>
<body><div class=»d1″ >
<p>Cantaba una <b style=»color: red;»>cabra</b>,</p>
<p>vestida de gala</p>
<p> sobre una manzana.</p>
<p style=»color: red;»>¡Miau!</p>
<p> Maullaba una <i style=»color: red;»>mula</i>,</p>
<p> mientras pintaba el cielo</p>
<p> sobre una grúa.</p></div>
</body>
</html>
Ejemplo agrupando:
<html>
<head>
<style>
.importante{
color: red;
}
</style>
</head>
<body><div class=»d1″ >
<p>Cantaba una <b class=»importante»>cabra</b>,<
/p>
<p>vestida de gala</p>
<p> sobre una manzana.</p>
<p class=»importante»>¡Miau!</p>
<p> Maullaba una <i class=»importante»>mula</i>,</p>
<p> mientras pintaba el cielo</p>
<p> sobre una grúa.</p></div>
</body>
</html>
Si probais los dos codigos vereis exactamente el mismo resultado sin embargo si teneis que modificar el codigo y añadir nuevas propiedades a estos 3 elementos, en el primer ejemplo debereis modificar el CSS de todos aquellos elementos uno a uno y en cambio el segundo ejemplo solo deberemos modificar el CSS una sola vez ya que se le aplicara el formato a todos aquellos agrupados en una misma clase. En definitiva y como he dicho previamente agrupar hace que generemos menos código basura lo cual aporta una mayor claridad y mas eficiencia a la hora de modificar el codigo fuente.
Ahora que ya teneis una base de como, crear una pagina HTML usando las etiquetas del anterior tutorial y agruparlas e identificarlas, toca aprender como darles forma y color, para ello tenemos que aprender un poco de CSS (pulsa aquí para aprender) y practicar.
Espero que os haya servido