Your First CSS Lab: Mastering the Basics

Introduction

🧑‍💻 New to Linux or LabEx? We recommend starting with the Quick Start with Linux course.

Hi there, welcome to LabEx! In this first lab, you'll learn the classic "Hello, World!" program in CSS.

Click the Continue button below to start the lab.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a intermediate level lab with a 79% completion rate. It has received a 99% positive review rate from learners.

Hello CSS

We have already created index.html file in the WebIDE. Let's open it and add some HTML code.

<!doctype html>

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

Then click on the bottom right corner Go Live button, this will run a local web server on 8080 port.

Now, you can switch to the Web 8080 Tab, and click the refresh button to see the changes.

Add CSS

Let's add some CSS code to the index.html file.

<!doctype html>

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

Switch to the Web 8080 Tab, and click the refresh button to see the changes.

Using External CSS

We have already created style.css file in the WebIDE. Let's open it and add some CSS code.

h1 {
  color: red;
}

p {
  color: blue;
}

Then, change the index.html file to use the external CSS file.

<!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>

Switch to the Web 8080 Tab, and click the refresh button to see the changes.

Summary

Congratulations! You have completed your first LabEx Lab.

If you want to learn more about LabEx and how to use it, you can visit our Support Center . Or you can watch the video to learn more about LabEx.

Programming is a long journey, but Next Lab is just one click away. Let's do it!

Your First CSS Lab

Introduction

The keyboard is waiting. Let’s go.

Hello CSS

Add CSS

Using External CSS

Summary

Reading won’t teach your fingers to code.