Propiedades CSS relacionadas a texto

En naranja se muestra un ejemplo de código mas comúnmente usado y debajo ejemplos, mostrando a la izquierda CSS y a la derecha elementos afectados por este CSS.

Este documento es un caso específico en el que tiene sentido usar atributos de estilo en el elemento mismo (inline styles); ya que es una demostración de CSS. En la mayoría de los casos desaconsejo utilizar atributos de estilos en el elemento, prefiriendo usar clases con sentido semántico o el elemento adecuado.

color

color: red; color: orange; color: antiquewhite; color: #f02; color: #117c83; color: rgb(210, 80, 7); color: rgba(127, 0, 255, 0.77);

Con color determinamos el color del texto. Al principio puede ser que se confundan color y background-color, simplemente recuerden que color sin nada es para el color de texto, y para color de fondo tenes que agregarle la keyword 'background'.

Para color podemos usar keywords como red, orange etc (hay varias) pero lo normal es tener control sobre el color que queremos elegir, y para eso podemos usar valores hexadecimal. El primer par de caracteres representa rojo, el segundo verde, tercero azul. Si solo ponemos tres caracteres significa que estos se repiten (#fa0 == #ffaa00).

Otra notación es usando rgb, en la cual ponemos directamente el valor de forma numérica, desde el 0 al 255, que es lo aguanta un unsigned char, cosa que no importa en lo mas mínimo y no tendría que estar mencionando. Si queremos que el color tenga transparencia, usando rgba introducimos un cuarto parámetro que es la opacidad, que va desde 0 hasta el 1, siendo 0 completamente translucido y 1 completamente opaco

font-family

font-family: Futura, 'Gill Sans', 'Century Gothic', 'Dejavu Sans', 'Trebuchet MS', sans-serif;

Font family dicta la fuente en la que el texto va a ser presentado con. Los valores que toma font family son los nombres de diferentes tipografía separadas por coma. Si el nombre de la tipografía tiene mas de una palabra (por ende contiene uno o mas espacios) la ponemos entre comillas. Es importante terminar el stack con la keyword serif o sans-serif (o la categoría genérica que sea igual al stack que estamos usando); esta keyword al final del stack le dice al cliente que use cualquier tipografía que tenga que sea de ese estilo (esto es determinado por una combinación de browser y sistema operativo). Las tipografía serif como Georgia, Times new roman, Palatino, etc tienen 'patitas', que se les llama serif. Son tipografía bastante legibles y muy usadas en libros ya que estas 'patitas' distinguen de forma mas contrastante las letras, facilitando la lectura. Las tipografía sans-serif (sans significa ausencia) como helvetica, arial (que es un plagio de helvetica), univers, verdana, etc son tipografía que no tienen "patitas". Que tipografía uno elija depende de lo apropiado que sea para el mensaje que queremos transmitir

Es importante tener un stack (al menos una tipografía y la keyword que represente el estilo de tipografía) ya que el cliente (browser) recorre esta lista, buscando una tipografía del sistema cuyo nombre sea igual a la indicada, hasta que encuentre una que sea igual (o termine mostrando la versión genérica dictada por la keyword final). Si nos olvidamos de poner la keyword final y el usuario no tiene la tipografía instalada, en general el cliente mostrará el texto en Times New Roman, ya que no hay especificación w3c que dictamine la acción a realizar.

Una forma de poder usar fuentes mas allá de las que estén instaladas en el sistema de nuestro usuario, es usando web-fonts.

font-size

font-size: 1.2em;

font-size cambia el tamaño en el que la tipografía es presentada. La particularidad de definir el tamaño de tipografía en ems es que la herencia es aditiva.

font-weight

font-weight: normal; font-weight: bold; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900;

Font weight define el peso de la tipografía. Los valores mas usados son bold para poner 'negritas' y normal para contrarrestar este efecto en caso de ser heredado. También podemos definir un numero múltiplo de 100 desde el 100 hasta el 900; pero excepto que la tipografía que estemos eligiendo sea una familia (es decir que tenga numerosas variantes de peso) no nos va a servir de mucho.

font-style

font-style: italic; font-style: normal;

font-style es para poner italicas o removerla,

font-variant

font-variant: normal; font-variant: small-caps;

Y font-variant es para versalitajj raramente utilizada.

text-align

text-align: left; text-align: right; text-align: center; text-align: justify;

Text align nos permite alinear el texto para donde nos guste, izquierda, derecha centrado o justificado.

text-decoration

text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through;

text-decoration es generalmente usado para manipular el estilo de links (con underline) y También se usa para estilar elementos ins y del

text-indent

text-indent: 1em;

indentación de texto, que es que tanto la primera linea de un párrafo/cuerpo de texto se separa de la alineación normal del texto

text-transform

text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: none;

generalmente usado si queremos que un elemento se muestre siempre en mayúsculas.

text-overflow

text-overflow: clip; text-overflow: ellipsis; text-overflow: '…';

Controla la forma en que el texto reacciona cuando sobrepasa la capacidad de su contenedor, en circunstancias en las que el contenedor de texto no puede agrandarse libremente para contener el texto. En este caso emulamos esa circunstancia con overflow: hidden; white-space: nowrap;

text-shadow

text-shadow: {{offset-x}} {{offset-y}} {{blur-radius}} {{color}}; text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.25);

Para agregar sombra al texto. Sombra es una forma de llamarle, pero podemos emular diferentes efectos, como grabado, glow, etc. Básicamente crea una copia del texto por detrás a la cual podemos controlar su offset, blur y color.

line-height

line-height: 1.4;

Modifica el alto de linea, es decir la separación entre linea y linea en un párrafo de texto continuo. Este es un valor importantísimo ya que afecta la legibilidad del texto de forma critica. Una particularidad de line-height es que puede ser escrito sin unidad, si elegimos no poner unidad el alto de linea es relativo al tamaño te texto computado independientemente de la unidad de tamaño que hallamos elegido. Para cuerpo de texto recomiendo entre 1.3 y 1.5; para títulos grandes entre 1 y 1.2.

letter-spacing

letter-spacing: normal; letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: -2px;

Para cambiar el espacio entre letras, esto modifica el kerning. Útil para títulos grandes, para disminuir un poco el espacio entre letras.