CSS: diferencias entre atributos class e id

CSS - atributos class e idCasi todo el que ha desarrollado un proyecto web (grande o pequeño) conoce ya la exsitencia de los atributos “class” e “id”, pero a menudo nos encontramos con que se usan indiscriminadamente una class o un id para dar formato a las disitntas partes del documento.

Vamos a aclarar algunos puntos al respecto para intentar generar un código css lógico, limpio y más efectivo.

Es obvio que ambos sirven para dar formato a elementos de la página. Ambos utlizan atributos similares y casi la misma sintáxis.

Los atributos id se declaran con el símbolo # delante del identificador, mientras que las classes se declaran anteponiendo el punto . a el identificador de la clase.

Ahora bien, la diferencia real no es la sintaxis sino el ‘cúando’ y ‘donde’ se deben utilizar cada una.

El atributo id está pensado para ser único en la página. Esto es, que solo podrá aparecer una vez en la página. Mientras que las class, más flexibles, están pensadas para dar estilo a distintas partes del mismo documento que comparten diseño.

Veámoslo con un ejemplo:

En nuestra página web ejemplo daremos formato a un menú con CSS. Así, haremos que el ancho del menú sea 960px. Como el menú es único en la página (no se repetirá más que en el encabezado) utilizaremos el atributo id.

En la hoja de estilo declararemos el atributo de la siguiente manera:

#menu { width:960px; }

y en el código HTML definiremos la capa que incluirá al menú de la siguiente forma:

<ul id="menu">
<li>Home</li> | <li>Seccion1</li> | <li>Seccion2</li> | <li>Seccion3</li>
</ul>

Imaginemos ahora que queremos que el texto de las secciones 1 y 3 aparezcan en naranja, y la sección 2 y Home en negro.  Estaremos definiendo un diseño que se repetirá, por lo que hay que declarar las classes correspondientes:

.par { color:#ff6633; }
.impar {color:#000000;}

Utilizaremos estas clases en el HTML de la siguiente forma:

<ul id="menu"> <li class="impar">Home</li> | <li class="par">Seccion1</li> | <li class="impar">Seccion2</li> | <li class="par">Seccion3</li> </ul>

Cabe destacar que podremos declarar tantas clases como queramos para una etiqueta. Así, si por ejemplo tenemos una clase como sigue

.textochulo {font-size:20px; font-weight:bold;}

podremos poner un párrafo que aplique este estilo y el .par que definimos antes:

<p class="par textochulo">Este texto tiene un formato muy chulo</p>

Artículos Relaccionados:

About The Author

Related Posts