Code n' Social

¿De qué trata esta lección?
En esta lección probamos algunos formatos de fuente básicos. Aprendemos a configurar los tipos de letra, tamaño, negrita, cursiva y minúsculas. Aprendemos sobre las clases de CSS, algo similar a los identificadores.

Nuevo atributo HTML en esta lección:
class – en un archivo CSS, las configuraciones se pueden agrupar con un nombre. El nombre debe ir precedido de un punto. Esta configuración se puede usar para más de una etiqueta HTML, solo necesitamos agregar la propiedad de clase a la etiqueta y el nombre del grupo de formato del archivo CSS.

Nuevas propiedades CSS en esta lección:
font-family (familia tipográfica) – usamos esta propiedad para agregar el tipo de fuente a un texto. Podemos enumerar más de uno, si uno de ellos no es reconocido por el navegador.
font-size (tamaño de fuente) – esta propiedad es para establecer el tamaño de un texto.
font-style (estilo de fuente)– Podemos añadir letra cursiva con esta propiedad. Los valores pueden ser: normal o italic (cursiva).
font-weight (peso de fuente) – Podemos añadir fuentes en negrita con esta propiedad. Los valores pueden ser: normal o bold (negrita) o incluso un número, expresando en negrita las fuentes.
Font (fuente) – Con esta propiedad podemos configurar todas las propiedades de arriba a la vez.
font-variant (variante de fuente) – Podemos establecer fuentes de letras pequeñas con esta propiedad. La configuración de mayúsculas significa configurar todas las fuentes en mayúsculas, pero las que originalmente estaban en mayúsculas se muestran en tamaño más grande. Valor posible: small-caps (letras minúsculas).

Ejemplo para el formato de fuente:

En el ejemplo anterior las configuraciones básicas son: fuente Book Antiqua, con tamaño de fuente 12, cursiva. La fuente de los encabezados sigue siendo Book Antiqua (no tenemos que volver a configurarlo, ya que el encabezado está entre las etiquetas del cuerpo), el tamaño es de 20, negrita, clases pequeñas (la B se hace más grande y todas las demás letras se convierten en mayúsculas). Las fuentes en cursiva deben cambiarse, si no queremos usarlas en el encabezado, es por eso que establecemos el valor normal en la propiedad de estilo de fuente.

Desde la configuración del encabezado h1, el tamaño y el peso pueden ser contratados a una configuración de fuente:
font { 20px, bold; }

¿Cómo usamos la propiedad de clase?

En el ejemplo anterior, las configuraciones que queremos aplicar a los encabezados de segundo nivel (etiqueta h2) se agrupan bajo el encabezado del nombre. En el archivo CSS con el punto antes del encabezado que marcamos, usaremos esta configuración como un valor para la propiedad de clase para más etiquetas HTML.

Diferencias entre clase e id:

En un archivo HTML no usamos la misma id más de una vez, pero podemos usar la misma clase tantas veces como sea necesario para tantas etiquetas HTML diferentes.
A una etiqueta HTML solo podemos agregar una identificación, pero más clases. Solo necesitamos agregar una propiedad de clase y listar las clases separadas por espacios.