CSS, 2ª parte

Hoy veremos algunas cuestiones diversas sobre CSS:

Unidades

Se pueden indicar valores de muchas formas (cm, mm, in, px, pt, pc, em, ex, ch, rem, vw, vh, vmin, vmax, %), nosotros usaremos en este curso px (pixels) y % (porcentaje con respecto al contenedor).

Width y height

nos sirven para indicar el tamaño de algo
En el siguiente encabezado hemos añadido el siguiente código:
style="background-color: #eed490; height: 30px; text-align: center; width: 200px;"
queda

ejemplo

Border

Con CSS podemos añadir un borde a distintos elementos. Existen muchas órdenes para indicar ancho (border-width), color (border-color), estilo (border-style), etc. Nosotros usamos una versión compacta con la que le indicamos las tres propiedades básicas.
Ejemplo: a la imagen le hemos añadido un borde:
style="border: 3px solid darkgreen;"


Otros ejemplos de bordes: solid dashed dotted double groove ridge

Colores

Podemos indicar el color de fondo con background-color, el color de un borde con border-color, el color de texto con color. Ya hemos visto ejemplos y casi siempre hemos usado un nombre de color.
Buscando en internet "nombre colores CSS" encontrarás muchas páginas en las que se puede consultar los 140 nombres de colores que existen, como por ejemplo en esta.

Otra forma de indicar un color es mediante su código en hexadecimal, para ello podemos usar GIMP o cualquier otra herramienta. Existen herramietas online que también permiten seleccionar los códigos de colores, para ello buscad en internet "css color picker".

Margin y Padding

Margin sirve para añadir márgenes entre un elemento y lo que lo rodea. Margin es es espacio que queremos que haya entre el borde y lo que lo rodea y padding es el espacio entre el borde y el contenido. En la imagen anterior hemos dejado espacio entre el borde y la imagen utilizando padding.