INTRO TO HTML and CSS
HTML = the bricks, walls, doors, windows, rooms (the structure and content)
CSS = the paint, furniture, curtains, lighting, decoration (the look & feel)
Without HTML → nothing to show. Without CSS → ugly plain page everyone hates.
Let’s start from zero — no previous knowledge needed.
Step 1: What Exactly is HTML?
HTML = HyperText Markup Language It’s not a programming language — it’s a markup language. You use it to “mark up” (label) content so the browser knows what it is.
Example: This is a heading → <h1> This is normal paragraph text → <p> This is a link → <a> This is an image → <img>
Our Very First HTML File (Classic “Hello World” but better)
Create a new file called index.html (use Notepad, VS Code, or any text editor).
Copy-paste this complete code:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page - Learning with Grok</title> </head> <body> <h1>Welcome to HTML & CSS!</h1> <p>Hi! My name is <strong>Webliance</strong> and today I'm learning web development.</p> <h2>Why learn HTML & CSS?</h2> <ul> <li>It's the foundation of every website</li> <li>Very quick to see results</li> <li>Fun to create things instantly</li> <li>Needed for jobs like frontend developer, UI designer, etc.</li> </ul> <h3>A famous quote</h3> <blockquote> "The best way to predict the future is to create it." — Peter Drucker </blockquote> <p>Visit <a href="https://www.google.com" target="_blank">Google</a> for more inspiration!</p> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800" alt="Beautiful code on screen" width="400"> <hr> <p>Created with ❤️ on February 25, 2026</p> </body> </html> |
Save it → double-click the file → it opens in your browser!
Now let’s understand every important part:
| Part | Meaning | Required? |
|---|---|---|
| <!DOCTYPE html> | Tells browser: “This is modern HTML5” | Must have |
| <html lang=”en”> | Root element + language (helps screen readers & SEO) | Must have |
| <head> | Invisible area — metadata, title, links to CSS/JS | Must have |
| <meta charset=”UTF-8″> | Allows special characters (₹, 😊, హాయ్ etc.) | Highly recommended |
| <title> | Text shown in browser tab | Very important |
| <body> | Everything the user actually sees | Must have |
Common tags you just used:
- <h1> to <h6> → headings (h1 = biggest & most important)
- <p> → paragraph
- <strong> → bold (importance)
- <ul> + <li> → unordered list (bullets)
- <a href=”…”> → hyperlink
- <img src=”…” alt=”…” width=”…”> → image (alt = very important for accessibility)
- <blockquote> → quoted text
- <hr> → horizontal line
Step 2: Let’s Make It Beautiful with CSS
HTML alone is boring — black text on white background.
Create a new file in the same folder called style.css
Put this inside:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
/* This is a comment in CSS */ body { font-family: Arial, Helvetica, sans-serif; background-color: #f0f4f8; color: #333; margin: 0; padding: 40px; line-height: 1.6; } h1 { color: #2c5282; /* dark blue */ text-align: center; border-bottom: 4px solid #4299e1; padding-bottom: 10px; } h2 { color: #2b6cb0; } h3 { color: #3182ce; } p { font-size: 18px; max-width: 700px; margin: 0 auto 20px auto; } ul { list-style-type: square; padding-left: 30px; } a { color: #e53e3e; text-decoration: none; font-weight: bold; } a:hover { color: #c53030; text-decoration: underline; } img { display: block; margin: 30px auto; border: 8px solid #bee3f8; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); } blockquote { background-color: #ebf8ff; border-left: 6px solid #4299e1; padding: 15px 25px; margin: 30px 0; font-style: italic; } |
Now connect CSS to HTML. Add one line inside the <head> section of your index.html:
|
0 1 2 3 4 5 6 |
<link rel="stylesheet" href="style.css"> |
So your <head> becomes:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page - Learning with Grok</title> <link rel="stylesheet" href="style.css"> </head> |
Refresh the browser → Wow! Now it looks professional. 🎉
Quick CSS Basics You Just Learned
| Property | What it does | Common values |
|---|---|---|
| color | text color | red, #ff0000, rgb(255,0,0) |
| background-color | background color | white, #f0f0f0 |
| font-family | font | Arial, “Times New Roman”, system-ui |
| text-align | horizontal alignment | left, center, right |
| margin | space outside element | 20px, 10px 20px, auto |
| padding | space inside element | 15px |
| border | border around element | 2px solid black |
| border-radius | rounded corners | 10px |
| :hover | style when mouse is over | (pseudo-class) |
Your Mini Homework (Try Right Now!)
- Change the <h1> text to your name
- Add one more <li> to the list
- Change the background color of body to #fefcbf (light yellow)
- Make all <p> text color #4a5568 (cool gray)
- Add this after the image:
|
0 1 2 3 4 5 6 |
<button>Click Me!</button> |
Then in CSS add:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
button { background-color: #48bb78; color: white; padding: 12px 30px; border: none; border-radius: 8px; font-size: 18px; cursor: pointer; } button:hover { background-color: #38a169; } |
Refresh — you just made your first interactive-looking button!
How did it feel? This is how almost every website starts — simple HTML + CSS.
Next steps (after you finish playing with this):
- Learn div & class & id
- Understand CSS box model (margin, border, padding, content)
- Try making a simple personal card / landing page
Want to go deeper on any part (flexbox, forms, mobile responsive, colors, etc.)? Just tell me — “next lesson” or “explain flexbox like I’m 12” or anything!
Happy coding! 🚀 Your friendly web teacher, Grok
