Creando el CSS | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

En esta clase, comenzamos a estilizar nuestro proyecto con CSS.

Lo primero que hicimos fue crear un archivo CSS llamado style.css en nuestro VS Code.

En el archivo CSS, cambiamos el color de fondo del body a negro.

Sin embargo, esto no funcionó inicialmente porque el archivo HTML no estaba vinculado al CSS.

Para conectar el HTML y el CSS, agregamos una etiqueta en el index.html que apuntaba al archivo style.css.

Después de hacer esto, el fondo se volvió negro, pero las letras seguían siendo negras.

Por lo tanto, también cambiamos el color de las letras a blanco en el archivo CSS.

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <head>
        <title>TITULO: Mi Primer Pagina HTML</title>
    </head>
    <main>
        <h1>
            Eleve tu negocio digital a otro nivel <strong>con un Front-end
            de calidad!</strong>
        </h1>
        <p>
            ¡Hola! Soy Ana García, desarrolladora Front-end con 
            especialización en React, HTML y CSS. Ayudo a pequeños negocios y 
            diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
        </p>
        <a href="https://www.instagram.com/">Instagram</a>
        <a href="https://www.github.com/">GitHub</a>
        <img src="imagen.png" alt="Imagen de Ana Garcia trabajando.">    
    </main>
    <footer>
        <p>© 2024 Primer Pagina HTML</p>
    </footer>
 
</body>
</html>

archivo style.css

body {
    background-color: black;
    color: white;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}