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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") subgraph Lab Skills css/selectors -.-> lab-92744{{"`Your First CSS Lab`"}} end

Hello CSS

We have already created index.html file in the Web IDE. 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 Web IDE. 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.