Estilos en línea

Abre el archivo de texto de la plantilla HTML que creaste al principio del curso. Haz clic en File > Save As en el Bloc de notas. Guarda el archivo con el nombre newpage.html . No te olvides de cambiar el Guardar como tipo a Todos los archivos antes de hacer clic en el botón Guardar, si utilizas Windows.

Añade algo de texto para la etiqueta TITLE. Añade un encabezado H1, con algún texto entre las dos etiquetas H1. Ahora añade un párrafo de texto debajo del encabezado H1. Para crear un Estilo en línea, haz clic después del primer H1. Toca la barra espaciadora del teclado. Escribe lo siguiente:

H1 style=text-align:center ;

Asegúrate de que no hay espacio después del colon y antes de la palabra "centro".

Su código HTML debería ser algo parecido al nuestro abajo:

Estilos en línea y empotrados

(Una cosa que los usuarios del inglés británico deben tener en cuenta es que la palabra "centro" se escribe de dos maneras diferentes. El inglés americano se usa en HTML, así que es "er" en lugar de "re").

Cuando hayas terminado de escribir el código, visualiza los resultados en tu navegador. Deberías ver que el encabezado está centrado en tu página:

Estilos en línea y empotrados

Así que si quieres centrar las cosas en una página, necesitas usar la propiedad text-align. Después de dos puntos, se añade el valor. En este caso (etiqueta_13) centrar .

(En versiones anteriores de HTML se podían utilizar las etiquetas HTML <CENTER Sin embargo, en la nueva versión de HTML, la versión 5, esta etiqueta ahora se retira (desaprobada).

Ejercicio
Además de usar el centro después de la propiedad text-align: puedes usar lo siguiente: izquierda, derecha. Pruébelos usted mismo. Simplemente reemplace la palabra centro con una de las otras opciones de alineación de texto.

Estilos incrustados

Como se mencionó, los Estilos Embebidos van en la sección CABEZA de su código. Para probarlos, añade el siguiente CSS resaltado a tu código:

Estilos en línea y empotrados

Así que la alineación del texto que hemos añadido es para alinearlo correctamente. Sin embargo, el estilo en línea es para la alineación central. Entonces, ¿cuál se ejecuta?

Guarda tu trabajo y actualiza la página de tu navegador. No verás ningún cambio. Eso es porque el Estilo Inline anulará el incrustado en la sección CABEZA.

Eliminar el estilo en línea para el encabezamiento H1. Entonces sólo deberías tener esto para el encabezado H1:

<H1 ]; Encabezamiento centrado </H1 ];

Guarda tu trabajo y actualiza la página web en tu navegador. Debería verse así, ahora:

Estilos en línea y empotrados

El rumbo está alineado a la derecha.

Ejercicio
Cambie el valor de la propiedad de texto a Centro. Guarda tu trabajo y actualiza la página en tu navegador.

En la próxima lección, aprenderás a manejar fuentes con CSS.

| Usando selectores CSS | CSS y fuentes

Recomendado para ti