HTML + CSS = सुन्दर Website Design
Part 3 मा हामीले Form, Table, Button प्रयोग गरेर website लाई interactive बनायौँ।अब Part 4 मा — website लाई राम्रो देखिने (design) कसरी बनाउने भन्ने सिकौँ।
---
CSS भनेको के हो?
CSS = Cascading Style Sheets
👉 HTML = structure (घरको ढाँचा)👉 CSS = design (रंग, सजावट, painting)
जस्तै:
HTML = घर बनायो
CSS = घर रंगायो, सजायो
---
CSS किन प्रयोग गर्ने?
CSS बिना:
Website plain (साधारण) देखिन्छ 😐
CSS प्रयोग गर्दा:
रंग राख्न सकिन्छ 🎨
text ठूलो/सानो बनाउन सकिन्छ 🔠
layout मिलाउन सकिन्छ 📐
---
CSS कसरी लेख्ने?
1. Inline CSS (HTML भित्रै)
<h1 style="color:blue;">नमस्ते</h1>
👉 सिधै tag भित्र style
---
2. Internal CSS (head भित्र)
<style> h1 { color: red; }</style>
---
3. External CSS (अलग file)
👉 style.css file बनाउने
h1 { color: green;}
HTML मा link गर्ने:
<link rel="stylesheet" href="style.css">
---
Basic CSS Examples
🎨 रंग परिवर्तन
p { color: blue;}
---
🔠 Text Size
h1 { font-size: 30px;}
---
📦 Box Design
div { border: 1px solid black; padding: 10px;}
---
Form लाई सुन्दर बनाऔँ
<style> body { font-family: Arial; }
input { padding: 5px; margin: 5px; }
button { background-color: green; color: white; padding: 10px; }</style>
👉 अब Form राम्रो देखिन्छ 👍
---
Complete Example (HTML + CSS)
<!DOCTYPE html><html><head> <title>Styled Form</title>
<style> body { font-family: Arial; background-color: #f2f2f2; }
h1 { color: blue; }
form { background: white; padding: 20px; width: 300px; }
input { width: 100%; margin: 5px 0; padding: 8px; }
button { background: green; color: white; padding: 10px; border: none; } </style>
</head><body>
<h1>विद्यार्थी दर्ता</h1>
<form> नाम: <input type="text"><br> कक्षा: <input type="number"><br> <button>दर्ता गर्नुहोस्</button></form>
</body></html>
👉 अब तपाईंको website professional जस्तो देखिन्छ 😍
---
गाउँको उदाहरण
HTML = घर बनाउने
CSS = घर रंगाउने + सजाउने
👉 बिना CSS = कच्चा घर👉 CSS सहित = राम्रो पेन्ट गरेको घर 🏠
---
Part 4 बाट के सिक्यौँ?
✅ CSS के हो✅ Inline, Internal, External CSS✅ Color, Text, Box design✅ Form लाई सुन्दर बनाउने
---
Part 5 मा के आउँछ?
👉 HTML + CSS + JavaScript👉 Website लाई “smart” बनाउने (click गर्दा काम गर्ने
HTML, Web’s Language to Communicate Humans #4
Learn how to design beautiful websites using HTML and CSS in this beginner-friendly guide. Understand styling techniques like colors, fonts, layouts, and form design with simple Nepali explanations and practical examples.
Comments
No comments yet. Be the first to comment!