Lesson Plan: Styling Text and Colors

Objective

By the end of this lesson, students will be able to:

• Change text color, font size, and font family using CSS.
• Set a background color for a webpage.
• Differentiate between inline and external CSS.

Requirements

1. Use inline CSS to style a specific word or phrase.
2. Apply external CSS rules to the rest of the page for consistent styling.
3. Experiment with different color codes and font families.

Click here to gain an understanding of Inline CSS.

Click here to gain an understanding of External CSS.

Example: Applying Inline and External CSS

Here is an example of inline CSS and how it can be used alongside external CSS.

Skills Learned

• CSS Basics
• Using inline vs. external styles
• Text and color styling

Practice Activity

Students will create a small webpage:

1. Write a heading with your favorite quote.
2. Style the quote using inline CSS (e.g., change the font size and color).
3. Set a background color for the page using external CSS.
4. Add some additional styled paragraphs about why you like the quote.