CSS externo

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 8 de 76.

CSS Externo es un método para añadir estilos CSS a un documento HTML colocándolos en un archivo CSS separado y vinculando ese archivo al documento HTML utilizando la etiqueta <link>. Este enfoque le permite aplicar los mismos estilos a múltiples páginas HTML, lo que facilita el mantenimiento y la actualización del diseño de su sitio web. El CSS externo es ideal para proyectos grandes donde la consistencia y la eficiencia son cruciales.

Aquí se explica cómo usar CSS externo:

Crea un archivo CSS (por ejemplo, styles.css) con tus reglas de CSS:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. Vincula el archivo CSS a tu documento HTML añadiendo una etiqueta <link> en la sección <head>:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

En este ejemplo, la etiqueta <link> conecta el archivo styles.css al documento HTML. El atributo rel especifica la relación entre el documento HTML y el archivo vinculado (hoja de estilo), y el atributo href especifica la ruta al archivo CSS.

Desafío

Fácil

Se te proporcionan archivos HTML y CSS (index.html y styles.css), ¡añade una etiqueta link en el archivo HTML para conectar los archivos y añadir los estilos al archivo HTML!

Hoja de referencia

El CSS externo te permite colocar estilos CSS en un archivo separado y vincularlo a documentos HTML utilizando la etiqueta <link>.

Crea un archivo CSS con tus estilos:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

Vincula el archivo CSS en la sección <head> del HTML:

<link rel="stylesheet" href="styles.css">

El atributo rel especifica la relación (stylesheet) y href especifica la ruta al archivo CSS.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>