Una guía rápida para crear una hoja de estilo externa en CSS

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
VALORACIÓN DEL ARTÍCULO:
5/5


Los sitios web son una combinación de estilo y estructura, y en la web actual, es una buena práctica mantener estos dos aspectos de un sitio separados el uno del otro.

HTML siempre ha sido lo que proporciona a un sitio su estructura. En los primeros días de la Web, HTML también contenía información de estilo. Elementos como la etiqueta estaban en todo el código HTML, añadiendo información de apariencia junto con información estructural. El movimiento de los estándares web nos empujó a cambiar esta práctica y a introducir toda la información de estilo en CSS u hojas de estilo en cascada. Llevando esto un paso más allá, las recomendaciones actuales son que usted utilice lo que se conoce como una “hoja de estilo externa” para sus necesidades de diseño de su sitio web.

Ventajas y desventajas de las hojas de estilo externas

Una de las mejores cosas de las Hojas de Estilo en Cascada es que puede utilizarlas para mantener la coherencia de todo su sitio. La forma más fácil de hacerlo es enlazar o importar una hoja de estilo externa. Si utiliza la misma hoja de estilo externa para cada página de su sitio, puede estar seguro de que todas las páginas tendrán el mismo estilo. También puede facilitar la realización de cambios para el futuro. Dado que todas las páginas utilizan la misma hoja de estilo externa, cualquier cambio en esa hoja afectará a todas las páginas del sitio. Esto es mucho mejor que tener que cambiar cada página individualmente!

Ventajas de las hojas de estilo externas

  • Puede controlar el aspecto de varios documentos a la vez.
    • Esto es especialmente útil si usted trabaja con un equipo de personas para crear su sitio web. Muchas reglas de estilo pueden ser difíciles de recordar, y aunque tenga una guía de estilo impresa, es ineficaz y tedioso hojearla continuamente para determinar si el texto de ejemplo debe escribirse en letra Arial de 12 puntos, o como mensajero de 14 puntos. Al tener todo en un solo lugar, y puesto que ese lugar es también donde usted haría los cambios, puede hacer que el mantenimiento sea mucho más fácil.
  • Puede crear clases de estilos que se pueden utilizar en muchos elementos HTML diferentes.
    • Si a menudo utiliza un estilo de fuente determinado para dar énfasis a varias cosas en su página, puede utilizar un atributo de clase que configure en su hoja de estilo para obtener este aspecto, en lugar de definir un estilo específico para cada instancia del énfasis.
  • Puedes agrupar fácilmente tus estilos para que sean más eficientes.
    • Todos los métodos de agrupación disponibles para CSS se pueden utilizar en hojas de estilo externas, lo que le proporciona más control y flexibilidad en sus páginas.

Desventajas de las Hojas de Estilo Externas

  • Las hojas de estilo externas pueden aumentar el tiempo de descarga, especialmente si son extremadamente grandes. Dado que el archivo CSS es un documento separado que debe ser cargado, afectará al rendimiento para realizar esa descarga.
  • Las hojas de estilo externas se agrandan muy rápidamente, ya que es difícil saber cuándo un estilo ya no está en uso porque no se elimina cuando se elimina la página. La gestión adecuada de sus archivos CSS es importante, especialmente si hay varias personas trabajando en el mismo archivo.
  • Si sólo tiene un sitio web de una sola página, puede que no sea necesario tener un archivo externo para CSS, ya que sólo tiene una página para estilizar. Muchos de los beneficios de las CSS externas se pierden cuando sólo se tiene un sitio de una página.

Cómo Crear una Hoja de Estilo Externa

Las hojas de estilo externas se crean con una sintaxis similar a la de las hojas de estilo a nivel de documento. Sin embargo, todo lo que necesita incluir es el selector y la declaración. Al igual que en una hoja de estilo a nivel de documento, la sintaxis de una regla es:

selector {propiedad : valor;}

>.

Guarde estas reglas en un archivo de texto con la extensión.css. Esto no es necesario, pero es un buen hábito para entrar, por lo que puede reconocer inmediatamente sus hojas de estilo en un listado de directorios.

Una vez que tenga un documento de hoja de estilo, deberá vincularlo a sus páginas Web. Esto se puede hacer de dos maneras:

  1. Enlace
    1. Para enlazar una hoja de estilo, se utiliza la etiqueta HTML. Tiene los atributos rel , type , y href . El atributo rel indica lo que está enlazando (en este caso una hoja de estilo), el tipo define el tipo MIME-Type para el navegador, y el href es la ruta al archivo.css.
  2. Importación
    1. Usaría una hoja de estilo importada dentro de una hoja de estilo a nivel de documento para poder importar los atributos de una hoja de estilo externa sin perder ningún documento específico. Se llama de forma similar a la llamada de una hoja de estilo enlazada, sólo que debe llamarse dentro de una declaración de estilo a nivel de documento. Puede importar tantas hojas de estilo externas como necesite para mantener su sitio Web.

Original de Jennifer Krynin. Editado por Jeremy Girard el 8/8/17

Deja un comentario

TAMBIÉN TE INTERESA

iPhone y Air Pods.

Las características destacadas de iOS 14

Cada año en septiembre, Apple lanza una nueva versión de su sistema operativo – iOS 14 –, el año pasado sucedió el 16 de septiembre. El nombre “iOS” se compone de la típica “i” de Apple y la abreviatura “OS”, que significa “sistema operativo”. En principio, iOS no es más que un sistema operativo estándar para iPhones.

Todo lo que debes saber del nuevo iPhone 12

Las características destacadas del nuevo iPhone 12

Probablemente hay pocos eventos que los fanáticos de los teléfonos inteligentes esperan tanto como el lanzamiento de nuevos dispositivos. Los partidarios de Apple, en particular, están en llamas cuando el próximo iPhone está a punto de ser lanzado. Como ninguna otra compañía de teléfonos inteligentes, Apple sabe cómo presentar a sus usuarios nueva tecnología en grandes notas

tendencias en low code

Tendencias en el área de Low Code

¿Qué pasará con la transformación digital en 2021 y qué papel jugarán las tecnologías de low code en esto? hemos identificado las tendencias con miras al desarrollo de software basado en modelos. ¿Será el 2021 el “año de Low-Code “? Al menos los analistas estiman que tres cuartas partes de todas las aplicaciones comerciales de este año se desarrollarán

seguridad y mantenimiento smartphone

Mantenimiento smartphone: consejos para un mejor cuidado y seguridad de tu teléfono

Hablamos de consejos de mantenimiento smartphone. Ya sea en el trabajo o en la vida privada, la seguridad de tu smartphone se ha convertido en una parte integral de muchas áreas. En los servicios de mensajería se envían mensajes privados y Clouds almacena fotos personales. Para no perder esta información confidencial, los propietarios de teléfonos móviles deben proteger sus teléfonos inteligentes. No se debe

tecnología QLED de Samsung

Televisores QLED, OLED, Micro-LED y Mini-LED

Los sistemas OLED, QLED, etc. ofrecen una excelente nitidez de imagen con detalles impresionantes, colores brillantes y un contraste gigantesco del negro profundo al blanco brillante: los televisores han alcanzado un nivel de calidad notable. Varias tecnologías de pantalla compiten por la mejor calidad de imagen. Las primeras pantallas planas tuvieron que ponerse al día en

Cómo instalar Linux junto con Windows

Cómo instalar Linux junto con Windows en 8 pasos

¿Te gustaría saber cómo instalar Linux en Windows, pero solo tienes una computadora? No hay problema, ambos funcionan en paralelo, con muy poco esfuerzo. Ejecutar Linux y Windows en la misma máquina es bastante fácil: simplemente eliges qué sistema iniciar al arrancar. Todos los pasos necesarios se pueden encontrar aquí muy sencillamente explicados. Índice de contenidos1 ¿Cómo