HTML & CSS Basics
Structure and style โ the two building blocks of every website.
HTML: The Structure
HTML (HyperText Markup Language) defines the structure and content of a webpage using elements/tags like headings, paragraphs, images, and links.
<h1>Hello ShikshaCS</h1>
<p>This is a paragraph.</p>CSS: The Style
CSS (Cascading Style Sheets) controls how HTML elements look โ colors, fonts, spacing, and layout. It can be added inline, in a <style> tag, or (best practice) in a separate .css file.
h1 {
color: #4c5bf5;
font-family: sans-serif;
}Box Model
Every HTML element is a box made of content, padding (space inside the border), border, and margin (space outside the border). Understanding this is essential for controlling layout and spacing.
๐ Real-World Use
Every website you visit โ from Google to Instagram's web version โ is built on this same foundation: HTML for structure, CSS for how it looks, then JavaScript (next topic) for interactivity.
๐ก Pro Tip
Use your browser's 'Inspect Element' (right-click โ Inspect) on any website to see its real HTML/CSS โ this is the fastest way to learn how professional sites are actually built.
๐งช Quick Self-Test
Check what you just learned โ no pressure, just practice.
1. What does HTML define on a webpage?
2. In the CSS box model, what surrounds the border on the outside?