Adrian Fondón- Insertar CSS

Imagen insertada con una dirección relativa.

Si la imagen la tenemos nosotros en la misma carpeta que el sitio web, sólo hay que escribir el nombre de la imagen.

Una imagen de un pueblo asturiano.

Si la imagen está en una subcarpeta de la carpeta del documento actual, lo que es muy recomendable si tenemos varias imágenes en la página, indica el nombre de dicha subcarpeta, seguido de una barra diagonal (/) y del nombre de la imagen.

Una imagen de unas montañas.

Imagen insertada con una dirección absoluta.

Se muestra una imagen que no está en nuestro ordenador ni en nuestro espacio web, sino directamente en Internet, en este caso en Pixabay, un sitio con imágenes gratuitas.

Una imagen de ponga

Texto alternativo.

Cada imagen debe acompañarse siempre de un texto que será mostrado en el caso de que la imagen no esté disponible y que sirve además como descripción en aplicaciones lectoras para personas con discapacidad visual. El texto alternativo se inserta con el atributo alt.

Una imagen de una flor.

Modificar tamaño.

Con los atributos width (ancho) y height (alto); podemos indicar explícitamente la anchura y altura que tendrá una imagen. Si únicamente se define la anchura, la altura será proporcional. El valor, entre comillas, puede venir expresado en dos formas diferentes:

  1. Píxeles: si el valor indicado no lleva ningún tipo o las letras px, estamos indicando que la medida es en píxeles. width="400px"
  2. Porcentaje: el tamaño puede estar expresado en relación con su valor original, como un porcentaje. Lo indicamos con el signo %. Por ejemplo, si width="50%" la imagen tendría la mitad de su tamaño original.

CSS (Cascading Style Sheets) Hojas de Estilo en Cascada

Inline Styles

En este caso los estilos se encuentran mezclados con el código html.

Etiqueta style

Los estilos “inline” tienen muchas limitaciones y hay que procurar evitarlos, simplemente si quisiéramos cambiar el tipo de letra de los títulos2, habría que ir haciéndolo de uno en uno y eso sería mucho trabajo para un sitio web grande. Para evitar esto, podemos “centralizar” los estilos insertando la etiqueta style dentro de la cabeza (head) del HTML.

El archivo CSS

No mezclar.

Lo mejor es separar el código HTML de los estilos, de esta forma es mucho más fácil leer los archivos HTML, además un mismo archivo CSS puede utilizarse para dar estilo a varios archivos HTML.

Enlazar el archivo HTML con el CSS

Si el archivo CSS está guardado en el mismo directorio o carpeta que el archivo HTML, hay que especificar una dirección relativa, como la siguiente: link rel="stylesheet" type="text/css" href="nombre _del _archivo.css"