-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path1css.html
More file actions
109 lines (109 loc) · 11.7 KB
/
Copy path1css.html
File metadata and controls
109 lines (109 loc) · 11.7 KB
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Introduction to CSS CSS tutorial with detailed English-Hindi explanation, examples, mistakes and live practice - LoOPCode"><title>1. Introduction to CSS - LoOPCode</title><script async src="https://www.googletagmanager.com/gtag/js?id=G-D0ENCWPZL9"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-D0ENCWPZL9');</script><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto+Mono&display=swap" rel="stylesheet"><style>*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f7fa;color:#1f2937;font-family:Poppins,sans-serif;line-height:1.7}header{background:#111827;color:#fff;padding:30px 15px;text-align:center;position:sticky;top:0;z-index:20;box-shadow:0 4px 16px #0002}header h1{margin:0;font-size:clamp(1.5rem,4vw,2.4rem)}header p{margin:6px 0;color:#cbd5e1}.progress{max-width:1050px;margin:15px auto 0;padding:0 18px}.progressbar{height:8px;background:#e5e7eb;border-radius:20px;overflow:hidden}.progressbar span{display:block;width:4%;height:100%;background:#2563eb}.container{max-width:1050px;margin:auto;padding:18px}.topic{background:#fff;margin:24px 0;padding:25px;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 8px 25px #0000000d}.badge{display:inline-block;padding:4px 9px;border-radius:20px;background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:700}.topic h2{color:#2563eb;margin:9px 0}.topic h3{font-size:16px;color:#374151;margin-bottom:6px}.codeview{background:#0f172a;color:#e2e8f0;padding:15px;border-radius:10px;overflow:auto;font-family:"Roboto Mono",monospace;font-size:13px}textarea{width:100%;min-height:220px;padding:15px;background:#0b1220;color:#e2e8f0;border:1px solid #334155;border-radius:10px;font-family:"Roboto Mono",monospace;font-size:13px;resize:vertical}button{border:0;background:#2563eb;color:#fff;padding:11px 19px;border-radius:9px;font-weight:700;cursor:pointer;margin:10px 0}button:hover{background:#1d4ed8;transform:translateY(-1px)}iframe{display:block;width:100%;height:200px;border:1px solid #cbd5e1;border-radius:10px;background:#fff}.challenge{margin-top:14px;padding:14px;background:#ecfdf5;border-left:4px solid #10b981;border-radius:9px;color:#065f46}ul{padding-left:22px}footer{text-align:center;padding:30px;background:#111827;color:#cbd5e1;margin-top:30px}@media(max-width:650px){.container{padding:9px}.topic{padding:18px}.topic p{font-size:15px}textarea,iframe{height:175px;min-height:175px}}</style></head><body><header><h1>1. Introduction to CSS</h1><p>LoOPCode • CSS Complete Learning Chapter</p></header><div class="progress"><div class="progressbar"><span></span></div></div><main class="container"><section class="topic"><div class="badge">CONCEPT 1</div><h2>1. What is CSS?</h2><p><b>English:</b> CSS HTML ko style aur present karta hai.</p><p><b>Hindi:</b> CSS HTML ko style aur present karta hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* What is CSS? */
.demo {
padding: 20px;
margin: 10px;
color: #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c0"><!DOCTYPE html>
<html><head><style>
.demo {
padding: 25px;
background: linear-gradient(135deg,#2563eb,#7c3aed);
color: white;
border-radius: 12px;
text-align: center;
transition: .3s;
}
.demo:hover { transform: translateY(-3px); }
</style></head><body>
<div class="demo">What is CSS? — Practice Me</div>
</body></html></textarea><button onclick="runCode('c0','o0')">▶ Run Code</button><iframe id="o0"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 2</div><h2>2. CSS Syntax</h2><p><b>English:</b> Selector, property aur value milkar CSS rule banate hain.</p><p><b>Hindi:</b> Selector, property aur value milkar CSS rule banate hain. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* CSS Syntax */
.demo {
padding: 20px;
margin: 10px;
background: #dbeafe;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c1"><!DOCTYPE html>
<html><head><style>
.demo {
padding: 25px;
background: linear-gradient(135deg,#2563eb,#7c3aed);
color: white;
border-radius: 12px;
text-align: center;
transition: .3s;
}
.demo:hover { transform: translateY(-3px); }
</style></head><body>
<div class="demo">CSS Syntax — Practice Me</div>
</body></html></textarea><button onclick="runCode('c1','o1')">▶ Run Code</button><iframe id="o1"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 3</div><h2>3. Inline CSS</h2><p><b>English:</b> style attribute ke andar CSS likhi jati hai.</p><p><b>Hindi:</b> style attribute ke andar CSS likhi jati hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* Inline CSS */
.demo {
padding: 20px;
margin: 10px;
border: 2px solid #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c2"><!DOCTYPE html>
<html><head><style>
.demo {
padding: 25px;
background: linear-gradient(135deg,#2563eb,#7c3aed);
color: white;
border-radius: 12px;
text-align: center;
transition: .3s;
}
.demo:hover { transform: translateY(-3px); }
</style></head><body>
<div class="demo">Inline CSS — Practice Me</div>
</body></html></textarea><button onclick="runCode('c2','o2')">▶ Run Code</button><iframe id="o2"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 4</div><h2>4. Internal CSS</h2><p><b>English:</b> style element ke andar page-level CSS hoti hai.</p><p><b>Hindi:</b> style element ke andar page-level CSS hoti hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* Internal CSS */
.demo {
padding: 20px;
margin: 10px;
color: #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c3"><!DOCTYPE html>
<html><head><style>
.demo {
padding: 25px;
background: linear-gradient(135deg,#2563eb,#7c3aed);
color: white;
border-radius: 12px;
text-align: center;
transition: .3s;
}
.demo:hover { transform: translateY(-3px); }
</style></head><body>
<div class="demo">Internal CSS — Practice Me</div>
</body></html></textarea><button onclick="runCode('c3','o3')">▶ Run Code</button><iframe id="o3"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 5</div><h2>5. External CSS</h2><p><b>English:</b> Separate .css file ko link se connect karte hain.</p><p><b>Hindi:</b> Separate .css file ko link se connect karte hain. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* External CSS */
.demo {
padding: 20px;
margin: 10px;
background: #dbeafe;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c4"><!DOCTYPE html>
<html><head><style>
.demo {
padding: 25px;
background: linear-gradient(135deg,#2563eb,#7c3aed);
color: white;
border-radius: 12px;
text-align: center;
transition: .3s;
}
.demo:hover { transform: translateY(-3px); }
</style></head><body>
<div class="demo">External CSS — Practice Me</div>
</body></html></textarea><button onclick="runCode('c4','o4')">▶ Run Code</button><iframe id="o4"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 6</div><h2>6. Why CSS is important</h2><p><b>English:</b> CSS readability, layout, responsiveness aur visual design improve karta hai.</p><p><b>Hindi:</b> CSS readability, layout, responsiveness aur visual design improve karta hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* Why CSS is important */
.demo {
padding: 20px;
margin: 10px;
border: 2px solid #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c5"><!DOCTYPE html>
<html><head><style>
.demo {
padding: 25px;
background: linear-gradient(135deg,#2563eb,#7c3aed);
color: white;
border-radius: 12px;
text-align: center;
transition: .3s;
}
.demo:hover { transform: translateY(-3px); }
</style></head><body>
<div class="demo">Why CSS is important — Practice Me</div>
</body></html></textarea><button onclick="runCode('c5','o5')">▶ Run Code</button><iframe id="o5"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section></main><footer>Created by:- Dharmandra Singh</footer><script>function runCode(a,b){const c=document.getElementById(a).value,f=document.getElementById(b),d=f.contentDocument||f.contentWindow.document;d.open();d.write(c);d.close()}</script></body></html>