Building on HTML basics from Class 7, this topic introduces CSS (Cascading Style Sheets) for styling and new HTML elements like tables and forms — moving from plain text pages to visually appealing websites.
Tables: <table><tr><th>Name</th><th>Age</th></tr><tr><td>Alice</td><td>13</td></tr></table>. Attributes: border, colspan, rowspan. Forms: <form><input type="text" placeholder="Name"><input type="email"><button type="submit">Send</button></form>. Input types: text, password, email, number, checkbox, radio, submit.
CSS changes how HTML looks. Three ways: inline (style="color:red"), internal (<style> in <head>), external (.css file — best practice). Selectors: h1 {} (all h1s), .highlight {} (class), #header {} (id). Common properties: color, background-color, font-size, font-family, margin, padding, border, text-align. Box model: content → padding → border → margin.
Every HTML element is treated as a rectangular box with four layers: (1) Content — the actual text/image. (2) Padding — space between content and border (transparent). (3) Border — visible edge around the element. (4) Margin — space outside the border (between elements). Understanding the box model is key to controlling spacing and layout. Use browser Dev Tools (F12) to visualise it.
Book a Trial + Diagnostic session. Get a personalized Learning Path with clear milestones, tutor match, and a plan recommendation — all within 24 hours.
Book Trial + Diagnostic →