LabEx
Log InJoin Free

Beginner's Guide to CSS Fundamentals

Beginner

This tutorial is from open-source community. Access the source code

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.

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 beginner level lab with a 95% completion rate. It has received a 100% positive review rate from learners.

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.