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.
PREVIEW THE INTERACTIVE DEMO
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.)
SUGGESTED ACTIVITY LIST FOR THE LAB
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.