अपने एचटीएमएल पेज के विभिन्न पहलुओं को स्टाइल करने में सक्षम होना वेब डिजाइनरों और डेवलपर्स के लिए एक महत्वपूर्ण कौशल है। अपने एचटीएमएल वेब पेजों को फ़ॉन्ट रंगों और आकारों के साथ स्टाइल करने के लिए, आपको सीएसएस से परिचित होना होगा। विशेष रूप से फ़ॉन्ट आकार को लक्षित करने के लिए, आप CSS का उपयोग कर सकते हैं फ़ॉन्ट आकार संपत्ति।
यदि आप CSS का उपयोग करके HTML फ़ॉन्ट आकार बदलने का कोई तरीका ढूंढ रहे हैं, तो हमने आपको कवर कर लिया है। आइए CSS के परिचय के साथ शुरुआत करते हैं फ़ॉन्ट आकार संपत्ति।
CSS फ़ॉन्ट-आकार की संपत्ति को समझना
फ़ॉन्ट आकार जब आपको HTML टेक्स्ट का आकार बदलने की आवश्यकता होती है तो CSS में संपत्ति आसान होती है। आप इस गुण का उपयोग किसी HTML पृष्ठ पर पाठ के प्रत्येक भाग के आकार को बदलने के लिए कर सकते हैं या विशिष्ट तत्वों को बदलने के लिए लक्षित कर सकते हैं।
विशिष्ट तत्वों को लक्षित करने की आमतौर पर अनुशंसा की जाती है क्योंकि आप आमतौर पर नहीं चाहते कि सब कुछ समान आकार का हो। पाठ जो दृश्य पदानुक्रम का पालन नहीं करता है, उसे स्कैन करना और उच्च-स्तरीय शीर्षकों को निम्न-स्तरीय शीर्षकों से अलग करना कठिन है।
सरल शब्दों में, इसका दुरुपयोग न करें फ़ॉन्ट आकार संपत्ति। यदि आप चाहते हैं कि कोई शीर्षक अलग दिखे, तो उसके लिए अलग-अलग HTML शीर्षक टैग हैं। हमारे की जाँच करें HTML अनिवार्य चीट शीट स्पष्टीकरण के साथ विभिन्न टैग, विशेषताओं और बहुत कुछ के लिए।
सीएसएस फ़ॉन्ट आकार संपत्ति दो प्रकार के मूल्य लेती है: निरपेक्ष और सापेक्ष।
निरपेक्ष लंबाई मान (अर्थात पिक्सल) स्थिर होते हैं जबकि सापेक्ष वाले (उदा. एम तथा भूतपूर्व) लचीले होते हैं। उदाहरण के लिए, जैसे फ़ॉन्ट-सापेक्ष इकाई के लिए एम, आकार आमतौर पर मूल तत्व के फ़ॉन्ट आकार द्वारा निर्धारित किया जाता है। हालाँकि, रूट-आधारित फ़ॉन्ट-सापेक्ष इकाइयाँ जैसे रेमो मूल तत्व के फ़ॉन्ट आकार से प्रभावित होते हैं ().
प्रत्येक के अपने फायदे और नुकसान हैं, लेकिन चीजों को केंद्रित रखने के सार में, हम इस लेख में उनकी चर्चा नहीं करेंगे।
CSS में HTML एलीमेंट का फॉन्ट साइज कैसे बदलें
आप कुछ मानक CSS सिंटैक्स का उपयोग करके HTML टेक्स्ट का फ़ॉन्ट आकार बदल सकते हैं।
सबसे पहले, चयनकर्ता निर्दिष्ट करें (वह पाठ जिसे आप संशोधित करना चाहते हैं) और कुछ घुंघराले ब्रेसिज़ खोलें। अगला, दर्ज करें फ़ॉन्ट आकार प्रॉपर्टी के बाद एक कोलन, वह विशिष्ट आकार निर्दिष्ट करें जिसमें आप अपने HTML टेक्स्ट को प्रस्तुत करना चाहते हैं, और इसे अर्धविराम से बंद करें।
यहाँ वाक्य रचना है:
सीएसएस चयनकर्ता {
फ़ॉन्ट-आकार: मान;
}अवधारणा पर बेहतर समझ पाने के लिए, निम्नलिखित HTML बॉयलरप्लेट की समीक्षा करें जिसमें कोड की कुछ अतिरिक्त पंक्तियाँ हैं (एक शीर्षक और एक पैराग्राफ):
सरल HTML पृष्ठ
यह मेरा पहला शीर्षक है
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिंग एलीट, सेड डू ईउसमॉड टेम्पर इनसिडिडंट यूट लेबर एट डोलोरे मैग्ना एलिका। यूट एनिम एड मिनिम वेनिअम, क्विस नोस्ट्रुड एक्सर्सिटेशन उलमको लेबरिस निसि यूट एलिक्विप एक्स ईए कमोडो कॉन्सेक्वेट।
यदि आप अनुच्छेद तत्व के फ़ॉन्ट आकार को बदलना चाहते हैं, तो आपको इसे (कक्षा, टैग, या आईडी के माध्यम से) और सीएसएस का उपयोग करके चुनना होगा फ़ॉन्ट आकार संपत्ति, अपनी पसंदीदा इकाइयों के साथ एक कस्टम मान सेट करें। हमारे उदाहरण में, हम पिक्सल का उपयोग करेंगे (पिक्सल).
पी {
फ़ॉन्ट-आकार: 18px;
}हालांकि आम तौर पर बड़े प्रोजेक्ट्स में इनलाइन CSS की सलाह नहीं दी जाती है, आप इसका उपयोग HTML टेक्स्ट के आकार को बदलने के लिए भी कर सकते हैं। उपरोक्त बाहरी सीएसएस कोड से नोट्स लेते हुए, हम एक ही चीज़ को इनलाइन लागू कर सकते हैं जैसे:
सरल HTML पृष्ठ
यह मेरा पहला शीर्षक है
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिंग एलीट, सेड डू ईउसमॉड टेम्पर इनसिडिडंट यूट लेबर एट डोलोरे मैग्ना एलिका। यूट एनिम एड मिनिम वेनिअम, क्विस नोस्ट्रुड एक्सर्सिटेशन उलमको लेबरिस निसि यूट एलिक्विप एक्स ईए कमोडो कॉन्सेक्वेट।
में पाठ पी HTML टैग का अब एक नया कस्टम आकार होगा।
सम्बंधित: आवश्यक सीएसएस टिप्स और ट्रिक्स हर डेवलपर को पता होना चाहिए
CSS में HTML फ़ॉन्ट आकार बदलते समय समस्या निवारण त्रुटियाँ
हालांकि सीएसएस में टेक्स्ट का आकार बदलने की पूरी प्रक्रिया आसान लग सकती है, लेकिन यह हमेशा वैसा नहीं हो सकता जैसा आप उम्मीद करते हैं। यदि आप समस्याओं का अनुभव करते हैं, तो यह जांच कर प्रारंभ करें कि क्या आपने अपनी फ़ाइल में परिवर्तनों को सहेजा है (यह भी सुनिश्चित करें कि आपने अपनी CSS शीट को अपनी HTML फ़ाइल से लिंक किया है)। यदि आपने किया है, तो इनलाइन पद्धति का उपयोग करके देखें, फिर पृष्ठ को रीफ़्रेश करें।
यदि यह काम करता है, तो आपके CSS कोड में कोई समस्या हो सकती है। का उपयोग करने का प्रयास करें !जरूरी टैग, और अगर यह काम करता है, तो कुछ परस्पर विरोधी कोड होना चाहिए। उस त्रुटि को पकड़ने और पकड़ने के लिए अपनी सीएसएस कोड लाइन को लाइन से पार्स करें।
सीएसएस के साथ मदद चाहिए? शुरू करने के लिए इन बुनियादी सीएसएस कोड उदाहरणों को आजमाएं, फिर उन्हें अपने वेब पेजों पर लागू करें।
आगे पढ़िए
- प्रोग्रामिंग
- एचटीएमएल
- सीएसएस
- वेब विकास
- वेब डिजाइन
एल्विन वंजाला 2 वर्षों से अधिक समय से प्रौद्योगिकी के बारे में लिख रहे हैं। वह विभिन्न पहलुओं के बारे में लिखता है, जिसमें मोबाइल, पीसी और सोशल मीडिया शामिल हैं, लेकिन इन्हीं तक सीमित नहीं है। एल्विन को डाउनटाइम के दौरान प्रोग्रामिंग और गेमिंग पसंद है।
हमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें
