¿Qué es una hoja de estilo externa?

Una hoja de estilo externa define cómo se ve una página web. Puede utilizar una hoja de estilo para especificar cosas como el tamaño, el color y la fuente del texto, el color de los botones o la posición de los menús y las barras laterales.

Código utilizado en una hoja de estilo externa

Hay dos tipos de código que se utilizan para crear una página web básica:

• Lenguaje de marcado de hipertexto (HTML): Define el contenido de una página web. Contiene el texto real con una marca que identifica si las secciones del texto son párrafos, encabezados o listas. También contiene enlaces a imágenes que aparecen en la página e hipervínculos a páginas externas.
• Hojas de estilo en cascada (CSS): Un lenguaje de codificación utilizado para especificar cómo se muestra el contenido. Define cómo se muestra cada tipo de elemento de texto y puede mostrar el mismo tipo de elemento de manera diferente si pertenecen a diferentes clases o tienen una identificación diferente. Esto permite que elementos como menús y listas se comporten de manera muy diferente dentro del texto principal de una página web.

En general, separar el estilo del contenido es una buena idea, ya que te permite concentrarte en una cosa a la vez. Esto se vuelve aún más importante en un equipo, ya que permite que los especialistas en contenido y presentación trabajen de forma independiente del resto. Quizás lo más importante es que también permite aplicar un solo conjunto de instrucciones de estilo de manera uniforme en todo un sitio web.

La presentación visual del sitio web se puede cambiar desde una sola hoja de estilo sin editar cada página web individualmente. Para sitios web más grandes y complejos, se pueden usar varias hojas de estilo para controlar el texto, los menús y las divisiones dentro de las páginas. Esta colección de hojas de estilo puede denominarse "tema".

Usar un CSS externo para vincular HTML a CSS

Es posible incluir el estilo CSS directamente dentro del HTML de una página web, usando CSS para diseñar individualmente cada párrafo y encabezado de manera diferente. Este tipo de estilo en línea generalmente no es una buena idea, ya que pierde todos los beneficios de separar el estilo del contenido. En particular, pierde la capacidad de actualizar todo su sitio web de manera consistente desde un solo archivo.

La forma correcta de aplicar un estilo a un sitio web es crear un solo archivo de hoja de estilo externo para cada tipo de estilo que desee aplicar, luego hacer referencia a estos archivos desde cada archivo HTML. Por ejemplo, puede tener las siguientes hojas de estilo externas:

• text.css
• menus.css
• layout.css

Puede realizar cambios en el código CSS dentro de esas hojas de estilo externas sin cambiar su nombres de archivo, es decir, las referencias a esos archivos, dentro del HTML de todas sus páginas web, no serán cambió.

Ejemplos de HTML y CSS

Una página HTML muy simple podría contener el siguiente código:

 ¡Todo sobre mi!

Esta página trata sobre mí y por qué soy increíble.

Se puede vincular una hoja de estilo externa simple a esta página agregando el siguiente código debajo del archivo.

type = "texto / css"
href = "myStyle.css" />

Cree otro archivo de texto llamado myStyle.css, ubicado en la misma carpeta que index.html que contiene el siguiente código:

h1 {
color: # FF7643;
font-face: Arial '
}
pag {
color rojo;
tamaño de fuente: 1.5em;
}