Saltar al contenido principal
Codigo Heroe
Lista de tareas
HTML y CSS: profundización en la sintaxis1/12
A la lista de tareas
  1. 1. La conexión con la hoja de estilos
  2. 2. Etiquetas HTML
  3. 3. Anidamiento de etiquetas
  4. 4. Atributos de las etiquetas
  5. 5. Qué es CSS
  6. 6. Valores de las propiedades CSS
  7. 7. Propiedades de las reglas CSS
  8. 8. Selectores de tipo y reglas CSS
  9. 9. Selectores de clase
  10. 10. Varias clases en un elemento
  11. 11. Reemplazar estilos con la cascada
  12. 12. Estilos para una clase adicional
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

La conexión con la hoja de estilos

¡Hola! Qué bueno que quieras aprender a crear sitios web. En esta parte vamos a construir páginas web con HTML y CSS.

Una buena manera de empezar es cambiar el código y ver qué pasa. Y justo tenemos a mano un sitio que funciona y con el que podemos experimentar.

Si vamos a cambiar algo, hagámoslo a lo grande para que el daño el cambio se note. Primero elimina esta línea y después veremos para qué servía:

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

¡Vamos! Elimina ese fragmento del editor de la izquierda y observa qué cambia en el navegador de la derecha.

  • index.html
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Tienda de artículos para el hogar</title> <!-- Elimina la línea de abajo --> <link rel="stylesheet" href="style.css"> </head> <body> <header class="site-header"> <div class="container"> <h1>Gloevk</h1> <p class="description">Artículos para el hogar con envío a todo el planeta</p> </div> </header> <section class="features"> <h2>¿Qué necesitas para un hogar acogedor?</h2> <p class="feature-furniture">Muebles y herrajes</p> <p class="feature-lighting">Lámparas de mesa y de pie</p> </section> <section class="advantages"> <h2>¿Qué nos distingue de la competencia?</h2> <ul class="advantages-list"> <li>Informes diarios sobre el avance del trabajo</li> <li>Usamos solo materiales naturales</li> <li>Armamos los muebles por ti</li> <li>Servicio de garantía gratuito durante 10 años</li> </ul> </section> <footer class="site-footer"> <div class="container"> <p class="copy">© Cupcake, 2020</p> <p>Tienda de artículos para el hogar</p> </div> </footer> </body> </html>

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Elimina de la línea 7 el código <link rel="stylesheet" href="style.css">.
    Codigo Heroe

    © 2023-2026, codigoheroe.com