Repository navigation
Expand file tree
/
Copy path6css.html
More file actions
145 lines (145 loc) · 14.6 KB
/
Copy path6css.html
File metadata and controls
145 lines (145 loc) · 14.6 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Typography in CSS CSS tutorial with detailed English-Hindi explanation, examples, mistakes and live practice - LoOPCode"><title>6. Typography in 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:24%;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>6. Typography in 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. font-family</h2><p><b>English:</b> Font family typeface choose karta hai.</p><p><b>Hindi:</b> Font family typeface choose 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">/* font-family */
.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">font-family — 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. font-size</h2><p><b>English:</b> Font size text ka scale control karta hai.</p><p><b>Hindi:</b> Font size text ka scale control 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">/* font-size */
.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">font-size — 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. font-weight</h2><p><b>English:</b> Weight text ki thickness control karta hai.</p><p><b>Hindi:</b> Weight text ki thickness control 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">/* font-weight */
.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">font-weight — 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. line-height</h2><p><b>English:</b> Line height lines ke beech vertical spacing control karta hai.</p><p><b>Hindi:</b> Line height lines ke beech vertical spacing control 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">/* line-height */
.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">line-height — 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. letter-spacing and word-spacing</h2><p><b>English:</b> Letters aur words ke beech spacing control hoti hai.</p><p><b>Hindi:</b> Letters aur words ke beech spacing control 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">/* letter-spacing and word-spacing */
.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">letter-spacing and word-spacing — 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. text-align</h2><p><b>English:</b> Text ki horizontal alignment set hoti hai.</p><p><b>Hindi:</b> Text ki horizontal alignment set 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">/* text-align */
.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">text-align — 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><section class="topic"><div class="badge">CONCEPT 7</div><h2>7. text-transform and decoration</h2><p><b>English:</b> Case aur decoration modify ki ja sakti hai.</p><p><b>Hindi:</b> Case aur decoration modify ki ja sakti 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">/* text-transform and decoration */
.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="c6"><!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">text-transform and decoration — Practice Me</div>
</body></html></textarea><button onclick="runCode('c6','o6')">▶ Run Code</button><iframe id="o6"></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 8</div><h2>8. Web Fonts</h2><p><b>English:</b> External web fonts se custom typography use kar sakte hain.</p><p><b>Hindi:</b> External web fonts se custom typography use kar sakte 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">/* Web Fonts */
.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="c7"><!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">Web Fonts — Practice Me</div>
</body></html></textarea><button onclick="runCode('c7','o7')">▶ Run Code</button><iframe id="o7"></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>