Overview

Introduction

Welcome to the Applying Inline Styling and Style Sheets Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objective is covered in this lab:

2.1 Analyze the impact of using inline styles, internal style sheets, and external style sheets

Lab Duration

It will take approximately 20 minutes to complete this lab.

Exercise 1 - Working with Inline Styling and Style Sheets

In a single HTML page, you can use all the three ways of Cascading Style Sheets (CSS) - inline styling, internal style sheet, and external style sheet. However, there is a defined order in which the CSS is executed.

  • Inline styling has the top precedence. The browser will first apply the inline styles in case of conflict or repetition of styles.
  • External style sheet has the second precedence.
  • Internal style sheet has the lowest precedence.

Consider this example. A HTML page has an internal style sheet where you have defined the background color of the page. For the same page, you have defined another background color using inline styling for the tag. You have also defined another background color for the page in the external style sheet.

On executing the page, the inline styling will take the top precedence, followed by an external style sheet, and finally the internal style sheet. Thus, the final background color of the page will be set according to inline styling.

In this exercise, you will open the VS Code workspace, learn to use inline styling, internal style sheet, and external style sheet in index.html, and determine their order of precedence during execution.

Learning Outcomes

After completing this exercise, you will be able to:

Determine the order of precedence between inline styles, internal, and external style sheets

Comprehensive Learning

See the full benefits of our immersive learning experience with interactive courses and guided career paths.