HTML5+CCS3 entrada 2: formato de texto

En la entrada pasada vimos como colocar texto, ahora toca darle formato al texto y para eso usaremos CCS3, como una de las principales ventajas de CSS es que puede emplearse el mismo archivo para varias paginas aprovecharemos esto, y usaremos CSS externo, en vez de hacer de forma interna, dentro del HTML.

Clases e identificadores

Las etiquetas de HTML poseen modificadores con valor a los que denominamos atributos, estos atributos aunque pueden dar formato al texto, no se recomiendan para darle mas simplicidad y limpieza al código HTML, de estos atributos CSS se vale de dos para poder indicar a que etiquetas de la pagina web aplican el formato, en este caso son los atributos:

•  id: su nombre proviene de «identificador» se usa para darle un nombre único a una etiqueta de HTML, con lo cual se puede asignar un formato CSS a una etiqueta en particular sin afectar a las demás.
• class:  su nombre proviene de «clase», se usa para asignar un nombre común a varias etiquetas de HTML, el nombre de clase podemos dárselo a varias etiquetas, mientras que el de id solo se podemos dar a una.

Los formatos de CSS también se pueden asignar a etiquetas de forma general, con lo que el formato se aplicara todas las veces que aparezca la etiqueta en cuestión.

En la siguiente imagen podemos ver como colocamos los atributos «class» e «id» a las etiquetas «p» de nuestro ejemplo.

Observe que en el caso del atributo class, la clase «texto» la hemos colocado a dos etiquetas p, con lo que ambos párrafos tendrán el mismo formato.

Vincular CSS con HTML

Como estamos usando CSS externo, para vincular el archivo CSS que contiene todas las reglas de formato que vamos a aplicar a nuestra pagina,  usaremos la etiqueta link, la cual como podemos ver, va en la sección del head de nuestra pagina HTML, en esa etiqueta podemos ver los siguientes atributos:

• href: establece el nombre y la dirección del archivo CSS a vincular con nuestra pagina HTML
• type: indica al navegador que tipo de archivo es el que se esta vinculando, en este caso es un archivo de texto de CSS.
• rel: establece que el documento es relativo a una hoja de estilo.

Como puede observar los atributos tupe y rel para este caso siempre dirán los mismo, el único que cambiaría, seria el href, para indicar a que archivo vinculamos.

Reglas CSS

En el archivo CSS las reglas se crean de forma muy simple, primero se coloca el nombre de la clase o id al que le aplicaremos el formato, si es una clase, se debe preceder de un punto(.) y si es un id, debe precederlo un signo de numero (#) y después colocamos la lista de reglas en pares de nombre y valor terminados con punto y coma, tal y como vemos en la imagen de nuestro CSS para el ejemplo.

 

Como puede ver, para definir el formato, que en CSS se denomina regla, se coloco un punto antes del nombre de clase y un signo de numero en el caso del id formato. y adentro de las llaves están los atributos y sus valores, separados por dos puntos (:) y terminada cada linea en ;

 

Atributos CSS para texto

A continuación colocaremos la descripción de cada uno de los atributos empleados en las reglas CSS que hemos creado

• text-align: determina la alineación del texto, sus valores pueden ser: center, left, right, justify.
• text-transform: realiza un cambio en las letras que usamos, sus valores son: capitalize(letra capital), uppercase (todo en mayúsculas), lowercase (todo en minúsculas), como puede ver en el ejemplo, el titulo esta escrito en minúsculas, pero usamos este atributo para cambiarlo.
• font-size: define el tamaño de la letra y en el ejemplo lo usamos en pixeles (px), aunque puede ser tambien puntos (pt) o porcentajes(%).
• text-decoration: usa uno de los siguientes valores underline (subrayado), overline (tachado),
• font-style: cambia el estilo del texto y sus valores pueden ser nomas, italic, oblique.
• font-family: se usa para definir el tipo de letra, en el ejemplo puede observar que en cada caso se colocaron 3 tipos de letra (fuente), esto es porque si el equipo no tiene instalado el primer tipo, el navegador verificara los otros dos y usara en la pagina el que este presente.
• colo: define el color del texto.

Para el caso del color, sus valores pueden ser de la lista de colores predefinidos:

• maroon
• red
• orange
• yellow
• Olive
• purple
• fuchsia
• white
• lime
• green
• navy
• blue
• aqua
• teal
• black
• silver
• gray

O también puede usar el modelo RGB usando valores hexadecimales, en donde se usan digitos hexadecimales.