Introduction to CSS

Introduction to CSS
Introduction to CSS
Introduction to CSS
Introduction to CSS
Introduction to CSS
Introduction to CSS
Introduction to CSS
Introduction to CSS
Common Core Standards
Product Rating
File Type

Compressed Zip File

Be sure that you have an application to open this file type before downloading and/or purchasing.

6 MB|22+
Also included in:
  1. Web For Business - Bundle 3 CSSThe Web For Business Course - Students learn programming skills while developing their own resumé website.This bundle includes learning/assessment activities teaching students how to style their web pages using CSS (Cascading Style Sheets).The bundle includes:Five inte
    Save $3.48
Product Description
Tutorial: Introduction to CSS allows the student to experiment with the essential concepts that make up Cascading Style Sheet code.

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


This tutorial covers the following objectives:
- Use CSS to format standard HTML elements.
- Establish a color scheme for a web site.
- Control the background color of specific elements.
- Control the foreground color of specific elements.
- Determine when to use the id=" " attribute and the class=" " attribute when naming particular elements on the page.
- List three best practices that are useful in your CSS coding.
- Validate the CSS code ensuring it meets the W3C Standards.
- Use web developer tools to help debug CSS problems.

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 10-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 introCSS-START.html file.)

1) Add a style element inside the head element.
2) Using the style guide, change the background of the h1 element.
3) Change the foreground color of the h1 element.
4) Add padding inside the h1 element so the text doesn't touch the edges.
5) Add margins around the h1 element so the block to "frame" the block with extra visual space.
6) Add a border around the h1 element.
7) Change the font of the page using a font stack with at least three font choices.
8) Change the font size for the entire page.
9) Use float to position an element alongside the h1 text.
10) Use span to style specific text inside of a block.
11) Submit your final page to the instructor for activity points.
Total Pages
Answer Key
Teaching Duration
1 hour
Report this Resource
Digital Download
More products from Web Explorations
Product Thumbnail
Product Thumbnail
Product Thumbnail
Product Thumbnail
Product Thumbnail
Teachers Pay Teachers

Teachers Pay Teachers is an online marketplace where teachers buy and sell original educational materials.

Learn More

Keep in Touch!

Sign Up