Tu primer laboratorio de CSS: Dominando los conceptos básicos

Introducción

🧑‍💻 ¿Eres nuevo en Linux o en LabEx? Te recomendamos comenzar con el curso Quick Start with Linux.

Hola, bienvenido a LabEx. En este primer laboratorio, aprenderás el clásico programa "Hello, World!" en CSS.

Haz clic en el botón Continuar a continuación para comenzar el laboratorio.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CSSPreprocessorsGroup -.-> css/import_and_extend("Import and Extend") subgraph Lab Skills css/selectors -.-> lab-92744{{"Tu primer laboratorio de CSS"}} css/colors -.-> lab-92744{{"Tu primer laboratorio de CSS"}} css/import_and_extend -.-> lab-92744{{"Tu primer laboratorio de CSS"}} end

Hola CSS

Ya hemos creado el archivo index.html en el WebIDE. Abrámoslo y agreguemos algo de código HTML.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
  </body>
</html>

Luego, haz clic en el botón Go Live en la esquina inferior derecha. Esto iniciará un servidor web local en el puerto 8080.

Ahora, puedes cambiar a la pestaña Web 8080 y hacer clic en el botón de actualizar para ver los cambios.

Agregar CSS

Agreguemos algo de código CSS al archivo index.html.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello HTML</h1>
  </body>
</html>

Cambia a la pestaña Web 8080 y haz clic en el botón de actualizar para ver los cambios.

Usar CSS externo

Ya hemos creado el archivo style.css en el WebIDE. Abrámoslo y agreguemos algo de código CSS.

h1 {
  color: red;
}

p {
  color: blue;
}

Luego, cambia el archivo index.html para que use el archivo CSS externo.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Cambia a la pestaña Web 8080 y haz clic en el botón de actualizar para ver los cambios.

Resumen

¡Felicidades! Has completado tu primer laboratorio en LabEx.

Si quieres aprender más sobre LabEx y cómo usarlo, puedes visitar nuestro Centro de Soporte. O puedes ver el vídeo para conocer más sobre LabEx.

La programación es un largo camino, pero el Siguiente Laboratorio está a solo un clic de distancia. ¡Empecemos!