CSS Styling Techniques for Web Development

Introduction

In this lab, we will explore CSS programming by practicing different techniques to style HTML elements. Through hands-on exercises, we will learn how to use selectors, properties, and values to create visually appealing web pages. By the end of this lab, you will have a solid understanding of CSS and be able to apply it to your own web development projects.

Skills Graph

Circle

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

To create a circular shape using pure CSS, use the border-radius: 50% property to curve the element's borders. Make sure to set both width and height to the same value to ensure a perfect circle. If different values are used, an ellipse will be created instead. Here's an example code snippet:

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9c27b0;
}

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