Mastering Custom Text Selection with CSS

Introduction

In this lab, we will explore the world of CSS programming and learn how to style web pages using various CSS properties and selectors. The purpose of this lab is to provide hands-on experience to beginners and intermediate level developers to enhance their skills in creating visually appealing web pages. Through this lab, you will also learn how to troubleshoot common CSS issues and use best practices in your coding.

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

Custom Text Selection

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

To modify the style of selected text, utilize the ::selection pseudo-selector. Here's an example code snippet to select and style text within a paragraph element:

<p class="custom-text-selection">Select some of this text.</p>

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

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