Custom Text Selection

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.

Skills Graph

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.