CSS, u hojas de estilo en cascada, es lo que se utiliza en el diseño de sitios web modernos para aplicar el aspecto visual a una página. Mientras que HTML crea la estructura de la página y Javascript puede manejar comportamientos, el aspecto de un sitio web es el dominio de CSS. Cuando se trata de estos estilos, la mayoría de las veces se aplican utilizando hojas de estilo externas, pero también se pueden aplicar estilos CSS a un único elemento específico utilizando lo que se conoce como «estilos en línea».
Los estilos en línea son estilos CSS que se aplican directamente en el HTML de la página. Este enfoque tiene ventajas y desventajas. Primero, veamos exactamente cómo se escriben estos estilos.
Cómo escribir un estilo en línea
Para crear un estilo CSS en línea, empiece escribiendo su propiedad de estilo de forma similar a como lo haría en una hoja de estilo, pero tiene que ser todo de una línea. Separe varias propiedades con punto y coma como lo haría en una hoja de estilo.
background:#ccc; color:#fff; borde: negro sólido 1px;>
Coloca esa línea de estilos dentro del atributo style del elemento que quieres que sea estilizado. Por ejemplo, si desea aplicar este estilo a un párrafo en su HTML, ese elemento tendría el siguiente aspecto:
En este ejemplo, este párrafo en particular aparecería con un fondo gris claro (eso es lo que #ccc renderizaría), texto negro (del color #000), y con un borde negro sólido de 1 píxel alrededor de los cuatro lados del párrafo.
Ventajas de los estilos en línea
Gracias a la cascada de hojas de estilo en cascada, los estilos en línea tienen la mayor prioridad o especificidad en un documento. Esto significa que se van a aplicar sin importar qué más se dicte en su hoja de estilo externa (con la única excepción de los estilos a los que se les dé la declaración !importante de esa hoja, pero esto no es algo que se deba hacer en los sitios de producción si se puede evitar). Los únicos estilos que tienen mayor precedencia que los estilos en línea son los estilos de usuario aplicados por los propios lectores. Si tiene problemas para que los cambios se apliquen, puede intentar establecer un estilo en línea en el elemento. Si los estilos todavía no se muestran usando un estilo en línea, sabes que hay algo más en marcha.
Los estilos en línea son fáciles y rápidos de añadir y no tiene que preocuparse por escribir el selector CSS adecuado, ya que está añadiendo los estilos directamente al elemento que desea cambiar (ese elemento reemplaza esencialmente al selector que escribiría en una hoja de estilo externa). No es necesario crear un documento completamente nuevo (como con las hojas de estilo externas) o editar un nuevo elemento en la cabecera del documento (como con las hojas de estilo internas). Sólo tiene que añadir el atributo de estilo que es válido en casi todos los elementos HTML. Todas estas son razones por las que usted puede estar tentado a usar estilos en línea, pero también debe ser consciente de algunas desventajas muy significativas de este enfoque.
Desventajas de los estilos en línea
Debido a que los estilos en línea son los más específicos en la cascada, pueden anular cosas que usted no tenía la intención de que lo hicieran. También niegan uno de los aspectos más poderosos de CSS - la capacidad de crear estilos de muchas y muchas páginas web desde un archivo CSS central para hacer que las futuras actualizaciones y cambios de estilo sean mucho más fáciles de gestionar.
Si sólo tuviera que utilizar estilos en línea, sus documentos se inflarían rápidamente y serían muy difíciles de mantener. Esto se debe a que los estilos en línea deben aplicarse a todos los elementos en los que se deseen. Así que si quieres que todos tus párrafos tengan la familia tipográfica "Arial", tienes que añadir un estilo en línea a cada etiqueta en tu documento. Esto añade trabajo de mantenimiento para el diseñador y tiempo de descarga para el lector, ya que necesitaría cambiar esto en todas las páginas de su sitio para cambiar esa familia de fuentes. Alternativamente, si utiliza una hoja de estilo separada, podrá cambiarla en un solo lugar y hacer que cada página reciba esa actualización. Verdaderamente, esto es un paso atrás en el diseño web - ¡retrocede a los días de la etiqueta!
Otra desventaja de los estilos en línea es que es imposible modelar pseudo-elementos y clases con ellos. Por ejemplo, con las hojas de estilo externas, puede darle estilo al color visitado, flotante, activo y de enlace de una etiqueta de anclaje, pero con un estilo en línea, todo lo que puede hacer es darle estilo al enlace en sí, porque eso es a lo que se adjunta el atributo de estilo.
En última instancia, recomendamos no usar estilos en línea para sus páginas web porque causan problemas y hacen que las páginas trabajen mucho más para mantener. El único momento en que los usamos es cuando queremos comprobar un estilo rápidamente durante el desarrollo. Una vez que lo tenemos buscando correctamente ese elemento, lo movemos a nuestra hoja de estilo externa.
