4.2.1. Inline CSS

Ocultar

Un ejemplo de un documento XHTML en el que se utiliza este método para incluir formatos es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Ejemplo de estilos CSS en el propio fichero</title>
    </head>
    <body>
        <h3 style="color: green;">Ejemplo del uso de estilos CSS en el propio fichero</h3>
        <p style="color: orange; font-family: Verdana;">En esta ocasi&oacute;n el p&aacute;rrafo de texto aparece de color naranja y 
         el encabezado h3 aparece en verde, mientras que en los ejemplos 
         vistos hasta ahora el color de la letra era negro.</p>
    </body>
</html> 

Ejercicio

Ocultar

Modifica el Ejercicio 1 realizado en la UD anterior con las características CSS inline:

  • Colorea la etiqueta p de un azul claro.
  • Cambia el color y el fondo de la etiqueta h1 con colores contrastados.
  • La etiqueta h6 debe estar alineada a la derecha usando CSS.
  • La etiqueta b estará en color rojo oscuro, la etiqueta i de un rojo medio y la etiqueta u de un rojo claro.
  • El fondo de la página estará de color Papaya con márgenes interiores a 20px.

Usa la página w3schools.com para obtener más información.