Please remove all blockquote comments such as this before publishing.
In this lesson you will learn what is CSS (Cascading Style Sheets) and how it interacts with the HTML elements of your website and Javascript. Learn how to use CSS to style those HTML elements and the 'cascading effect'.
After completing this lesson, participants will be able to:
- Define what is CSS and the role it plays on a website (here is where I'm thinking the fundamental the role of HTML, CSS and Javascript can come in at a high level)
- Define the anatomy of a CSS block and illustrate how it can be applied to HTML
- Illustrate how to use basic CSS to modify the HTML elements of your site (text, backgrounds)
- Define what is a CSS class and id and show how it can be applied to the HTML elements of your site
- Explain the 'cascading' effect and how you can arrange your CSS to reflect this
It’s required that you include a bulleted list of objective(s) for each lesson plan. Objectives should be worded as actions that the participant can do once they’ve finished. See Bloom's Taxonomy of Action Verbs (PDF) as a reference. Avoid using words like "know," "understand," "be introduced to," etc. There should be one assement item for each objective (see below).
Who is this lesson intended for? What interests/skills would they bring? Put an "x" in the brackets for all that apply.
- Users / Content Writers
- Designers
- Developers
- Speakers
- Organizers
- Kids
How much experience would a participant need to get the most from this lesson? Put an "x" in the brackets for all that apply.
- Beginner
- Intermediate
- Advanced
Which strategies will be used for this lesson plan? Put an "x" in the brackets for all that apply.
- Demonstration
- Discussion
- Exercises
- Feedback
- Lecture (Presentation)
- Slides
- Show & Tell
- Tutorial
How long will it take to present this lesson? Put an "x" in the brackets for the one that applies.
- 1 hour or less
- 2-4 hours (half-day)
- 5-8 hours (full-day)
- 2 days
- 3 days or more
Participants will get the most from this lesson if they have familiarity with:
- Basic understanding of HTML
- Basic knowledge of how to use a Text Editor
For example:
- Experience with HTML and CSS
- Completed the Basic WordPress Concepts lesson
- Do you have a basic knowledge of HTML?
- Have you got access to and do you know how to use a Text Editor?
A list of questions for participants to see if they have the background and skills necessary to learn and understand the lesson.
For example:
- Do you want to makes changes to your theme yourself?
- Do you know how to write CSS?
Change the
/repo-name/in the link to match the URL name of this repo.
- Slides (files included in this repo)
- Web Browser
- Text Editor/W3C CSS Validator
- Online Picker Tool
A list of files, resources, equipment, or other materials the presenter will need for the lesson.
For example:
- A local install of WordPress
- The files for the TwentySixteen theme
- The lesson plan is meant to to be an introductory to CSS through demonstrations, exercises and tutorials. It is not a detailed course on CSS but an introduction to the topic for users who have a basic understanding of HTML and want to use CSS to style basic HTML elements.
- Users must be able to answer ‘Yes’ to the first readiness question. If they answer ‘No’ to the second question then they can be directed to use the W3C CSS validator.
A list of any handy tips or other information for the presenter.
For example:
- Participants may need to download the TwentySixteen theme before beginning
- What to do if there’s no projector or internet available
- What to do if a participant doesn’t have the necessary set up
- How to handle different opinions about the topic
- First go through the description, objectives, the target audience this is aimed at the skills required and how the lesson will be delivered.
- Move on to the demonstration that explains what CSS is and how it works with HTML and Javascript, reference the following: https://shecodes.com.au/wordpress-tutorial-code-overview/ https://www.youtube.com/watch?v=gT0Lh1eYk78&t=9s
- Show them the anatomy of a CSS block and how it can be applied to a HTML element
- Move on to the exercises
- Explain what is a CSS ‘class’ and ‘id’ and when you would use them
- Move on to the exercises
- Explain the cascading effect
- Try to then take and complete a quiz
- Finish with additional resources/reading material.
The plan for the lesson. Outline form works well.
For example:
- Talk about what a theme is
- Demonstrate how to install and activate a theme
- Practice exercises to have participants find and install a theme on their own site
**Exercise 1 - Modify a Font **
Short description of what the exercise does and what skills or knowledge it reinforces.
- Change the font size of a ‘H1 element’
- Make it bold
**Exercise 2 - Modify the Background of a Page **
Short description of what the exercise does and what skills or knowledge it reinforces.
- Change the background colour of the body section to ....
**Exercise 3 - Add some padding to a container **
Short description of what the exercise does and what skills or knowledge it reinforces.
- Add some padding to the image container
**Exercise 4 - Modify all the H2 headers on this page **
Short description of what the exercise does and what skills or knowledge it reinforces.
- Change the font-size of all the 'H2 elements' on this page using a 'class'
**Exercise 1 - Modify one H2 element on this page **
Short description of what the exercise does and what skills or knowledge it reinforces.
- Change the colour of of the 'H2' elements using an 'id'
These are short or specific activities that help participants practice certain components of the lesson. They should not be fully scripted exercises, but rather something that participants could do on their own. For example, you can create an exercise based on one step of the Example Lesson.
There should be one assement item (or more) for each objective listed above. Each assessment item should support an objective; there should be none that don't.
You can use CSS to:
- Option
- Option
- Option
- Option
Answer: 3. Correct answer
You can use the font-size property to:
- Option
- Option
- Option
- Option
Answer: 3. Correct answer
You can use the background property to:
- Option
- Option
- Option
- Option
Answer: 3. Correct answer
Which option is True:
- A CSS class .... and an ID ....
- Option
- Option
- Option
Answer: 3. Correct answer
The cascading effect is:
- Option
- Option
- Option
- Option
Answer: 3. Correct answer
A few questions to ask participants to evaluate their retention of the material presented. They should be a measure of whether the objectives were reached. Consider having a question for each objective.
- Mozilla Developer Network - https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
- WordPress - https://codex.wordpress.org/CSS
- CSS Tricks - https://css-tricks.com
- Codrops CSS Reference - https://tympanus.net/codrops/css_reference/
An optional section which can contain a list of resources that the presenter can use to get more information on the topic.
For example:
- Link to information on the Codex
- Theme Review Team's Handbook
An example of how the lesson plan can be implemented. Written in script form as one possible way an presenter might use this lesson plan at an event, with screenshots and instructions if necessary.
You will likely need to break the Example Lesson down into multiple sections.
Follow with the Exercises and Assessment outlined above.