Si estuviste viendo los atributos globales, ID y Class te pueden sonar de algo, pero tal vez no tenías ganas y preferiste pasar (como haría yo), por ello ahora vamos a ver Id y Class, dos atributos que nos permitiran enlazar etiqueta HTML con estilos CSS3

Aunque arriba lo haya comentado rapidamente, voy a extenderme más ahora. Los atributos id y class sirven para enlazar etiquetas HTML, como puede ser la etiqueta <img> (Siempre la pongo de ejemplo creo yo), con estilos CSS

Las dos sirven para lo mismo, pero esa frase está muy incorrecta y muy correcta, verdaderamente sirve para lo mismo, enlazar, pero no lo hacen de la misma manera.

Antes de explicar que es id y class, debemos de quedarnos con una sencilla, fácil y rapida muestra de la estructura de CSS

NombreDentroDe""DelAtributo {

propiedad: valor;
propiedad: valor;
propiedad: valor;

}

¿Está claro? Quedense con eso, el valor que pusimos dentro de las comillas del atributo id o class (Ahora aprenderemos cual escoger), el corchete de apertura {, las propiedades de diseño que tendrá la etiqueta al ser mostrada al usuario que terminar por ";" , el valor que esta tendrá, y el corchete de cierre }, ¡LISTO!

id=""


El atributo id (Que significa Indentificador) tiene la peculiaridad de que solo puede ser utilizado una vez, por ejemplo...

Tengo dos tablas, la tabla1 y la tabla2, y le pongo a las dos el mismo id, que es id="tablas", esto estaría ¡MAL DE FATAL!, porque Id solo ha de ser utilizado una sola vez, si quisieramos que las dos tablas utilizaran el mismo estilo, usariamos class="", pero es ya otro tema. En la estructura de CSS, un Id tendría # + nombre, lo que quedaría:

#NombreDentroDe""DelAtributo {

propiedad: valor;
propiedad: valor;
propiedad: valor;

}

class=""


El atributo class (Que significa Clasese) a diferencia de Id, puede poner el mismo valor de class en muchas etiquetas, puedo poner a tabla1 y tabla2 el mismo estilo, y si quiero no solo puedo poner class="tabla1" sino también puedes poner dos valores en el mismo class, quedaría así class="tabla1 gris" así el navegador buscará en el archivo .css los estilos que lleven de nombre: tabla1 y gris. En la estructura del archivo CSS, un class tendría . + nombre, lo que quedaría:

.NombreDentroDe""DelAtributo {

propiedad: valor;
propiedad: valor;
propiedad: valor;

}

CSS es nuevo para tí, igual que un día lo fue para mi, por ello lo mejor será que veamos la estructura de un archivo .css que tenga dos id y dos class. No vamos a poner las propiedades y valores, para que no se asusten ;)

#tabla1 {

propiedad: valor;
propiedad: valor;
propiedad: valor;

}

.gris {

propiedad: valor;
propiedad: valor;
propiedad: valor;

} #tabla2 {

propiedad: valor;
propiedad: valor;
propiedad: valor;

}

.izquierda {

propiedad: valor;
propiedad: valor;
propiedad: valor;

}

Puedes ponerlo como quieras, un id arriba o un class abajo, donde sea, eso no importa.

A partir de ahora en cada página tendremos lo que llamaré

LA PROPIEDAD SORPRESA

Así mientras vamos aprendiendo HTML podremos encontrar unas páginas con estilos, esten atentos ya que aparecen en recuadros azules como las adventencias :)

Y ahora pasemos a la acción, empecemos a enseñarle al usuario nuestra web, y vayamos a la etiqueta <body>