CSS

 

Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer de una tabla donde se vean los distintos atributos y valores de estilos que podemos aplicarle a las páginas web.

Aquí puedes ver la tabla de los atributos CSS más fundamentales para aplicar estilos a elementos básicos, que te vendrá perfectamente para comenzar con las CSS. Existen muchos otros atributos que aprenderás en capítulos sucesivos del Manual de CSS. Recuerda además que si quieres ver cómo se aplican muchos de estos estilos en páginas web puedes ver el vídeo tutorial sobre los atributos de las CSS.

Atributos para fuentes y textos

Comenzamos viendo una serie de atributos de CSS que aplican sobre los textos de la página y las fuentes tipográficas.

color

Este atributo sirve para definir el color del texto de un elemento. Lo admiten casi todas las etiquetas HTML, ya que en casi todas podemos colocar texto.

Podemos colocar los colores con valores RGB, con nombres y otras anotaciones. Para más información lee el artículo sobre los colores en CSS.

h1 {
    color: blue;
}
.destacar {
    color: #ff3355;
}

font-size

Sirve para indicar el tamaño de las fuentes de manera exacta, permitiendo distintos tipos de unidades CSS, absolutas y relativas.

Además, aunque no se usa mucho, existen como varios tamaños definidos por nombres, como xx-small, x-small, small, medium, large, x-large, xx-large, que dejan a juicio del navegador qué tamaño exacto usar.

footer {
    font-size: 1.25rem;
}
div.nota {
    font-size: small;
}

font-family

Con este atributo indicamos la familia tipográfica que tendrán los elementos. Podemos indicar valores de fuentes específicas o algunos nombres de fuentes genéricos.

article {
    font-family: verdana;
}
p {
    font-family: serif;
}

Los valores genéricos son los siguientes:

• serif
• sans-serif
• cursive
• fantasy
• monospace

Cuando usamos estos nombres genéricos el navegador es el que elige la fuente en particular que va a colocar. Será una familia tipográfica que respete el nombre genérico. Por ejemplo, si indicamos "sans-serif" el navegador podría elegir fuentes como arial, verdana, helvetica...

Estas fuentes genéricas se suelen usar como "fallback", de modo que, si no está la fuente que nosotros hemos definido anteriormente, usará cualquiera que se adapte al nombre genérico.

span {
  font-family: 'Times New Roman', Times, serif;
}

Nota que, cuando el nombre de la fuente tiene varias palabras, con espacios en blanco entre medias, necesitamos colocar el valor entre comillas para que funcione correctamente.

font-weight

Este atributo indica la espesura del texto. Se usa mucho para indicar que queremos un texto en negrita, pero también existen espesuras más finas que la normal, que son interesantes como recurso de diseño.

Podemos indicar la espesura con muchos tipos de valores, algunos tan fáciles de memorizar como "bold". Los valores posibles son los siguientes:

• normal
• bold
• bolder
• lighter
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900

El valor negrita sería 700. El normal 400 y el fino 300.

Ten en cuenta que no siempre las fuentes que tienes instaladas soportan todas las espesuras. A veces descargamos una fuente que no tiene la espesura fina, o la negrita. En esos casos el navegador puede representar la fuente normal o hacer una aproximación de la espesura deseada de manera aproximada. No obstante, este efecto no estaría garantizado a no ser que la familia fotográfica descargada lo contenga.

b {
    font-weight: bolder;
}
h1 {
    font-weight: 300;
}

font-style

Este atributo sirve para indicar si queremos fuente oblícua, es decir, itálica.

Los valores posibles son:

• normal
• italic
• oblique

Los valores "italic" o "oblique" son equivalentes.

li {
    font-style: italic;
}

Atributos para bloques de texto

Antes hemos visto atributos "font", que permitían definir estilos para textos. Ahora vamos a ver estilos para el texto, lo que resulta bastante parecido. La diferencia de estos atributos es que a veces tienen sentido cuando se aplican sobre bloques de texto, como los párrafos.

line-height

Este es un estilo fundamental para facilitar la lectura del texto. Sirve para definir la altura de las líneas del texto. Por tanto, podemos usarlo para especificar el espaciado entre líneas.

line-height permite definir un estilo que no se podía alterar en la época en la que no existía el lenguaje CSS.

li {
    line-height: 24px;
}
body {
    line-height: 1.4em;
}

text-decoration

Este atributo permite definir la decoración del texto, lo que equivale en la práctica a si está subrayado o tachado, o nada de eso.

Un uso típico es quitarle el subrayado a los enlaces:

a {
    text-decoration: none;
}

Valores posibles son:

• none
• underline
• overline
• line-through

.tachado {
    text-decoration: line-through;
}

text-align