Mastering CSS: Vertical Stripe Background Pattern

Introduction

In this lab, we will be exploring the fundamentals of CSS programming. The purpose of this lab is to introduce learners to the basics of styling web pages with CSS. By the end of this lab, learners will have a solid understanding of how to use CSS to create visually appealing web pages.

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 94% completion rate. It has received a 100% positive review rate from learners.

Stripes Background Pattern

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

This code creates a vertical stripe pattern on a white background.

To create the pattern:

Set the background-color property to white.
Use background-image with a linear-gradient() value to create a vertical stripe.
Set the background-size property to specify the size of each stripe.
Set background-repeat to repeat to allow the pattern to fill the element.

Note that the fixed width and height of the element are for demonstration purposes only.

Here's an example code snippet:

<div class="stripes"></div>

.stripes {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 50%, #000 50%);
  background-size: 60px 60px;
  background-repeat: repeat;
}

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 Stripes Background Pattern lab. You can practice more labs in LabEx to improve your skills.