2.1 Hojas de estilo externas
Conectar CSS (Cascading Style Sheets) a un documento HTML permite estilizar las páginas web, mejorando su apariencia y usabilidad. Existen varias formas de conectar CSS a HTML, cada una de las cuales tiene sus beneficios y es adecuada para diferentes situaciones.
Formas de conectar CSS:
- Hojas de estilo externas (External Stylesheets)
- Hojas de estilo internas (Internal Stylesheets)
- Estilos en línea (Inline Styles)
Hojas de estilo externas (External Stylesheets)
Las hojas de estilo externas son archivos CSS separados que se conectan al documento HTML mediante la etiqueta <link>. Este método permite separar los estilos de la estructura del documento, lo que facilita la gestión de estilos y la reutilización de archivos CSS en varias páginas.
Ventajas:
- Facilidad para gestionar estilos
- Reutilización de estilos en varias páginas
- Mejora en el caché y el rendimiento
Sintaxis:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de hoja de estilo externa</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Encabezado</h1>
<p>Texto</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de hoja de estilo externa</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Encabezado</h1>
<p>Texto</p>
</body>
</html>
Ejemplo de archivo CSS(styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Hojas de estilo internas (Internal Stylesheets)
Las hojas de estilo internas se incluyen dentro del mismo documento HTML en la sección <head> utilizando la etiqueta <style>. Este método es útil cuando necesitas aplicar estilos solo a una página o cuando el archivo externo no está disponible.
Ventajas:
- Facilidad de uso para una sola página
- No se necesita un archivo adicional
Sintaxis:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de hoja de estilo interna</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Encabezado</h1>
<p>Texto</p>
</body>
</html>
2.3 Estilos en línea (Inline Styles)
Los estilos en línea se aplican directamente a los elementos HTML mediante el atributo style. Este método es útil para pruebas rápidas o cuando necesitas cambiar el estilo de un solo elemento.
Ventajas:
- Aplicación rápida y específica de estilos
- Adecuado para cambios dinámicos a través de JavaScript
Desventajas:
- Dificultad para gestionar estilos con una gran cantidad de elementos
- Dificultad para reutilizar estilos
Sintaxis:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de estilos en línea</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Encabezado</h1>
<p style="color: #666; background-color: #f4f4f4;">Texto</p>
</body>
</html>
Ejemplo de uso de todos los métodos en una página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de todos los métodos de conexión CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Encabezado</h1>
<p style="color: #666;">Este texto está estilizado utilizando estilos en línea.</p>
</body>
</html>
2.4 Orden de prioridad de los estilos
Cuando los estilos se conectan de varias maneras, su prioridad de aplicación se determina de la siguiente manera:
- Estilos en línea (Inline Styles) tienen la mayor prioridad
- Hojas de estilo internas (Internal Stylesheets) tienen el siguiente nivel de prioridad
- Hojas de estilo externas (External Stylesheets) tienen la menor prioridad
Si varios estilos se aplican a un mismo elemento con la misma prioridad, la prioridad se determina por la especificidad del selector y el orden de declaración.
Ejemplo de prioridad de estilos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de prioridad de estilos</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Estilo interno */
}
</style>
</head>
<body>
<p style="color: red;">Este texto será rojo debido a la prioridad del estilo en línea.</p>
</body>
</html>
GO TO FULL VERSION