Tutorial: External CSS is an coding lab that allows the student to discover the relationship between the three layers of CSS coding.

This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity.

PREVIEW THE INTERACTIVE DEMO

OBJECTIVES:
This tutorial covers the following objectives:
-- Include CSS using an external style sheet, embedded code, and inline code.
-- Demonstrate use of external, embedded, and inline CSS styles.
-- Describe the hierarchy (which technique overrides the others) and when each type is appropriate for external, embedded, and inline CSS.


This hands-on tutorial comes with a standard PDF file as well as an interactive version written using Articulate Storyline that you can upload to Moodle or Canvas.

Here is a video showing how to install the interactive, Articulate Storyline files, into your LMS (Learning Management System)

The tutorial includes the full source code solution used in the lab.

Includes a 5-step student lab with START and FINAL code for your classroom labs. (This list is included in the comment section at the top of the indexSTART.html file.)

SUGGESTED ACTIVITY LIST FOR THE LAB
1) EXTERNAL - Add a link to the .css file on all three .html pages
2) EMBEDDED - Add a style element containing a selector the the h1 on the index.html page
3) IN-LINE - Add another h1 element on the contact.html page
For this new h1, add in-line CSS code so it appears different from the others
4) Summarize: At the bottom of the index.html page, so it can be seen by the user,
List the three layers of CSS (external, embedded, and in-line) and describe
the precedence each layer has.

Include a short description for each layer
describing when it is useful.

Present this information in a clear and easy-to-read format.

5) Submit this file to your instructor for an activity grade.