Propiedades de Estilo CSS para las Fuentes y Textos

Se pueden aplicar a todos los textos, incluidos los enlaces de los cuales se habló en un apartado especial para ellos. Para definir un estilo para un texto podemos usar, entre otros, los siguientes atributos: font-family, font-style, font-weight y font-size.

1.- La propiedad font-family se usa para determinar la fuente con la que se quiere representar el texto. Se pueden indicar varias de modo que si el visitane no tiene la primera fuente instalada en su ordenador, se pasa a comprobar la segunda y así sucesivamente hasta encontrar unaque sí tenga instalada el usuario. De todas formas, si usais fuentes estandar o comunes no debe haber problema, con lo que bastará con poner una o dos solamente.

.parrafouno { font-family: Arial,Verdana,Helvetica,sans-serif ; }

Fijaos que cada tipo de fuente está separada por una coma.

2.- Para poner el texto en cursiva se usa la propiedad font-style, cuyo valor es italic para cursivas y normal para . . pues para normales, claro.

.parrafodos { font-style:italic ; }

3.- Con la propiedad font-weight definimos el grosor de la letra y puede tomar los valores bold, bolder, 900, 800, ....300, 200, 100 y lighter. El primero es el mas "negrito" y el último el más grosor más fino. No todos los navegadores afinan tanto, algunos solo tienen encuenta que sea negrita o normal y no saben distinguir entre solo un poco negrita y negrita. Un ejemplo para un texto en negrita sería:

.textonegrito { font-weight:bold ; }

4.- Para definir el tamaño del texto usaremos la propiedad font-size indicando su valor y sin olvidar nunca la unidad en la que se mide (pixeles, puntos, etc..). Si definimos un tamaño, en unidades fijas el visitante las verá tal como hemos indicado, a pesar de que elija ver el texto mayor desde su navegador, por lo que habrá que escoger un tamaño bien estudiado, evitando así que visitantes que usen un tamaño de pantalla grande tengan que coger los prismáticos para leer nuestra web, xD. Os expliqué el uso y las distintas unidades que podemos emplear en el apartado "Las Unidades".

Resumiendo: Si vamos a definir todas estas propiedades para un texto, quizás os venga bien resumirlo un poco. Esto se puede hacer de la forma siguiente y cuidando este mismo orden:

.selector { font : ValordeStyle ValordeWeight ValordeSize ValoresdeFamily ; }

recordando que no hay que separar con comas nada más que los distintos valores de Family si es que ponermos varios. El resto irá separado con espacios solamente. Vemos un ejemplo?

.otrotextomas { font: italic bolder 15px Arial,Verdana,sans-serif ; }

Si no se indica italic se comprende que el texto es normal, es decir, no en cursiva.

5.- El atributo text-decoration, puede tomar los valores none, overline, underline, through y blink, aunque es conveniente comprobarlos, pues algunos no funcionan correctamente en determinados Navegadores que no siguen correctamente las indicaciones de CSS (de las Hojas de Estilo).

  • none es el valor por defecto e indica que no se representará el texto con ningun tipo de decoración.
  • overline mostrará una línea por encima del texto escogido.
  • underline representa el texto subrayado.
  • through tacha el texto y
  • blink lo muestra parpadeante, cuando al navegador le da la gana, por cierto.

Un texto tachado y de color rojo se podría definir con:

.textotachao { text-decoration:through ; color:red ; }

6.- Para mostrar un texto alineado podemos usar la propiedad text-align que puede tomar los valores left, right, justify o center que lo alinearán respecto al lugar donde se encuentre dicho texto. La forma de definirlo es, por ejemplo:

.parrafojustificao { text-align:justify ; }

7.- Si queréis definir el párrafo de la misma manera que lo tengo yo, con la primera línea un poco metida hacia dentro (a esto se le llama sangría y no es para bebérsela borrachines) lo podéis hacer con la propiedad text-indent, cuyo valor hay que especificar con unidades y todo, (pixeles, puntos, tanto por ciento, etc..) por ejemplo:

p { text-indent:50px ; }