HTML & CSS Styling Made Simple

Building Beautiful Websites Year 10 Digital Technologies 30 Minutes to Web Design Mastery

Do Now Activity: Web Detective

Open any website on your device Right-click and select 'Inspect Element' or 'View Page Source' Spend 2 minutes exploring the code Find 3 HTML tags you recognize Share your discoveries with a partner

What Makes a Website Look Good?

Think about your favorite website What visual elements catch your attention? Colors? Fonts? Layout? Images? How do you think these are controlled?

HTML: The Building Blocks

HyperText Markup Language Provides structure and content Uses tags to define elements Like the skeleton of a house Examples: <h1>, <p>, <div>, <img>

Common HTML Tags Reference

CSS: The Style Master

Cascading Style Sheets Controls visual appearance Colors, fonts, spacing, layout Like interior design for your house Separates content from presentation

HTML vs CSS: Understanding the Difference

{"left":"Defines structure and content\nUses angle bracket tags\nSemantic meaning\nRequired for all web pages","right":"Controls visual appearance\nUses selectors and properties\nMakes sites beautiful\nOptional but essential for modern web"}

Hands-On: Your First Styled Element

Create a simple HTML paragraph Add CSS to change its color Experiment with font-size Try different background colors Share your creation with the class

CSS Properties You'll Use Every Day

color: changes text color background-color: sets background font-size: controls text size margin: space outside elements padding: space inside elements border: adds borders around elements

Interactive Quiz: Test Your Knowledge!

Which language provides website structure? What does CSS stand for? Which property changes text color? True or False: HTML can work without CSS Ready for the Kahoot challenge?