Estilos Embebidos

Concepto de Estilos Embebidos

¿Qué son los Estilos Embebidos?

Un estilo embebido es una manera de implementar estilos en un documento HTML en la que el código CSS se coloca en la cabecera del documento. Existen diferentes maneras de aplicar estilos a un documento HTML de acuerdo al método que se quiera utilizar y a los resultados que se quieran conseguir:

  • Aplicación en línea: es el método más tradicional. Implica aplicar el código CSS en las líneas de HTML.
  • Aplicación de estilo interna o embebido: se crea una cabecera para el documento, antes del contenido, y se coloca allí, justo al principio, todo el código CSS.
  • Aplicación de estilo externa: se crea un archivo de extensión CSS independiente del documento, donde se encuentra todo el código.

Muchos son los que dicen que la aplicación en línea ya es obsoleta, y lo cierto es que es un trabajo más complejo que un estilo embebido. Sin embargo, es un método que se sigue empleando a diario, sobre todo por los programadores más experimentados que desean tener un mayor control sobre los detalles.

Para qué sirve Estilos Embebidos

Normalmente, los navegadores atribuyen sus propios estilos por defecto al código HTML. Pero, como la mayoría de los programadores y desarrolladores saben que lo mejor es tratar de crear un estilo único para su web si quieres destacar, se emplea un código CSS. Este código sobrescribe los estilos por defecto del navegador, reemplazándolos con estilos personalizados.

Las siglas CSS significan Cascade Style Sheet (Hoja de Estilos en Cascada). Este nombre se debe a que es un código que aplica diferentes estilos definidos por el programador en cascada, es decir, desde las capas más superficiales del código hacia las más profundas. Es por esto que, cuando se aplican estilos en línea, se debe escribir el código CSS para cada capa de código y para cada uno de los atributos que se quiera definir, lo cual puede ser tedioso.

Para evitar escribir el código línea por línea, se emplean estilos embebidos. Esto se realiza usando <head> al principio del documento y luego empleando la etiqueta <style type=”text/css”>. De esta manera, tendrás todos los estilos del documento definidos desde el principio, sin la necesidad de tener que agregarlos en cada línea del código.

Aunque pareciera lo mismo, en lugar de tener que modificar cada capa de código y cada elemento de manera individual, estableces cada estilo desde el principio. Es decir: si se define un estilo para los atributos h1 en el estilo embebido, este atributo afectará a todos los atributos h1 que haya en el documento, sin importar la capa de código en la que se encuentre.

Ejemplos de Estilos Embebidos

A continuación un ejemplo de cómo se vería un código de estilo embebido:

ejemplo de estilo embebido

Más información sobre Estilos Embebidos

Si quieres saber más sobre los diferentes aspectos del diseño web y programación, puedes entrar en los enlaces a continuación:

Las 10 mejores agencias de diseño web en España

¿Por qué un diseño web en WordPress es lo que estás buscando?

Todos los derechos reservados © 2019 NeoAttack | Aviso Legal | Política de Privacidad | Mapa Web