CSS para novatos parte 3: Clases e Identificadores (Class e ID)

lunes, 22 de agosto de 2011

CSS para novatos parte 3: Clases e Identificadores (Class e ID)

◄ Viene de CSS para novatos parte 2 Creación de reglas CSS

Las clases y los identificadores, son las formas más fáciles de implementar CSS, debido principalmente a que permiten asignar a un elemento o conjunto de elementos y evita que escribamos dentro de cada etiqueta HTML una interminable cadena de reglas CSS.

Estos dos atributos sirven para cargar una instrucción ya sea puesta dentro de la misma página mediante <style> </style> o mediante <link type='text/css' /> en un archivo externo que ya vimos en implementaciones de estilos CSS.

Recordando implementación de estilos en casca
Hay tres únicas maneras de hacerlo y todas se mezclan:

1. Recordemos que generalmente los CSS se ponen entre las etiquetas <head> ... </head> pero pueden ponerse en otros lados dentro de <body></body> pero no es una práctica recomendable a menos que hagan tutoriales donde requieran que en una página web en específico se usen estilos complementarios.

La sintaxis de los estilos en cascada es:

<head>

<style type='text/css'>

</style>

</head>

2. El inconveniente de insertar directamente el CSS en la página es que esta tendrá mucho peso, la manera más eficiente es crear un archivo CSS con el block de notas que por fuerza deberá estar entre las etiquetas <head> y </head> para luego asociarlo a cada página o plantilla en nuestra web.

La sintaxis es:

<head>

<link type='text/css' rel='stylesheet' href='//miweb.com/directorio/archivo.css' />

</head>

Pueden existir múltiples archivos CSS llamados mediante la etiqueta <link /> también se puede combinar con <style>.

3. El caso menos recomendado pero que se puede utilizar es agregar el CSS dentro de un elemento entre las etiquetas <body> y </body> como a la misma etiqueta body, la sintaxis es la siguiente:

<etiqueta style="aquí se pone el código CSS"> contenido etiqueta </etiqueta>

las instrucciones CSS se separan igual, solo que no hay corchetes de cierre, por ejemplo para usar width y height, la separación entre instrucciones es un punto y coma ";"

width:300px;
height:600px;

Así pues dentro de la propiedad style en una etiqueta div quedaría:

<div style="width:300px;height:600px;">

contenido de la div

</div>

¿A qué se le aplica un identificador o una clase?
A prácticamente cualquier etiqueta dentro las etiquetas <body> a </body>, como a la misma etiqueta body que sean HTML, pero no a llamados de elementos embebidos como <script> aunque depende de la especificación que puede consultar en la red o el sitio oficial de la W3C.

Identificadores ID
Los identificadores son elementos que podemos asignar a un único elemento o etiqueta web mediante el atributo id. A los atributos de Identificadores no se le pueden agregar más de un solo identificador a la vez (no pueden combinarse), por ejemplo id="reglaid1" es correcta, mientras que id="reglaid1 reglaid2", es erronea, cualquier navegador web solamente tomará el primer elemento ID, si existe otro elemento con la misma ID, será ignorado.

ID aplicado al código CSS: Reglas ID
En el Código CSS todos los elementos ID deben por fuerza comenzar con el signo "#" el cual es la marca para los ID:

Ejemplo (Para crear reglas CSS lea Creación de reglas: Estructura y tipos):

<style type='text/css'></style>

Aplicar las reglas ID a una etiqueta HTML
Una vez creadas las reglas CSS ID ahora deberemos aplicarlas a elementos HTML dentro de las etiquetas <body> y </body> o el cuerpo de la página web. Para este ejemplo aplicaremos a dos DIV reglaid1 y reglaid2.

Las reglas ID se asignan mediante el atributo id="nombreid", por ejemplo: para la regla CSS "#reglaid1", asignamos id="reglaid1" (sin el # que solamente se pone en la sección de CSS)

Ejemplo:

<body>

<div id="reglaid1"> contenido 1 </div>
<div id="reglaid2"> contenido 2 </div>
</body>

Clases CLASS
Las clases podremos agregarla a múltiples elementos en una página, las Clases se declaran en la sección de CSS con un punto ".", también podemos asignar más de una clase a un atributo class, por ejemplo si tenemos las reglas de clase .reglaid1 y .reglaid2, class="reglaid1" es correcto de la misma forma que class="reglaid1 reglaid2" separando cada clase con un espacio. Los navegadores web pasan los valores CSS a todos los elementos con la misma clase.

Clase aplicando al código CSS: Reglas CSS
Ejemplo (Para crear reglas CSS lea Creación de reglas: Estructura y tipos), recuerde que las reglas de clase se inician con un punto ".":

<style>

.reglaclass1
{propiedades CSS}
.reglaclass2
{propiedades CSS}
</style>

Aplicar las reglas de clase a etiquetas HTML
Para aplicar reglas de clase se usa el atributo class="nombreclase" (los atributos no deben incluir el punto), por ejemplo:

<body>

<div class="reglaclass1"> contenido 1 </div>
<div class="reglaclass2"> contenido 2 </div>
<p class="reglaclass1"> Texto 1 </p>
<span class="reglaclass1"> contenido 1 </span>
</body>

Clases e Identificadores
Como pueden observar es muy simple el uso de ID y Class, es posible usar ambos atributos en la misma etiqueta, algo bastante útil, ya que no tenemos que escribir todo el código en un único ID, sino que podemos asignar, por ejemplo: font-size a un ID, mientras que con class ponemos otras propiedades, por ejemplo el background-color, que compartamos con otras etiquetas.

Vamos a crear dos reglas ID (reglaid1 y reglaid2) a cada uno le asignamos dos tamaños de fuente diferente y creamos una Clase con un color que podemos asignar a varias etiquetas HTML

Reglas CSS:

<style type='text/css'></style>

Ahora agregaremos los atributos ID a un DIV diferente reglaid1 y reglaid2, pero a ambos DIV les agregaremos el la misma clase, reglaclass1 lo que hará que cada div tenga un tamaño de fuente diferente, pero el mismo color de texto.

<body>

<div id="reglaid1" class="reglaclass1"> contenido 1 </div>
<div id="reglaid2" class="reglaclass1"> contenido 2 </div>
</body>

Inicialmente se puede asignar los estilos directamente a las etiquetas HTML, pero con el tiempo es imprescindible aprender el uso de ID y Class para que CSS llegue a todo su potencial, aunque ahí no termina el uso de las clases, ha muchas maneras de agrupar instrucciones CSS.

►Sigue en CSS para novatos parte 4: Pseudo-clases y Subclases.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.