Conceptos básicos de CSS

En el el curso de HTML hemos tratado de evitar el uso de estilos y colores, aunque se puede hacer, ya que en las primeras versiones se comenzaron a introducir elementos con la finalidad de mejorar el aspecto del contenido.

Después se creó CSS, tecnología que sirve exclusivamente para mejorar el aspecto del contenido HTML mediante las hojas de Estilo.

Con esto se ha conseguido separar el aspecto o diseño del contenido y por cuestiones de efectividad es preferible usarlo siempre mediante CSS y dejar el HTML sólo para incluir el contenido.

Veamos la sintaxis para aplicar color de fuente y fondo a un elemento HTML mediante CSS:

<!DOCTYPE html>
<html>
<head>
<title>título página</title>
</head>
<body>
<h1 style="color:#0000ff">Noticias del día.</h1>
<p style="color:#888888;background-color:#ffffdd">
Aquí la descripción de la noticia.
Aquí la descripción de la noticia.
Aquí la descripción de la noticia.
Aquí la descripción de la noticia.
</p>
</body>
</html>

El atributo a emplear en la etiqueta es style y la tienen todos los elementos HTML. En el ejemplo anterior empleamos las propiedades color, que determina el color del texto y background-color, que determina el color de fondo.

Cuando asignamos un valor a una propiedad CSS usamos el separador “:” (dos puntos) en lugar del signo igual que empleamos en los atributos HTML.

Si empleamos más de una propiedad CSS en el atributo style, debemos separarlas por “;” (punto y coma).

Para definir el color se ha empleado la notación hexadecimal: #0000ff.

Todas las etiquetas HTML tienen asignados unos estilos prefinidos, lo cuales modificamos mediante CSS.

Ojo! Las hojas de estilo distinguen entre mayúsculas y minúsculas.

A este método de trabajar lo llamamos CSS in line, ya que va dentro del mismo código de la etiqueta HTML. Es en realidad un método no recomendado de trabajar, pero por el que debemos comenzar para aprender.

Propiedades relacionadas con texto en CSS

En el ejemplo anterior hemos visto la propiedad color. Esta es una propiedad CSS para estilar textos. Veamos otras tantas:

  • text-align: Sirve para definir la alineación del texto y le podemos asignar alguno de los siguientes valores: left, right, center,justify.
    text-align:center;
    El texto aparecerá centrado. Si queremos justificarlo a ambos lados emplearemos justify. Para derecha e izquierda, right y left.
  • text-decoration: Propiedad que permite que aparezca subrayado el texto, tachado o una línea en la parte superior. Los valores posibles son: none, underline, overline, line-through.
  • letter-spacing: Para indicar el espacio entre caracteres.
  • word-spacing: Para indicar el espacio entre palabras.
  • font-weight: Para poner negrita o cambiar el grosor de la letra. Se puede especificar bold (negrita) o un valor numérico entre 100 y 900. El valor predefinido sería normal o 400 y bold equivale a 800. Ver más en W3schools.
  • text-indent: Para indentar o poner sangría en la primera linea del texto. Podemos indicar un valor negativo para obtener un desplazamiento en sentido contrario y crear una sangría francesa.
  • text-transform: Sirve para cambiar la estructura de mayúsculas y minúsculas del texto con los siguientes valores: none (no cambia nada, predefinido), capitalize (la primera letra de cada palabra en mayúscula), lowercase (todas en minúscula) y uppercase (todas en mayúscula).

Ejemplos:

Tamaños, códigos de color y unidades de medida en CSS

Unidades de medida en CSS y HTML

Las unidades absolutas son específicas y no se suelen usar, pero por si las vemos por ahí:

Unidades absolutas
Unidad Descripción
cm Centímetros
in Pulgadas, 2,54 cm
mm Milímetros
pt Puntos, 0,35mm
pc Picas, 4,23mm

Las unidades relativas dependen de otros factores, como en el caso de los píxeles, que su tamaño depende de la resolución de pantalla que emplee el usuario:

Unidades relativas
em Tamaño relativo a la fuente predefinida del navegador, aproximadamente equivalente a la anchura de la letra M.
ex Tamaño de la altura de la x.
px Tamaño relativo respecto a la resolución de pantalla del dispositivo.
% Porcentaje relativo al elemento actual en que se aplica.

1em = 16px = 100% = tamaño predefinido de párrafo.

2em = 32px = 200% = tamaño predefinido de H1

Códigos de color y uso de colores en CSS

Código Hexadecimal para el uso de colores web

Los colores en hexadecimal ven precedidos por # y constan de 6 dígitos. En ocasiones los podemos encontrar con 3 dígitos expresados de forma abreviada. Ejemplo: #fff, que sería equivalente a #ffffff, blanco.

Podemos extraer el código de color de una imagen con herramientas de extracción de color de las aplicaciones de edición de imágenes, normalmente representada con una pipeta.

Adicionalmente podemos instalar un extractor de color como extensión del navegador como Eye Dropper o como aplicación: Just Color Picker.

Este código es el más cómodo de usar por su simplicidad.

Códigos RGB y HSB útiles para dar transparencia

Se pueden expresar los colores en otros formatos como RGB o HSB, cuyos valores nos suministra cualquier editor de fotografía como Gimp o Photoshop.

La ventaja de estos sistemas es que nos permiten indicar también el grado de transparencia, de forma que podemos hacer elementos translúcidos u opacos.

El valor de la transparencia va siempre de 0 a 1, siendo el 0 totalmente transparente y el 1 totalmente opaco (valor predefinido).

Un ejemplo de aplicar color en HSB con transparencia sería:

background-color: hsla(40,50%,80%,.5);