Diferencia entre id y class

Hola, es que no veo la diferencia entre las clases de estilos y los estilos unicos. Se que id se usa solo para un elemento, y class para varios. Si solo es para eso, no seria mas facil y seria lo mismo usar siempre class? Un saludo y gracias

la diferencia es que con el id se usa para un solo objeto html y no se pude añadir otro id distinto ni poner un class y un id porque los navegadores reconocen el id como identificador predominante en cambio con class es todo lo contrario el se puede usar con varios objetos html y se pueden poner mas de uno en un mismo objeto

mas informacion sobre las diferencias entre id y class

chao!

Lo que kevinsteling esta muy bien, pero para ser mas simples: Puedes poner el mismo id UNA SOLA VEZ por pagina y un class lo puedes poner muchas vezes.

Ya, se que el ID se puede poner solo una vez, pero no entiendo en que varia si se ponen en vez de id todo class. Me pueden poner un ejemplo? Un saludo

Pues que si quieres darle estilo a un determinado div (o span, etc...) es más fácil usar un ID

Imagina que quieres darle posiciones ABSOLUTAS a un elemento, eso sólo se lo puedes poner a uno, si no estarían todos encima unos de otros.

Muchas gracias a todos. Me habeis ayudado mucho

si y tambien que el class se pueden poner mas de uno en un mismo elemento html asi por ejemplo

.negrita { font-weight:bold; }
.verde  { color:green;}

<div class="negrita verde">Este texto es  negrita y de color verdee</div>

SI se pueden usar id y class juntos, por eso existen los dos tipos, esa es la razon precisamente, ejemplo puedes poner un menu con elementos "a" comunes pero con un fondo diferente cada enlace:

<a id="menu" class="bg_casa">casa</a>
<a id="menu" class="bg_carro">carro</a>

#menu{font-color:red;font-size:14px;}
.bg_casa{background-image:url(imagenes/imagen_casa.png)}
.bg_carro{background-image:url(imagenes/imagen_carro.png)}

esa es la razon de que halla id y class, de hecho se puede hacer un verdadero revuelto con otras propiedades, como decir que solo el primer h1 de un div con id "descripcion" vaya en rojo y los demas h1 de ese div en azul, mientras que los divs con id "biografia" sean al reves.

Porque con id.. estas IDentificando un elemento.. por lo tanto solo puede haber uno igual.. y cuando creas una clase pos puede haber varios elementos que tengas esas propiedades.. no se si me explicado bien..xd

saludos

De hecho en muchas ocasiones se utilizan ID's para recorrerlas con el DOM porque no se podía recorrer una clase, cosa que ahora se admite con los nuevo estándares, por lo cual hoy en día su único uso principal es como dice Vazquinhos, el IDentificarlos.

Por cierto, lo que comenta el compañero ricky (sin ánimo de ofender) no sería correcto, ya que un ID no lo repetiremos en la misma página. Corregidme si me equivoco, pero en mi pueblo es así.

Saludos.

Web-Freelance escribió:Por cierto, lo que comenta el compañero ricky (sin ánimo de ofender) no sería correcto, ya que un ID no lo repetiremos en la misma página. Corregidme si me equivoco, pero en mi pueblo es así.

Entonces seras pionero en tu pueblo amigo :-) ve y diles que si se puede, de hecho para cosas como lo siguiente es la forma correcta para reducir el codigo, este lo hice para agregar botones sociales:

<div id="piedos">
<div id="botones"><a class="fb" href="http://www.facebook.com/xxx" 
title="Perfil en facebook" target="_blank"></a></div>

<div id="botones"><a class="tw" href="http://www.twitter.com/xxx"
title="Perfil en Twitter" target="_blank"></a></div>

<div id="botones"><a class="bg" href="http://www.blogger.com/profile/xxx"
target="_blank" title="perfil en blogger"></a></div>

<div id="botones"><a class="rss" href="http://www.xxx.co.cc/rss/rss.xml"
target="_blank" title="Alimentador de Feeds RSS"></a></div>

<div id="botones"><a class="html" href="#"
target="_blank" title="CSS 2.1 100% validado"></a></div>

<div id="botones"><a class="css" href="#"
target="_blank" title="HTML 4.1 100% validado"></a></div>
</div> 

-----------------
/*enlaces de botones sociales*/
#botones{float:left;}
a.fb{height:50px;width:50px;background-image:url(objetos/f.png);
display:block}
a.fb:hover{background-position:bottom;}
a.tw{height:50px;width:50px;background-image:url(objetos/t.png);
display:block;}
a.tw:hover{background-position:bottom}
a.bg{height:50px;width:50px;background-image:url(objetos/b.png);
display:block;}
a.bg:hover{background-position:bottom}
a.rss{height:50px;width:50px;background-image:url(objetos/r.png);
display:block;}
a.rss:hover{background-position:bottom}
a.html{height:50px;width:50px;background-image:url(objetos/html.png);
display:block;}
a.html:hover{background-position:bottom}
a.css{height:50px;width:50px;background-image:url(objetos/css.png);
display:block;}
a.css:hover{background-position:bottom}
/*botones*/

saludos

Perdona ricky, pero casi mejor no les voy a decir nada. Claro que se puede, también se puede hacer una web con iframes y no por eso es aconsejable, jeje.

Que se pueda hacer no quiere decir que se deba, y poner mas de una vez el mismo ID en el mismo documento es una práctica que NO se debe hacer. Repito, NO se debe hacer pero SI se puede hacer, claro, el navegador no te va a dar error [;)]

Aquí os dejo la recomendación oficial (W3C) dónde lo deja bien claro:
http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

Saludos.

Sobretodo e spor lo que comenta Web-Freelance. W3c en su revisador, si ve mas de un id igual, te dará error :=P

pos si, reconozco mi error yo estaba interpretando un id por elemento, div,p,span... y no un div por pagina, lo paradojico es que esa tecnica la copie mirando el codigo del sitio de un tipo que sabe mucho, pero acabo de subir ese codigo limpio y me tira 5 errores en 5 id y solo vale 1, que se puede se puede pero si el consorcio no lo aprueba, ahora yo pregunto lo q pregunto el autor del post, pa que carajos esta entonces... solo para usarlo como punto de ancla nomas como muestra la explicacion del link que puso kevinsteling... y aun en eso se puede prescindir de el... es mas bien como para las partes del body del sitio, footer,sidebar... algo simbolico porque ahi tambien podrian usarse selectores de clase. :-(

No pasa nada ricky, simplemente hay gente que decide no seguir los estándares que, para eso están, para seguirlos o para pasar de ellos [:)] cada uno decide lo propio.

Sencillamente sirven para lo que son, IDentificadores de partes de la estructura, y como dije, se usaba/usa bastante para recorrerlas con el DOM por eso mismo, porque se supone que no encontrarás otro ID, nada mas que el que estás buscando, así te aseguras su llegada a él. Ahora ya se pueden recorrerse clases (que bien), por lo que a medida que se va avanzando y combinando con otros recursos, su uso puede quedar relegado a una simple "estructuración" y "estandarización" de código (no se si me he inventado estas palabras [:D])

Por cierto, estas últimas anotaciones son mi propia opinión, no se realmente lo que sucede/sucederá con los ID's.

Saludos!