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.
PREVIEW THE INTERACTIVE DEMO
OBJECTIVES:
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.
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:
- 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.
Report this resource to TPT
Reported resources will be reviewed by our team. Report this resource to let us know if this resource violates TPT's content guidelines.
Highlights
Grades
9th - 12th, Adult Education, Higher Education
Subjects
Standards
CCSSRST.9-10.3
CCSSRST.9-10.4
CCSSRST.9-10.5
Pages
22+
Answer Key
Included
Teaching Duration
1 hour
Save even more with bundles
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
Price $31.27Original Price $34.75Save $3.48
5
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.
PREVIEW THE INTERACTIVE DEMO
OBJECTIVES:
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.
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:
- 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.
Report this resource to TPT
Reported resources will be reviewed by our team. Report this resource to let us know if this resource violates TPT's content guidelines.
Reviews
This product has not yet been rated.
Questions & Answers
Loading
Standards
to see state-specific standards (only available in the US).
CCSSRST.9-10.3
Follow precisely a complex multistep procedure when carrying out experiments, taking measurements, or performing technical tasks, attending to special cases or exceptions defined in the text.
CCSSRST.9-10.4
Determine the meaning of symbols, key terms, and other domain-specific words and phrases as they are used in a specific scientific or technical context relevant to grades 9–10 texts and topics.
CCSSRST.9-10.5
Analyze the structure of the relationships among concepts in a text, including relationships among key terms (e.g., force, friction, reaction force, energy).
Loading
