Unidad 4. Formatos (VII)

4.11. Estilos CSS

Detrás de los documentos de Google Docs se esconde el código HTML típico de una Web, ya que realmente es lo que es. Si estamos familiarizados con este código y con las hojas de estilo CSS, podemos editarlos y manipular el formato, insertando otros elementos html que no se encuentran en los menús de Google Docs.

Para acceder al código HTML y CSS de la página, en el menú Editar tenemos los comandos Editar HTML y Editar CSS.

Por ejemplo, aquí vemos un texto y el código HTML generado por Google Docs.

Las etiquetas son lo que va entre los signos < y > . Verás que hay etiquetas similares por parejas, pero una precedida por la barra /. La que nos interesa es la que no tiene esta barra, que es la etiqueta de apertura. Nosotros podríamos añadir el estilo en la propia etiqueta u otros atributos. El que más útil nos puede resultar es el atributo class, que podemos añadir antes del cierre de la etiqueta (>) con el formato class=nombre_que_queramos.

Por ejemplo, si a un encabezado dos le queremos asignar una clase cambiaríamos <h2> por <h2 class="miclase">.

Después en la hoja de estilo, podemos identificar por la etiqueta (etiqueta {atributos de estilo}), por la clase (.nombre_clase{atributos de estilo}) o por el id, aunque como es único nos resultará más como utilizar la barra de herramientas.

Por ejemplo, hemos editado la hoja de estilo para dar estilo a los distintos tipos de etiquetas. El resultado es el que ves a continuación.

O por ejemplo, si hemos creado una clase, llamada miclase, y queremos que se muestre de color rojo, añadiríamos a la hoja miclase { color: red; }

Esto nos permite una gran versatilidad a la hora de aplicar formatos. No obstante, no vamos a profundizar en el tema, ya que no es el objetivo de curso. Si quieres aprender más sobre HTML y CSS puedes visitar el Curso de Páginas Web o el Curso de HTML en www.aulaclic.es.

Ejercicio propuesto de la Unidad 4

Prueba evaluativa de la Unidad 4