ESTILOS EN HTML

Aplicar Estilo en HTML es cambiar la forma en que, por defecto, se muestran los elementos en el navegador web.

Existen tres métodos para aplicar Estilo en HTML:

PRIMERO: Inline

Aplicar el Estilo en la misma línea de código: Estilo en línea o Inline; emplea el atributo style.

Estilo por defecto, sin cambios:

Se ha aplicado Estilo Inline a través del atributo style. Note que se modifica la etiqueta de apertura del elemento al que se va a aplicar Estilo. Recuerde que el contenido de ese elemento se verá afectado.

SEGUNDO: Internal

Definir el Estilo con style no como atributo sino como elemento: Estilo interno o Internal; emplea, insisto, el elemento style, y se define desde la sección de cabecera - head.

Estilo por defecto, sin cambios:

Observe con atención que las etiquetas de apertura de los elementos h1 y p no han sido modificadas; sin embargo su apariencia no es la usual. Se ha definido el estilo desde la sección de cabecera (elemento head) con una codificación "diferente". En este caso, todas las veces que el elemento h1 sea empleado se observará de color azul porque así se ha definido el estilo en la cabecera; de igual modo, toda vez que se emplee el elemento p se apreciará de color rojo, con un tamaño de fuente de 20 puntos, además de la tipografía itálica. Todo esto se ha definido una sola vez desde la sección de cabecera (head) del documento html.

COMBINANDO EL ELEMENTO SPAN Y EL ATRIBUTO CLASS

Observe que:

azul, rojo e ita, definidos en la sección de cabecera por el "programador" (usted), indican el estilo que será aplicado como valor del atributo class.
El contenido del elemento span es el afectado por el estilo asignado a través de azul, rojo e ita.
El carácter punto (.) que antecede a azul, rojo e ita no puede omitirse por haber sido definido por usted (programador).

TERCERO: External

El estilo External se codifica como CSS en un archivo externo que se vincula al documento HTML en la sección de encabezado:

El elemento link vincula el documento HTML con el archivo externo, que debe guardarse con la extensión .css

La relación que establece el atributo rel entre el documento HTML y el archivo externo es hoja de estilo.

Afiance sus conocimientos con este recurso interactivo.