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.

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>

HTML code in WebIDE

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.

Web 8080 Tab View

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.

CSS styled Hello HTML

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.

External CSS applied webpage

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!