Curso de HTML5 y CSS3: El archivo .css

Cómo crear un archivo .css

Crear un archivo CSS es un proceso sencillo que puedes realizar con cualquier editor de texto. A continuación, se detallan los pasos para hacerlo:

Abre tu editor de código favorito (como Visual Studio Code o Sublime Text).
Crea un nuevo archivo y guárdalo con la extensión .css. Por ejemplo, puedes llamarlo estilos.css.
Dentro de este archivo, puedes comenzar a escribir tus reglas CSS.

Un ejemplo básico de un archivo estilos.css sería:

/* estilos.css */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

Vinculando el archivo CSS a tu documento HTML

Una vez que hayas creado el archivo CSS, el siguiente paso es vincularlo a tu documento HTML para que los estilos se apliquen correctamente. Este proceso se lleva a cabo mediante la etiqueta <link> en la sección <head> de tu HTML:

<!-- index.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="estilos.css"> <!-- Vinculación del CSS -->
</head>
<body>
    <h1>Bienvenido a mi página web</h1>
</body>
</html>

Asegúrate de que la ruta en el atributo href sea correcta para que el navegador pueda encontrar tu archivo CSS.

Alternativas a la vinculación del CSS

Además de vincular un archivo CSS externo, existen otras maneras de aplicar estilos a tus elementos HTML. Aquí te presentamos dos alternativas:

1. Etiqueta <style>

La etiqueta <style> permite incluir directamente CSS dentro del documento HTML. Este método es útil para estilos rápidos o proyectos pequeños. Aquí tienes un ejemplo:

<!-- index.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página Web</title>
    <style>
        body {
            background-color: #e0e0e0;
        }
        h1 {
            color: #444;
        }
    </style>
</head>
<body>
    <h1>Bienvenido a mi página web</h1>
</body>
</html>

2. Atributo style=»»

Otra forma de aplicar estilos es utilizando el atributo style directamente en un elemento HTML. Este enfoque se usa comúnmente para cambios rápidos, pero no es recomendable para proyectos a gran escala debido a su falta de mantenimiento y escalabilidad.

Aquí un ejemplo:

<!-- index.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página Web</title>
</head>
<body>
    <h1 style="color: #555; background-color: #fafafa;">Bienvenido a mi página web</h1>
</body>
</html>

Conclusión

En resumen, al comenzar con HTML5 y CSS3, aprender a crear y vincular un archivo CSS es un paso fundamental que te ayudará a mantener la separación entre contenido y presentación, facilitando el mantenimiento de tus proyectos web. Además, al contar con alternativas como la etiqueta <style> y el atributo style, puedes adaptar tu enfoque según sea necesario.

blog.vermiip.es