Usando CSS – Class y ID

Ahora que ya sabes cosas básicas de CSS, te enseñare como implementarlo en un diseño. Recuerda que la idea de CSS es hacer el código HTML mas limpio, y corto. Para eso usaremos dos cosas llamadas Clase y Identificador (Class y ID).

Class

Este es un selector que selecciona grupos y les aplica algún estilo que tu ayas definido. Para declarar una clase en CSS usas el punto y después el nombre.

Para asignarlo necesitas usar el atributo class y el valor miclase.

ID

Identificadores trabajan de igual manera y lo único que cambia es la forma de declarar. En vez de usar un punto, usas un símbolo de numero.

Si los dos trabajan de la misma manera porque hay dos? En acuerdo con los estándares de W3C, los ID solo se deben de usar un vez en el documento. Y claro tiene razón ya que ID representa Identificación y seria lógico que el ID sea único. Esto se usa en otras áreas de HTML como para enlazar internamente en una pagina usando la etiqueta <a> (en el siguiente ejemplo miraras como trabaja).

Ejemplo

Copia el siguiente código (o escribe lo para que se te quede) y salva lo con extensión .html usando Notepad o tu editor de texto favorito.

Si te das cuenta en el código HTML se mira mas limpio y nos ahorra estar poniendo el estilo a cada caja. Ademas, incluí un enlace <a> para que observes como apunto a el encabezado, por ejemplo si el documento es largo, con un enlace como ese pueden regresar arriba rápidamente. Es por eso que los ID tiene que ser únicos.

Finalizando

Ahora creo que ya tienes lo básico para armar un estilo y aplicárselo a una pagina de HTML. Si todavía no te quedo claro, vuelve a leer el articulo.

Creo que ahora habrá que enseñar que es lo que CSS posee!

[icon:user]ABCO
[icon:tag], , ,
comments

Una Respuesta a “Usando CSS – Class y ID”

  1. date
    enero 12, 2012
    time
    11:33 AM
    [#2]

    […] Esto te facilita cuando generas las hojas de estilo en cascada, CSS, ya que en vez de asignarle un ID o Clase lo puedes identificar […]

    reply
    Reply |
    quote
    Quote |
add comment

Deje su comentario