Seleccionando etiquetas especificas con el uso de class e id

Ya anteriormente habíamos hablado de los selectores básicos, y habíamos tratado el uso de class e id, sin embargo este tipo de selectores es de tanta utilidad que merece un articulo aparte.

Una de las formas de seleccionar una etiqueta especifica es mediante el uso del atributo class y la asignación de un nombre dentro de una etiqueta, y utilizar este nombre como selector.

una clase (class) es un nombre que se selecciona para identificar a uno o varios elementos. Por ejemplo: Parrafo_inicial, ejemplo, resaltar, etc.

Si quisiéramos en el primer párrafo de un capitulo dar un estilo diferente al utilizado en otros párrafos, podríamos definir un selector con atributo class aplicado a las etiquetas <p>.

estiloclass-2

Esto define un selector de estilo que seleccionara a las etiquetas de párrafo <p> que tengan atributo class con el nombre de primer.

Se puede utilizar este estilo en un documento, simplemente mediante la asignación del nombre primer a un párrafo, tal y como se muestra en la siguiente figura.

<p class=”primer”>Este es el primer párrafo del capitulo, </p>

estiloclass-3

Esto produce la siguiente salida:

estiloclass-4

Como se observa solo el primer párrafo, al cual se le ha asignado el nombre primer al atributo class, tiene el estilo creado con el selector p.primer. El otro párrafo tiene el estilo generado por defecto por el navegador, ya que no tiene reglas de estilo declaradas.

Lo mismo puede ser logrado utilizando selectores con id.

p#primer { color:blue; font-size:20px; font-family:georgia, arial;}

y en el documento tendríamos que identificar el elemento <p> al cual queremos aplicar el nombre de id primer.

<p id=”primer”>Este es el primer párrafo del capitulo, </p>

y el efecto sería el mismo. La diferencia es que cuando utilizamos un id, este debe ser único en el documento, no debe haber dos elementos con el mismo id. sin embargo cuando creamos un nombre class, este puede ser aplicado múltiples veces a lo largo del documento.

id se utiliza para referirse a un elemento único en el documento, mientras que class, se refiere a una clase y puede aplicarse a múltiples elementos, del mismo tipo o de diferente tipo.

E-books, E-pub, HTML y CSS

La palabra e-book es la contracción  de dos palabras  del idioma ingles, electronic book, para referirse a la representación de libros en cualquier formato electrónico, entre los cuales se encuentran word, text, ascii, pdf, html, y e-pub entre otros.

E-pub, al igual que e-book resulta de la contracción de dos palabras del idioma ingles, electronic publication, y representa un concepto mucho mas amplio, ya que e-pub se utiliza para representar no solamente libros, sino otros tipos de formatos, como revistas, periódicos y cualquier otro tipo de publicación, Leer más “E-books, E-pub, HTML y CSS”

Selectores, seleccionando elementos para aplicar CSS

Una hoja de estilo CSS esta compuesta por declaraciones del tipo:

selector {propiedad:valor; propiedad:valor;}

Donde el selector indica el elemento o elementos del documento HTML al que se le aplicaran las reglas de estilo.

Los selectores básicos que se pueden incluir en una hoja de estilo son: Leer más “Selectores, seleccionando elementos para aplicar CSS”