Beginner's Guide to CSS Fundamentals

Introduction

In this lab, we will explore the fundamentals of CSS programming. This lab is designed to help beginners get started with CSS and learn how to use it to create beautiful and responsive web pages. Throughout the lab, we will cover various topics such as selectors, properties, and values, and provide hands-on exercises to reinforce the concepts.

Skills Graph

Triangle

index.html and style.css have already been provided in the VM.

To create a triangular shape with pure CSS, follow these steps:

1. Use three borders with the same border-width (20px) to create the triangle shape.
2. Set the border-color of the opposite side of where the triangle points towards to the desired color. The adjacent borders should have a border-color of transparent.
3. To adjust the size of the triangle, alter the border-width values.

Here's an example code snippet:

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Triangle lab. You can practice more labs in LabEx to improve your skills.