Nombrando cosas en CSS

Para usar el CSS adecuadamente, lo primero que debe saber es lo siguiente:

+ En CSS el orden en el que se colocan las instrucciones afecta el orden en el que se ejecutan; y,
+ En CSS se puede ser muy específico de maneras muy sencillas, utilizando Id's y Clases.

Cómo escribirlo

Para usar CSS, lo primero que necesita hacer es seleccionar cuáles elementos de la página XHTML se verán afectados con las instrucciones. ¿Cómo? Nombrándolos:

body {}

Ahora, si se desea afectar a un elemento que está dentro de otro, solo necesita especificar ambos:

tr td {}

Y, por último, si se desea escribir instrucciones que afecten a más de un elemento XHTML, entonces se les lista, con comas:

i, em {}

Así, en el primer ejemplo, las instrucciones CSS afectarán al elemento body; en el segundo, a toda celda de tabla que se encuentre en una fila de tabla; y en el tercero, las instrucciones afectarán a todo elemento <i /> y <em /> que se encuentren. Para todos los casos, se van a escribir las instrucciones dentro de las llaves.

Para ser más específico

Hay muchos casos en los que se desea ser más específico. Por ejemplo, ¿se desea afectar a un párrafo, pero no a todos los otros párrafos de una página web? Se tienen tanto los ID como las Clases para solucionarlo:

Si se establece una clase, se establecen una serie de instrucciones que van a afectar a todo marcador que tenga el nombre de esa clase dentro de la página web. Así, si solamente se desea afectar a unos cuantos párrafos, basta con darles un nombre, como 'otro', y especificar las instrucciones en el archivo CSS:

En la página web, incluye la clase:

<p class="otro">párrafo ejemplo</p>

...y en el CSS, establece la clase con un punto:

p.otro {}

Esto afectará a todo párrafo que tenga la clase llamada 'otro' en la página web. Los demás, no se verán afectados.

Asimismo, si solamente se desea especificar condiciones para un elemento de la página web, puede darse un nombre específico, o ID, y establecer sus instrucciones CSS en el archivo CSS. Para nombrar un ID, basta con agregarle el nombre, así:

<p id="otro">párrafo ejemplo</p>

...y en el CSS, se establecen las instrucciones con un "michi":

p#otro {}

¿Cuál es la diferencia? La diferencia consiste en que uno puede tener varios párrafos de la misma clase en un documento dado; sin embargo, solo un elemento con ID en cada archivo.


Conocimiento + Computadores