comparte el articulo 

Dar estilo a textos con CSS, refuerza el mensaje de tu web

Actualizado el 13/12/2011 < > 0 Comentarios

Resumen: Una vez estructurado nuestro texto es hora de darle estilo, en este artículo mostramos las propiedades CSS más utilizadas para dar una correcta estilización al texto de una web.

En el artículo anterior de este manual tuvimos la oportunidad de enumerar las diversas etiquetas especializadas en dar formato a un texto, gracias a ello ahora que tenemos una amplia noción de como estructurar el texto con XHTML, pero esto no significa que llegamos al final del camino. Si observamos los elementos que creamos por defecto con estas etiqueta, podremos darnos cuenta que no son para nada atractivos visualmente, por lo que es muy probable que deseemos darle un estilo para crear un mejor entorno, para ello vamos a recurrir a CSS para tomar el control de las fuentes, tamaños, colores y espacios.

Tipo de fuente

En muchos casos, el primer encuentro con el manejo de fuentes en una computadora se puede remontar a un procesador de texto, al momento de realizar nuestros trabajos o tareas utilizábamos ciertas fuentes para identificar los encabezados y el contenido, cada quien escogía el tipo que más se adecuaba al documento y a nuestros gustos. Lo mismo ocurre con las páginas HTML pero con ligeras diferencias, tenemos que tener en consideración que muchas fuentes no son universales por lo que si incluimos alguna de estás en nuestra página un usuario no la puede apreciar de la misma manera.

La primera parte de esta propiedad que estudiaremos es “font-family”, con esta parte podemos definir que fuente o tipografía usaremos en el documento. Debemos tener en consideración que el uso de muchas fuentes en un sólo documento puede estropear nuestra obra, no lucirá nada bien y sólo atormentaremos al usuario invadiéndolo con basura anti-estética, por ello esta propiedad debe usarse relativamente poco, pero su importancia no disminuye para nada.

El valor de “font-family” puede ser el nombre de una fuente, el cual debe ir entre comillas, o también puede ser el nombre de varias fuentes separados por comas; de esta manera podemos crear un respaldo, en caso de que el navegador no pueda encontrar la fuente principal usará la siguiente en la lista. Este respaldo es comúnmente utilizado por cuestiones de seguridad, existen ocasiones en que algunas fuentes tienen nombres diferentes en distintos sistemas operativos o simplemente la fuente que estamos utilizando es muy rara, por lo que se opta por utilizar fuentes genéricas como sans-serif o monospace para actuar en caso de que todas las demás fallen.

body { font-family: "Arial" }
p.contenido { font-family: Arial, Helvetica, Sans-serif }

Color

La propiedad “color” ya fue mencionada anteriormente en nuestro manual, como su nombre lo indica sirve para establecer un color para un elemento, en este caso nos ayudará a determinar el color en que se mostrarán las letras del texto. En cambio si lo que quisiéramos es cambiar el fondo del texto, entonces debemos utilizar la propiedad “background-color”, la cual únicamente se encarga de resaltar la parte que queda exactamente atrás del texto.

body {
font-family: Arial, Helvetica, Sans-serif;
color: white;
background-color: blue;
}

Tamaño

Para definir el tamaño de la fuente tenemos a “font-size”, dicha propiedad recibe unidades de tipo píxel, em o porcentaje como valor, pero también tiene la particularidad de recibir cadenas de texto como “small”, “medium” y “large” las cuales establecen un valor predefinido para el tamaño, el cual puede variar según el navegador.

body {
font-family: Arial, Helvetica, Sans-serif;
color: white;
background-color: blue;
font-size: 12px;
}

p.contenido{
font-size: 50%;
}

Altura de la línea de texto

En muchas ocasiones existe la necesidad de ajustar la altura de la línea donde desplegamos el texto, para ello muchos recurren a modificar la fuente del texto, pero el proceso correcto sería utilizar la propiedad “line-height”. Dicha propiedad nos permitirá crear un texto más legible al ajustar la línea de texto en elementos como párrafos.

p { line-height: 1.5 }

Negrita y cursiva

Si eres de las personas que aún utiliza etiqueta HTML para definir estos dos estilos, por favor te pedimos que dejes de hacerlo y en cambio hagas uso de estás propiedades CSS. Si lo que queremos es establecer el grosor y la inclinación de nuestro texto entonces debemos recurrir a “font-weight” y “font-style” para definirlo.

La propiedad “font-weight” se encargará de definir el grosor de la fuente, los valores típicos para esto son “bold” que nos pondrá el texto en negritas y “normal” que lo regresará a una visualización común. Por su parte, la propiedad “font-style” se usará para volver cursiva un tipo de letra, y por cursiva nos referimos a dar un formato itálico.

p { 
font-weight: bold; 
font-style: italic;
}

Mayúsculas y minúsculas

Una vez adentrado en la estilización del texto, podemos pasar a aspectos más específicos como por ejemplo el aspecto de cada letra, dentro de esto encontramos a las mayúsculas y minúsculas.

Muchos consideran de mala educación y mal gusto escribir todo el texto con mayúsculas, por lo que en muchas ocasiones se buscan alterntivas para no tenerlo que escribir directamente en el código. Para esto tenemos propiedades como “font-variant” y “text-transform”.

En el caso de “font-variant” tenemos el calor “small-caps” que sirve para convertir un texto a pequeñas letras mayúsculas que no revasen la altura de una minúscula, es decir simplemente toman la forma. Por otro lado “text-transform” nos permite jugar más con las letras, ya que con su propiedad “uppercase” podemos transformar todo el texto a mayúsculas o con “lowercase” convertirlas a minúsculas, y si lo que queremos es una palabra correctamente escrita entonces podemos usar “capitalize” que convierte a mayúscula únicamente la primera letra de la palabra.

h1 { text-transform: uppercase; }

Propiedad Font

Existe una manera sencilla de reflejar todo los cambios que hemos realizado hasta el momento, y esta es la propiedad “font”. Muchos le llamarán atajo, pero sigue siendo una propiedad en sí y básicamente su función consiste en combinar los valores de “font-style”, “font-variant”, “font-weight”, “font-size”, “line-height” y “font-family” en una sola línea de texto.

Estos pequeños atajos son proporcionados por CSS para definir un gran número de estilos con poco código, y nos iremos encontrando con otros más conforme avancemos. La manera de definir su valor es separar cada propiedad separada por un espacio, como se muestra aquí:

p { font: bold small-caps 12px 1.5 arial, helvetica, sans-serif }

Alineación

Finalmente, una vez que ya tenemos estilizadas las letras, podemos definir una alineación adecuada para mostrar nuestro texto. Cómo en todo lo que es bidimensional, existen dos formas básicas de alinear, la horizontal y la vertical, siendo el primer caso el más fácil.

Para definir una alineación horizontal basta con utilizar la propiedad “text-align”, la cual se encargará de utilizar el elemento padre como marco para alinear el texto con alguno de sus 4 valores “left”, “right”, “center” o “justify”.

p { text-align: right; }

Por su parte el alineado vertical es un poco más de trucos, podemos utilizar la propiedad “vertical-align” pero puede que los resultados no sean los esperados. Los valores para esta propiedad son “middle”, “bottom”, “text-top”, “text-bottom”, “sub” y “super”.

p { vertical-align: middle; }

Publicado el 13/12/2011, última actualización 13/12/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras