CSS

[jonathanbossenger]

Learning Objectives

A brief introduction to CSS, how CSS can be added to an HTML page, and how to apply CSS to elements. Wrap up with additional links for further reading.

Relevant Links

• CSS on MDN
• CSS on Web.dev
• freeCodeCamp Responsive Web Design Course

Lesson creation checklist

• Gather any relevant links to Support, Docs, or related material
• Description and Objectives finalized
• Lesson created and announced to the team for Q/A review
• Lesson submitted and published to WPTV
• Lesson transferred to YouTube
• Lesson reviewed and ready to publish
• Lesson published to Learn.WordPress.org

[jonathanbossenger]

Script: https://github.com/jonathanbossenger/wp-content/blob/main/developer-learning-pathway/the-programming-languages-of-wordpress/02-css.md

Video for review

02-CSS.mp4

[ironnysh]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Leave an additional comment below with feedback. You can also share what you liked about this Tutorial.

Hi @jonathanbossenger, everything looks good—I just spotted one editing glitch: At 0:50, you start to type style= inside the h1 element, then it disappears, and you go back to demonstrate it at 1:00 (after the explanation).

[SierraTR]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• [ x] Learning outcomes/objectives are clear.
• [x ] Technical concepts introduced in the content are accurate.
• [ x] The speed of demonstrations are easy to follow.
• [ x] The narration audio matches what is shown visually.
• [x ] Spelling and grammar are correct.
• [x ] Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Looks good. I second @ironnysh comment about needing a small video edit at the timestamp listed above. And I will assume that styling within the block editor will be covered in a subsequent lesson or pathway.

[jonathanbossenger]

Thank you @ironnysh and @SierraTR, another video editor glitch

Uploaded the fixed version

02-CSS.mp4

@SierraTR to your last question, yes, this is purely an introduction to CSS as a language for the pure beginner, we will dive deep into styling in the block editor in later lessons.

[jonathanbossenger]

https://learn.wordpress.org/lesson/css/