CSS Course | Text & Font Properties in CSS | Typography | Web Development Course Beginner Advance 19

Coding Shuttle by Anuj Bhaiya
6 Oct 202221:15

Summary

TLDRThis video script offers an in-depth tutorial on text formatting and font properties using HTML and CSS. It covers text properties such as color, background color, text alignment, decoration, and transformations. The instructor also guides on creating custom fonts for websites and introduces how to import fonts from Google Fonts, providing a comprehensive learning experience for web design enthusiasts.

Takeaways

  • 🌟 The video is a comprehensive tutorial on text formatting and font properties, aimed at advancing beginner-level knowledge to an advanced level in HTML and CSS.
  • 📝 The instructor begins by setting up a project folder with an index.html and a style.css file, emphasizing the importance of a structured approach to web development.
  • 🎨 The video covers text properties such as color, background color, text alignment, and text decoration, demonstrating how to apply these properties using CSS.
  • 🔄 The concept of text shadow is introduced, explaining how to add depth and style to text with properties like horizontal and vertical offsets, blur radius, and color.
  • ✨ The instructor discusses the use of custom fonts, guiding viewers on how to import fonts from sources like Google Fonts and implement them into their web projects.
  • 🔡 The video explains the use of font properties including font family, font size, font weight, and font style, to create a diverse range of text appearances.
  • 📐 The importance of text spacing is highlighted, including letter spacing, word spacing, and line height adjustments for improving readability and visual appeal.
  • 🖌️ Text transformation properties are demonstrated, such as uppercase, lowercase, and capitalize, which can be used to manipulate the case of text for stylistic purposes.
  • 📝 The script also touches on the practicality of using developer tools for direct editing and real-time feedback on CSS properties.
  • 🔍 The instructor suggests using online resources and search engines for learning CSS properties, acknowledging the vastness of the topic and the need for continuous learning.
  • 🌐 The video concludes with a mention of a Telegram group for updates and a teaser for the next topic, which will be about display properties in CSS.

Q & A

  • What is the main topic of the video script?

    -The main topic of the video script is text formatting and font properties in HTML and CSS, including advanced concepts like text shadow and custom fonts.

  • What are some common text properties discussed in the script?

    -Some common text properties discussed in the script include text color, background color, text alignment, text decoration, and text transform.

  • How can one change the text color and background color using CSS?

    -One can change the text color using the 'color' property and the background color using the 'background-color' property in CSS.

  • What is text alignment and how is it used in CSS?

    -Text alignment in CSS is used to align the text within its container. It can be set to 'left', 'right', 'center', or 'justify' using the 'text-align' property.

  • Can you explain the 'text-decoration' property and its common values?

    -The 'text-decoration' property in CSS is used to set the decoration of text, such as underlining, overlining, or striking through text. Common values include 'underline', 'overline', 'line-through', and 'none'.

  • What is text shadow and how can it be applied in CSS?

    -Text shadow is a CSS property that adds a shadow effect to text. It can be applied using the 'text-shadow' property, which takes values for horizontal and vertical offsets, blur radius, and color.

  • How can one create custom fonts for a website?

    -Custom fonts can be created by importing fonts from services like Google Fonts, and then applying them to the website using the 'font-family' property in CSS.

  • What is the purpose of the 'font-weight' property in CSS?

    -The 'font-weight' property in CSS is used to specify the weight (or boldness) of the font. Common values include 'normal', 'bold', 'lighter', and 'bolder', with numerical values ranging from 100 to 900.

  • How does the 'font-style' property affect the appearance of text?

    -The 'font-style' property in CSS is used to specify the style of the font, such as italic or oblique. It can take values like 'normal', 'italic', or 'oblique'.

  • What is the 'font-size' property and how can it be used?

    -The 'font-size' property in CSS is used to specify the size of the font. It can be set using various units like pixels (px), em (relative to the parent element's font size), or rem (relative to the root element's font size).

  • Can you provide an example of how to use the 'text-transform' property?

    -The 'text-transform' property can be used to change the capitalization of text. For example, 'text-transform: uppercase;' will convert all text to uppercase, while 'text-transform: lowercase;' will convert it to lowercase.

Outlines

00:00

😀 Introduction to Text Formatting and Properties

The speaker introduces the topic of text formatting, discussing the properties of text and fonts. They mention the learning process of HTML and JavaScript for beginners and the agenda for the day, which includes customizing text on a website. The speaker demonstrates how to change text properties like color and background color using the inspector tool in the coding environment. They also explain how to directly manipulate the style within the code for immediate visual feedback.

05:01

📘 Exploring Text and Font Properties In-Depth

The speaker delves deeper into text properties, discussing text alignment, decoration, and shadow effects. They explain the use of text-transform for capitalization, text-indent for paragraph indentation, and letter-spacing for adjusting space between letters. The session includes live demonstrations of applying these properties in code and observing the changes in real-time. The speaker also touches on the importance of line-height for readability and word-spacing to manage space between words.

10:01

🎨 Customizing Text with Shadow and Font Effects

The speaker explores advanced text effects such as text-shadow for adding shadows to text, creating depth and style. They demonstrate how to adjust the horizontal and vertical offsets, blur radius, and color of the shadow to achieve various effects. Additionally, the speaker discusses the use of font properties like font-family, font-size, and font-weight to customize the appearance of the text, and how to import fonts from external sources like Google Fonts.

15:03

🌐 Implementing Web Fonts and Font Properties

The speaker provides a step-by-step guide on how to import and implement web fonts into a website using Google Fonts. They explain the concept of font families and how to use fallback options in case a preferred font is not available. The session includes the practical application of font properties such as font-style, font-weight, and font-variant to enhance the typography of a website. The speaker also mentions the importance of font size and how to maintain consistency across different parts of a website.

20:04

🖋️ Final Thoughts on Text and Font Customization

The speaker concludes the discussion on text and font customization, summarizing the key points covered in the session. They emphasize the importance of understanding and utilizing various text and font properties to create visually appealing and readable web content. The speaker also provides information on where to find the video's code and invites viewers to join a Telegram group for regular updates on such topics.

Mindmap

Keywords

💡Text Formatting

Text formatting refers to the process of arranging and styling the text to enhance its appearance and readability. In the video, text formatting is a central theme, discussing various properties that can be applied to text such as color, alignment, and decoration. For example, the script mentions changing the text color to blue and setting background color properties to improve the visual presentation of the header.

💡Font Properties

Font properties are characteristics of the typeface used in text, including family, size, weight, and style. The video script delves into how to change and customize these properties to achieve a desired look for the text on a website. It explains how to select a font family like 'Times New Roman' and adjust font weight to make text bold or lighter.

💡CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. The script mentions using CSS to style elements like headers and paragraphs, applying properties directly within the style tag or linking an external stylesheet to control the appearance of the webpage elements.

💡Text Alignment

Text alignment is a formatting property that defines how text is aligned within its container. The video discusses different types of text alignment such as left, right, center, and justify. For instance, the script describes how to center-align text within a header or justify text in paragraphs to create a visually appealing layout.

💡Text Decoration

Text decoration involves adding visual effects to text, such as underlines, overlines, or line-throughs. The script explains how to use the 'text-decoration' property to apply these effects, enhancing the text's expressiveness and guiding the reader's attention to key information on the webpage.

💡Text Transform

Text transform is a CSS property that controls the capitalization of text. The video script discusses how to use 'text-transform' to change text to uppercase, lowercase, or capitalize each word. This is useful for styling headers or ensuring consistency in the presentation of text on a website.

💡Google Fonts

Google Fonts is a library of free licensed font families, accessible through fonts.google.com. The script mentions using Google Fonts to import custom fonts into a website, providing a wide range of typefaces that can be used to enhance the design and typography of the webpage content.

💡Font Weight

Font weight defines the thickness of the characters in a font and is typically measured in数值 values. The video script explains how to adjust the font weight to create visual hierarchy and emphasis, such as making headers bold by using a higher weight like 700.

💡Text Shadow

Text shadow is a CSS property that adds a shadow effect to text, creating depth and enhancing the text's visibility against the background. The script describes how to use 'text-shadow' to define the horizontal and vertical offset, blur radius, and color of the shadow, adding a stylistic touch to the text.

💡Web Fonts

Web fonts are fonts that are hosted on a server and can be used in CSS to style a webpage. The script refers to web fonts as those that are universally installed across all browsers and devices, ensuring consistent typography regardless of the user's local machine fonts.

💡Font Family

Font family is a group of typefaces having a similar basic design but varying weights and styles. In the video, the script discusses how to define a font family for a webpage, including fallback options if the preferred font is not available on the user's browser, ensuring a consistent reading experience.

Highlights

Introduction to text formatting and font properties in HTML and CSS for beginners.

Exploring text properties such as color, background color, and customizing fonts for a website.

Using the Inspector tool to directly modify text properties and observe changes in real-time.

Explanation of text alignment properties like text-align and their effects on layout.

Demonstration of the text-decoration property to add styles like underline, overline, and line-through to text.

How to apply text-transform to change the case of text, such as uppercase, lowercase, or capitalize.

Discussion on text-indent and its use for creating space before the first line of a block of text.

Introduction to letter-spacing and how it affects the spacing between characters in a text.

Explanation of line-height and its importance for readability and visual appearance of text.

Use of word-spacing to adjust the space between words for better text aesthetics.

Text-shadow property to create text effects with shadows, adding depth to text elements.

Practical examples of applying different text properties to enhance the presentation of web content.

Importing custom fonts from Google Fonts and implementing them in a website's CSS.

The concept of font fallback and how browsers handle the display of text when a font is not available.

Adjusting font size, weight, and style to create a consistent and visually appealing typography.

How to utilize CSS variables for font properties to maintain consistency across a website.

Final thoughts on the importance of understanding and applying text and font properties in web design.

Transcripts

play00:00

ही उसे गैस वेलकम तू डी कंप्लीट कोर्स

play00:01

यहां पर हम एचटीएमएल कस और जावास्क्रिप्ट

play00:03

को बिगनर्स लेकर एडवांस लेवल तक पढ़ रहे

play00:05

हैं आज हम बात करने वाले हैं टेक्स्ट

play00:06

फॉर्मेटिंग के बारे में आज हम बात करेंगे

play00:08

टेक्स्ट की कुछ प्रॉपर्टीज के बारे में

play00:10

एंड दें फॉन्ट की कुछ प्रॉपर्टीज के बारे

play00:11

में इसके अलावा आप लोग खुद से अपने कस्टम

play00:14

फॉन्ट कैसे उसे कर सकते हैं अपनी वेबसाइट

play00:15

के अंदर वह भी आज हम देख रहे होंगे सबसे

play00:17

पहले हम स्टार्ट करते हैं टेक्स्ट

play00:18

फॉर्मेटिंग के साथ तो उसके लिए मैं आया

play00:20

आपने वीडियो कोड के अंदर यहां पर हमने एक

play00:22

फोल्डर बना लिया टेक्स्ट एंड फॉन्ट इसके

play00:23

अंदर एक इंडेक्स और एचटीएमएल एक style.css

play00:25

है उसको हमने कनेक्ट भी कर दिया इस तरीके

play00:26

से इसके अंदर हम कुछ चीज लिखने वाले हैं

play00:29

ये मैंने यहां पर कॉपी पेस्ट कर दिया ये

play00:31

हमारे पास एक हेडर है एक पैराग्राफ है एक

play00:32

ए टैग है इसको देखते हैं कैसा दिख रहा है

play00:34

तो इसके लिए हम ओपन करेंगे इसको तो यहां

play00:37

पर एक हेडर है हमारे पास एक पैराग्राफ है

play00:39

और एक हमारे पास अंक का टैग है इनकी

play00:41

प्रॉपर्टीज को चेंज करते हैं तो इनकी

play00:42

प्रॉपर्टीज को चेंज करने के लिए हम यहां

play00:43

पर कोड की वजह सीधा इंस्पेक्टर टूल के

play00:45

अंदर भी चेंज कर सकते हैं सो डेट हमें

play00:47

अपने चेंज डायरेक्टली यहीं पर दिख जाए तो

play00:49

लर्निंग पर्पस के लिए काफी सही तरीका रहता

play00:50

है ऐसे हम यहां पर चेंज कर सकते हैं सीधा

play00:52

ही तो फॉर एग्जांपल आपने हेड टैग को

play00:54

सिलेक्ट करते हैं सबसे पहले तो मैं इसको

play00:56

सिलेक्ट करूंगा एंड दें हमारे पास ये हेडर

play00:58

ऐप इसके अंदर कुछ प्रॉपर्टीज ऑलरेडी ठंडे

play01:00

जो की हमारे यूजर एजेंट स्टाइल शीट ने दे

play01:01

राखी है मतलब हमारे क्रोम ब्राउज़र ने दे

play01:03

राखी है इनके अलावा एलिमेंट और स्टाइल के

play01:05

अंदर हम अपनी खुद की प्रॉपर्टीज डिफाइन कर

play01:06

सकते हैं तो यहां पर हम स्टार्ट करते हैं

play01:08

सबसे पहले कलर प्रॉपर्टी के साथ कलर और

play01:09

इसके बाद हम यहां पर कुछ भी कलर दे सकते

play01:11

हैं लेट्स से ब्लू तो हमारा कलर ब्लू हो

play01:14

गया यहां पर आप यहीं पर तुरंत चेंज करके

play01:15

चीज देख सकते हो जैसे की मैं लिखता हूं

play01:17

यहां पे ब्लैक तो आप देखो उसी टाइम कलर्स

play01:19

चेंज हो रहा है जैसे-जैसे मैं यहां पर

play01:20

नीचे जा रहा हूं कलर तुरंत चेंज हो रहा है

play01:23

तो ये वाला कलर अच्छा लग रहा है इसके

play01:25

अलावा हमारे पास होता है बैकग्राउंड कलर

play01:26

बैकग्राउंड कलर और यहां पर आप लोग

play01:29

बैकग्राउंड कलर सेट कर सकते हो इस तरीके

play01:31

से तो उसी टाइम हमारा बैकग्राउंड कलर भी

play01:33

चेंज होते जा रहा है आप यहां पर देख सकते

play01:35

हो जैसे ही मैं ग्राउंड फ्लोर को यहां पर

play01:36

चेंज कर रहा हूं तो हो क्या रहा है की

play01:37

हमारी एक लाइन प्रॉपर्टी यहां पर बन रही

play01:39

है इन लाइन स्टाइलिंग बन रही है जो की हर

play01:40

स्टाइल को ओवर ऐड कर देती है इससे मैं खैर

play01:43

फरक नहीं पड़ता क्योंकि हमारे कोड के अंदर

play01:44

चेंज नहीं हो रहा होगा ये कोड अभी भी

play01:45

हमारा वैसे का वैसे ही है देख लो कोड के

play01:48

अंदर अभी भी कुछ भी चेंज नहीं है कोर्ट के

play01:49

स्टाइल के अंदर मैंने कुछ भी नहीं लिखा है

play01:50

ये बेसिकली हमारी बस टेस्टिंग के लिए होता

play01:52

है हम जल्दी से चेक कर सकते हैं चीज कैसे

play01:54

कम कर रही है तो ये हो गया हमारा कलर

play01:55

प्रॉपर्टी एंड देन बैकग्राउंड कलर

play01:56

प्रॉपर्टी हमें पता है कलर्स से आप लोग

play01:58

टेक्स्ट कलर सेट कर सकते हो बैकग्राउंड

play01:59

डॉक्टर से आप लोग बैकग्राउंड कर सकते हो

play02:01

इसके अलावा तो हम पहले टेक्स्ट लिखेंगे ना

play02:04

टेक्स्ट हिफिन तो आप देखोगे टेक्स्ट से

play02:06

रिलेटेड बहुत सारी प्रॉपर्टी ए गई है और

play02:09

इतनी सारी प्रॉपर्टीज को हम जा के देख भी

play02:10

नहीं रहूंगी क्योंकि बहुत सारी प्रॉपर्टीज

play02:12

आप लोग उसे भी नहीं करते इनमें से लेकिन

play02:14

कुछ कॉमनली उसे प्रॉपर्टीज को अच्छे से हम

play02:16

देख रहे होंगे तो टेक्स्ट एलाइन उनमें से

play02:18

प्रॉपर टेक्स्ट एलाइन और इससे आप लोग अपने

play02:20

टेक्स्ट को लाइन कर सकते हो अभी फिलहाल ये

play02:21

आपका लाइन हो रखा है हम इसको सेट कर सकते

play02:24

हैं सेंटर तो देखोगे सेंटर करेंगे तो सीधा

play02:27

सेंटर में ए जाएगा टेक्स्ट एंड करेंगे तो

play02:29

राइट साइड में लाइन हो जाएगा इन हाइट

play02:31

करोगे तो जो भी इसके पेरेंट्स ने टेक्स्ट

play02:33

आलिंगन ले रखा था उसी को इन्हेरीट कर लेगा

play02:35

ठीक है तो बेसिकली अगर आपका ये जो हेडर है

play02:38

ये किसी दीव के अंदर है और उसे दीव के

play02:40

अंदर आपने टेक्स्ट एंड सेंटर कर रखा है तो

play02:42

इन्हेरीट करने से ये अपने आप अपने पैरेंट

play02:44

की प्रॉपर्टी को इन्हेरीट कर लेगा तो अगर

play02:45

पेरेंट्स ने टेक्स्ट एंड सेंटर कर रखा है

play02:46

तो ये भी अपने आपको सेंटर लाइन कर लेगा

play02:48

एंड दें हमारे पास ये होता है जस्टिफाई इस

play02:50

जस्टिफाई को देखना है ना तो हमें

play02:52

पैराग्राफ को सिलेक्ट करना चाहिए तो ऐसे

play02:54

करते हैं इसके अंदर पैराग्राफ को सिलेक्ट

play02:56

करते हैं हमारा पैराग्राफ हो गया और इसके

play02:58

अंदर अपनी प्रॉपर्टी चेक करते हैं तो

play02:59

नेक्स्ट लाइन यहां पर हम कर देते हैं

play03:01

जस्टिफाई तो आप देखोगे जिस तरीके से आपकी

play03:04

बुक्स के अंदर होता है आपने देखा होगा

play03:05

आपने बुक्स के अंदर पैराग्राफ जो होते हैं

play03:06

वो पुरी के पूरे N2 एंड आलिंगन होते हैं

play03:08

राइट एन तू एंड तो इस तरीके से जस्टिफाई

play03:10

कंटेंट होता है किसी किसी जगह पे एक स्पेस

play03:12

है किसी-किसी जगह पर दो स्पेस है लेकिन ये

play03:15

प्रॉपर एन तू एंड एलेन हो रखा है इसके

play03:18

अलावा हम यहां पर कर सकते हैं सेंटर तो

play03:19

यहां पर हमारा टेक्स्ट पूरा पूरा सेंटर

play03:20

लाइन हो जाएगा इस तरीके से आप लोग राइट भी

play03:23

कर सकते हो राइट इस तरीके से तो यहां पर

play03:25

राइट लाइन हो जाएगा ये इस तरीके से

play03:26

टेक्स्ट आने के बाद हमारे पास प्रॉपर्टी

play03:27

होती है टेक्स्ट डेकोरेशन उसको सेट करने

play03:29

के लिए ऐसा करते हैं इसको चूज कर लेते हैं

play03:31

हमारे एंगर टैग को और इसके अंदर हम

play03:33

टेक्स्ट डेकोरेशन सेट करते हैं तो फिलहाल

play03:35

देख रहे हैं आप टेक्स्ट डेकोरेशन के अंदर

play03:37

अंडरलाइन अपने आप ए रखा है यहां पर हम देख

play03:38

सकते हैं टेक्स्ट डेकोरेशन अंडरलाइन ये

play03:40

बाय डिफाल्टर हमारे लिंक को मिला होता है

play03:42

तो सो डेट लिंक आपके अलग ही दिखे यहां से

play03:45

पता चल रहा है अंडरलाइन की हेल्प से की ये

play03:46

लिंक क्लिक केवल ऐप इसके अलावा कलर भी

play03:48

यहां पर चेंज हो रखा है कुछ कुछ कार्स और

play03:50

इक्वल तू रखा है मतलब यहां पर जैसे आप

play03:52

अपने कर्सर को लेकर जाओगे तो वो पॉइंटर की

play03:54

तरह से बिहेव करेगा ठीक है तो ये कर

play03:56

प्रॉपर्टी होती है इसके अंदर इसके अलावा

play03:58

हम यहां पर चीज चेंज कर सकते हैं हम यहां

play03:59

पर इसको राइट कर सकते हैं टेक्स्ट

play04:00

डेकोरेशन

play04:02

इस तरीके से और यहां पर आप अंडरलाइन की

play04:04

जगह लिख सकते हो ओवरलाइन तो आपके ओवर लाइन

play04:08

ए जाएगा

play04:22

यहां पर लाइन थ्रू बनाया है इसका कलर क्या

play04:24

होगा तो मैं यहां पर कलर को सेट कर सकते

play04:26

हैं देख रहे हो यहां पर मैंने इसको एका कर

play04:28

दिया तो ये आपको कुछ एका दिख रहा होगा

play04:30

यहां पर ठीक है इसके अलावा हमारे पास

play04:33

टेक्स्ट डेकोरेशन

play04:35

स्टाइल और स्टाइल के अंदर डिफरेंट

play04:37

प्रॉपर्टी है जैसे यह दश प्रॉपर्टी है

play04:39

डॉटेड प्रॉपर्टी है डबल से दो लाइन ए

play04:42

जाएंगी

play04:43

और आपके पास एक सॉलिड प्रॉपर्टी तो रहती

play04:45

है इसके अलावा एक बेबी प्रॉपर्टी भी रहती

play04:47

है इस तरीके से तो आप लोग यहां पर कुछ

play04:49

फंकी फंकी चीज कर सकते हो जैसे की यहां पे

play04:50

कर दिया आपने अंडरलाइन और अंडरलाइन में ये

play04:54

कुछ वे भी तरीके से टेक्स्ट दिख रहा है

play04:55

ठीक है तो ये डिफरेंट डिफरेंट प्रॉपर्टी

play04:57

होती है आपके पास टेक्स्ट डेकोरेशन से

play04:58

रिलेटेड हम इन प्रॉपर्टीज को यहां पर कॉपी

play05:00

कर सकते हैं और अपने कोर्ट में यहां पर

play05:02

पेस्ट कर सकते हैं तो h1

play05:06

यहां पर हमने इस तरीके से प्रॉपर सेट कर

play05:08

दी

play05:11

जा चुकी है टैक्स डेकोरेशन के बाद हम

play05:14

देखेंगे टेक्स्ट ट्रांसफॉर्म तो टेक्स्ट

play05:16

ट्रांसफॉर्म के लिए मैं सिलेक्ट कर लेता

play05:17

हूं अपने h1 को और यहां पर हम टेक्स्ट

play05:19

ट्रांसफॉर्म सेट कर सकते हैं टेक्स्ट

play05:20

ट्रांसफॉर्म इसकी हेल्प से आप लोग अपने

play05:23

टेक्स्ट कर सकते हो तो जैसे मैंने यहां पर

play05:25

केपीटलाइज इससे हमारे सारे के सारे शब्द

play05:28

का पहला लेटर कैपिटल हो जाएगा वो ऑलरेडी

play05:29

कैपिटल था वैसे तो उसके अलावा हमारे पास

play05:31

होता है की लोअर केस उसे सेक्स करें लोअर

play05:33

केस हो जाएंगे उसके अलावा हमारे पास होता

play05:35

है अपार केस इससे अपार केस हो जाएंगे इस

play05:37

तरीके से ठीक है अब आप यहां पर सोच रहे

play05:39

होंगे की भैया ये तो बहुत सारी प्रॉपर्टीज

play05:40

हो गई है ये सारी हमें याद करनी पड़ेगी

play05:41

क्या तो यार आपको याद नहीं करना होता है

play05:43

एक्चुअली आप गूगल सर्च करते हो ठीक है

play05:45

मैंने गूगल सर्च किया की ठीक है मुझे

play05:47

अंडरलाइन बेबी चाहिए तो अंडरलाइन बेबी

play05:49

करके मुझे यहां पर कुछ ना कुछ मिल जाएगा

play05:50

सीएससी प्रॉपर्टी क्या होती है इसके अलावा

play05:52

हमारे पास W3 स्कूल है जिसके अंदर से मैं

play05:54

कस टेक्स्ट में गया और डिफरेंट डिफरेंट

play05:56

प्रॉपर्टीज में हैंडल कर का रहा हूं देख

play05:57

रहे हो तो मैंने आपको बताया टेक्स्ट लाइन

play05:59

किस तरीके से कम करता है इसके अलावा

play06:01

टेक्स्ट डेकोरेशन में आपको बताया टेक्स्ट

play06:03

डेकोरेशन के अंदर एक थिकनेस भी होता है

play06:04

प्रॉपर्टी इसकी हेल्प से आप लोग ठीक है

play06:06

चेंज कर सकते हो तो ये बहुत अच्छा रिसोर्स

play06:08

है जहां पर आप राइट योरसेल्फ करोगे तो आप

play06:11

यहीं पर देख सकते हो किस तरीके से

play06:12

प्रॉपर्टी कम कर रही हैं इसके अलावा आप

play06:14

यहीं पर कोड में चेंज करके चीज देख सकते

play06:16

हो तो अगर आप लोग अभी लर्न ही कर रहे हो

play06:17

तो आपके लिए बहुत अच्छी वेबसाइट है यहां

play06:19

पर आओ हैंड्स ऑन एक्सपीरियंस लो किस तरीके

play06:21

से चीज कम कर रहे हैं और यहां पर रन करके

play06:22

आप लोग डायरेक्टली यहां पर चेक कर सकते हो

play06:24

आपके कोड को तो एक बहुत अच्छी वेबसाइट है

play06:26

जिसको हम उसे करना चाहिए अच्छे से इसके

play06:28

अंदर हम बात करेंगे अब टेक्स्ट स्पेसिंग

play06:29

के बारे में टेक्स्ट स्पेसिंग के अंदर आप

play06:31

लोगों के पास डिफरेंट डिफरेंट चीज होती

play06:32

हैं टेक्स्ट इंडेंट इससे क्या होता है की

play06:34

आप लोगों का पहला वर्ड जो होता है वो

play06:36

थोड़ा सा इंडियन जो था पहली लाइन एक्चुअली

play06:38

इंडियन जो आती है थोड़ी सी आगे की साइड तो

play06:40

इसको देखते हैं जरा कैसे कम करता है तो

play06:41

उसके लिए मैं अपने पैराग्राफ को टेक्स्ट

play06:43

एलाइन लेफ्ट कर देता हूं या फिर आप यहां

play06:46

पर अगर नहीं भी लिखोगे तो वो भी बाय

play06:47

डिफॉल्ट टेक्स्ट लाइन लेफ्ट होता है उसके

play06:49

बाद हम यहां पर चीज लिख सकते हैं जैसे की

play06:52

टेक्स्ट इंडेंट और यहां पर लिखते हैं

play06:56

तो आप देखोगे पहला वाला वर्ड अपने आप 40

play07:00

पिक्सल यहां पर 40 पिक्सल गैप है अगर आपको

play07:02

थोड़ा और अच्छे से देखना तो आप लिख सकते

play07:03

हैं हम 80 पिक्सल तो आप देख रहे हो इस

play07:05

तरीके से इंडेंटेशन हो रही है या आपके

play07:07

पहली लाइन के वर्ड को थोड़ा सा आगे लेके

play07:09

आने की कम में आता है इसके अलावा हमारे

play07:10

पास होता है एक लेटर स्पेसिंग समझ में ए

play07:12

रहा होगा लेटर स्पेसिंग से होने वाला है

play07:13

इससे आप लोग अपने लेटर्स के बीच में स्पेस

play07:15

लगा सकते हो आप सारा तो लेटर स्पेसिंग

play07:18

करते हैं जिससे वैन राम तो देखो ये कितना

play07:22

सारा स्पेस यहां पर ए गया 19 की जगह हम

play07:24

0.1 ग्राम तो ये थोड़ा दूर-दूर हो गया ये

play07:28

आप लोग स्टाइलिंग के पर्पस पर कहीं पर उसे

play07:29

कर सकते हो इस तरीके से इसके अलावा हमारे

play07:31

पास होता है एक लाइन हाइट लाइन हाइट लगाते

play07:33

हैं यहां पर लाइन हाइट और यहां पे लिख

play07:34

देते हैं लेट से लाइन है

play07:36

हम इसको थोड़ा सा और बड़ा कर देते हैं

play07:38

लेट्स से 1.6

play07:40

तो यह थोड़ा और दूर हो गया और अगर यह कोई

play07:43

ब्लॉक

play07:44

यहां पर उसकी इंप्रूव हो चुकी होती इसको

play07:47

एक्चुअली हम लाइन पे लेटर स्पेसिंग को

play07:49

यहां से हटा सकते हैं क्योंकि लेट

play07:50

aspacing नहीं भी रहेगा तो भी readibility

play07:52

अच्छी है लेकिन लाइन हाइट बढ़ा के हमारी

play07:53

रीडेबिलिटी थोड़ी और इंप्रूव हो जाती है

play07:54

इसके अलावा हमारे पास होता है शब्द फेसिंग

play07:56

और व्हाइट स्पेस व्हाइट स्पेसिंग से आप

play07:58

लोगों के डिफरेंट डिफरेंट शब्द के बीच में

play07:59

स्पेस ए रहे होते हैं जैसे हम लोग इसकी

play08:01

एग्जांपल को यहां पर देख सकते हैं शब्द

play08:03

बेसिंग को तो यहां पर इन्होंने क्या किया

play08:05

हुआ है डिफरेंट डिफरेंट पैराग्राफ से हम

play08:06

इस वाले पैराग्राफ के अंदर इन्होंने शब्द

play08:08

बेसिन को बढ़ा रखा है यहां पर 10 पिक्सल

play08:10

किया हुआ है और नीचे वाले के अंदर

play08:11

उन्होंने - 2 पिक्सल किया हुआ है तो इससे

play08:13

आप देख रहे हो शब्द आपस में चिपक गए हैं

play08:15

और अगर हम यहीं पर चेंज करके देखें सब में

play08:17

ओवरलैप कर देता हूं -20 पिक्सल लिख के और

play08:19

मैं करूंगा तो आप देख रहे हो डिफरेंट

play08:21

डिफरेंट शब्द एक दूसरे के ऊपर ही ओवरलैप

play08:23

कर रहे हैं तो इसको आप ज्यादा उसे नहीं

play08:24

करोगे लेकिन आप समझ में ए रहा है की ठीक

play08:25

है आप लोग इसके अंदर पॉजिटिव पिक्सल भी दल

play08:28

सकते हो और नेगेटिव पिक्सल भी दल सकते हो

play08:29

तो ये आपके टेक्स्ट फेसिंग के लिए कुछ

play08:31

प्रॉपर्टीज थी अब हम बात कर सकते हैं

play08:32

टेक्स्ट शैडो के बारे में और ये बहुत

play08:34

इंटरेस्टिंग प्रॉपर्टी है इसकी हेल्प से

play08:35

आप लोग कूल कूल इफेक्ट लेकर ए सकते हो

play08:37

अपने फॉन्ट के अंदर टेक्स्ट के अंदर तो

play08:39

सबसे पहले टेक्स्ट शैडो किस

play08:44

शैडो कितना दूर होगा और वर्टिकल शैडो

play08:47

कितना दूर होगा तो ये बता रहा है आपका

play08:48

हॉरिजॉन्टल हॉरिजॉन्टल कितना दूर है आपके

play08:50

करंट फॉन्ट से टेक्स्ट शैडो तो वो तू

play08:53

पिक्सल राइट साइड में है और वर्टिकल तू

play08:55

पिक्सल नीचे है तो यहां पर आप देख सकते हो

play08:57

की ये एक रेड कलर का शैडो यहां पर दिख रहा

play09:00

है और इसके अंदर ये तू पिक्सल राइट साइड

play09:02

में और तू पिक्सल नीचे है इसको मैं अपने

play09:04

फॉन्ट के अंदर भी लेके ए सकते हैं तो उसके

play09:06

लिए कम करते हैं इन दोनों को साइड बाय

play09:08

साइड लेके आते हैं अपने कोर्ट को और इसको

play09:10

और यहां पर हम अपने एच1 के अंदर से ये

play09:12

सारी चीज अभी फिलहाल के लिए कमेंट आउट कर

play09:14

देते हैं तो ये अभी फिलहाल हमारा कुछ ऐसा

play09:16

दिख रहा है इसके अंदर इस रीलोड करता हूं

play09:19

तो ये अभी फिलहाल कुछ इस तरीके से दिख रहा

play09:21

है मैं यहां पर टेक्स्ट शैडो सेट करता हूं

play09:22

टेक्स्ट शैडो और इस शैडो के अंदर आप लोग

play09:25

कुछ प्रॉपर्टीज ए सकते हो सबसे पहले हम

play09:26

डालेंगे एक्स डायरेक्शन में कितना दूर है

play09:28

ये तो लेट्स से फोर पिक्सल तो ये

play09:32

एक्सट्रैक्शन में फोर पिक्सल हो गई शैडो

play09:33

फाइट एक्शन में कितना नीचे है लेट से 4

play09:36

पिक्सल तो व्हाइट डायरेक्शन में 4 पिक्सल

play09:37

नीचे ए जाएगी ये तो ये इस तरीके से दिख

play09:39

रही है आपको कुछ इसके कलर क्या है तो कलर

play09:41

में सेट करता हूं लेट्स से रेड तो आते हो

play09:44

यहां पर जो शैडो है वो आपकी रेड कलर की बन

play09:46

गई है अगर आपको शैडो को थोड़ा ब्लर भी

play09:48

करना है तो आप तीसरी प्रॉपर्टी डिफाइन कर

play09:49

सकते हैं यहां पे यहां पर तीसरी प्रॉपर्टी

play09:51

आपकी ब्लड रेडियस बता रही होगी तो शुरुआत

play09:53

में ब्लड रेडियस हम यहां पर सेट कर देता

play09:54

है वैन पिक्सल तो आप देखोगे की ये थोड़ा

play09:57

सा ब्लर हुआ यहां पर लेकिन इसको थोड़ा

play09:58

ज्यादा ब्लड करना है लेट्स से फाइव पिक्सल

play10:01

तो यहां पर ये काफी ज्यादा ब्लर हो गया है

play10:03

राइट तो इस तरीके से आप लोग यहां पर

play10:05

टेक्स्ट शैडो सेट कर सकते हो और इस साइड

play10:07

आपको इस तरीके से दिखाई देगी शैडो के साथ

play10:09

आप लोग और भी कई सारे कम कर सकते हो फॉर

play10:10

एग्जांपल लेट्स से मैं इसको यहां पर करता

play10:11

हूं वैन पिक्सल जिससे की ये ज्यादा ब्लड

play10:14

ना दिखे इसके अलावा हम यहां पर एक और शैडो

play10:16

भी लगा के दिखाता हूं आपको तो उसके लिए

play10:17

मैं यहां पर लगाऊंगा लेट से 5 पिक्सल

play10:21

फाइव पिक्सल

play10:23

वैन पिक्सल एंड लक्ष्य ब्लू अब होगी यहां

play10:28

पर रेड रेड शैडो के बाहर एक ब्लू कलर की

play10:30

शैडो भी आपको दिखाई देगी राइट और इसको मैं

play10:32

थोड़ा और दूर करूंगा तो आपको और अच्छे से

play10:34

दिखाई दे करता हूं आते पिक्सल 8

play10:40

पिक्सल राइट में और एक पिक्सल बॉटम है

play10:42

आपको ये ब्लू कलर की शर्ट दिखाई दे रही है

play10:44

एवं आप चाहो तो आपने नॉर्मल फॉन्ट को यहां

play10:46

से गायब भी कर सकते हो उसके लिए आप यहां

play10:48

पर लिखोगे कलर और कलर को आप लोग करने के

play10:51

लिए लिख सकते हो ट्रांसपेरेंट तो

play10:53

ट्रांसपेरेंट कलर से आप लोगों का नॉर्मल

play10:55

जो एक्चुअल फॉर्म था ब्लैक कलर का वो तो

play10:57

गायब हो गया अब आपको सिर्फ यहां पर टैक्स

play10:59

शैडो ही दिखाई दे रही है इसके अंदर अगर आप

play11:01

लोगों को ब्लर करके टेक्स्ट अपना दिखाना

play11:03

है तो उसके लिए एक बहुत अच्छा तरीका होता

play11:04

है की यहां पर ऐसे कर लेंगे इसे हम ब्लैक

play11:06

और उसके बाद हम यहां पर इसे ब्लर कर सकते

play11:08

हैं तो आप देखोगे की आपका टैक्स यहां पर

play11:10

ब्लड दिखाई दे रहा है आपको राइट तो इसलिए

play11:12

हो रहा है क्योंकि मैंने एक्चुअल टेक्स्ट

play11:13

को तो ट्रांसपेरेंट कर दिया है और सिर्फ

play11:15

मैं आपको शैडो दिखा रहा हूं जिसके अंदर

play11:17

मैंने शैडो का ब्लर रेडियस 10 पिक्सल क्या

play11:19

हुआ है तो इस तरीके से आप लोग अपने

play11:20

टेक्स्ट को ब्लड सकते हो अगर कभी कुछ उसे

play11:23

हमारी टेक्स्ट की प्रॉपर्टीज के बारे में

play11:24

अब हम बात करते हैं फॉन्ट के बारे में हम

play11:26

अपने फॉन्ट को भी एक्चुअली चेंज कर सकते

play11:28

हैं यहां पर तो इसके लिए पहले शैडो को हम

play11:30

यहां से हटा देते हैं और कलर को वापस लेकर

play11:32

आते हैं कलर को करते हैं हम ब्लैक या फिर

play11:34

हम कलर को यहां से हटा देंगे तो अपने आप

play11:36

कलर बाय डिफॉल्ट ब्लैक कलर का ही होता है

play11:37

तो ये शैडो वगैरा हो गया यहां पर कुछ और

play11:40

कोड भी ए जाएगा मैं यहां पर कोड एक्चुअली

play11:41

लिख दूंगा सो डेट आपको जितने भी

play11:43

प्रॉपर्टीज हमने पढ़ी थी saikshari

play11:45

अवेलेबल हूं मैं फिलहाल इनको कमेंट करते

play11:46

जा रहा हूं क्योंकि हम डिफरेंट डिफरेंट

play11:47

चीज देखते जा रहे हैं धीरे-धीरे करके हम

play11:49

बात करते हैं पहले फॉन्ट के बारे में तो

play11:51

फॉन्ट को हम एक्चुअली देख चुके हैं एक बार

play11:53

जब हम बात की थी फॉन्ट फैमिली की फॉन्ट

play11:56

फैमिली के अंदर मैंने आपको बताया था जैसे

play11:57

यहां पर डिफरेंट डिफरेंट टाइप के फॉन्ट है

play11:58

कैरियर न्यू तो इसे आप देखोगे की यहां का

play12:01

फॉन्ट चेंज हो गया एक्चुअली ठीक है इस

play12:03

तरीके से लेकिन ये किस तरीके से कम कर जरा

play12:04

समझते हैं तो हो क्या रहा है की आपका ये

play12:07

वाला जो फॉन्ट है इसकी पुरी की पुरी फॉन्ट

play12:09

फैमिली होती है और फैमिली के अंदर आप

play12:11

डिफाइन कर सकते हो की आपका जो फॉन्ट है

play12:12

उसका glift किस तरीके से दिखेगा यहां पर

play12:14

हम डिफाइन कर रहे हैं की वो कैरियर न्यू

play12:15

रहने वाला है बाय डिफॉल्ट हमारे पास

play12:17

फैमिली होती है इस तरीके से हमें फॉन्ट

play12:19

दिखा देते हैं हम चाहे को सेंसेटिव कर

play12:22

सकते हैं और सेंस सीरीफ के अंदर हमें कुछ

play12:25

इस तरह से

play12:26

डिफरेंस क्या है की तारीफ के अंदर आप देख

play12:28

रहे होंगे जैसे आप यहां पर देखो ये आपका

play12:31

शरीफ़ है नीचे आपका sheriffin ऊपर आपका

play12:33

सेंसर है बी को देखो सेन शरीफ के अंदर से

play12:36

ये जो चोंच बनी होती है ना एक्चुअली

play12:40

एल के ऊपर ये लगा हुआ है हल्का सा बीके

play12:42

साइड में ये सब लगा हुआ है ये सब बढ़ जाता

play12:44

है ठीक है तो शरीफ के अंदर ये सब चीज लगी

play12:46

होती है संसारी में ये नहीं लगी होती सेन

play12:48

शरीफ के फैमिली के अंदर आपके आते हैं

play12:49

टाइम्स न्यू रोमन वाला फॉन्ट राइट स्टेप

play12:51

के फॉन्ट हमारे सेंस सीरीफ के अंदर आते

play12:53

हैं वहीं पर शायरी के अंदर आता है हमारा

play12:55

एरियल फॉन्ट तो आप यहां पर लिख सकते हो

play12:57

टाइम्स न्यू रोमन तो यहां पर जो हम लिखते

play12:59

हैं टाइम्स न्यू रोमन वाला फॉन्ट हो गया

play13:01

किसी ब्राउज़र में टाइम्स में रोमन नहीं

play13:03

मिला तो उसे टाइम पर आप टाइम्स वाले फॉन्ट

play13:06

फैमिली में चले जाओगे राइट उसे ब्राउज़र

play13:08

के अंदर और अगर ये भी नहीं मिला तो शरीफ

play13:10

के अंदर चले जाओगे तो इस तरीके से फॉल बैक

play13:12

होता रहता है की अगर आपको नहीं मिला तो

play13:14

यहां पर चले जाओ और ये नहीं मिला तो यहां

play13:15

पर चले जाओ मैं एक तरीके से आपको दिखाता

play13:17

हूं यहां पे सपोज करो मैं आप लिखता हूं

play13:19

मोनो स्पेस राइट तो अभी फिलहाल टाइम

play13:21

स्नोमैन मिला हुआ है हमारे इसको तो यहां

play13:23

पर मोनोस्पेस नहीं दिख रही है लेकिन मैं

play13:25

जैसे यहां पर टाइम्स में रोमन की स्पेलिंग

play13:27

गलत कर देता हूं लेट्स से मैं यहां पर एस

play13:28

लगा देता हूं तो आप देखोगे की मैंने टाइम

play13:30

रोमन की स्पेलिंग गलत कर दिया अब इसको ये

play13:32

वाला फॉन्ट तो नहीं मिल रहा है तो अभी

play13:33

क्या कर रहा है फॉल बैक कर रहा है

play13:34

मोनोस्पेस के ऊपर राइट अगर मोनो स्पेस भी

play13:37

नहीं मिलता उसके बाद मैंने यहां पर कुछ

play13:38

लिखा होता है लेट्स से यहां पे लिख देता

play13:40

हूं फांसी तो अगर इसको मोनस स्पेस भी नहीं

play13:42

मिला तो सपोज करो मैं यहां पे स्पेलिंग

play13:43

गलत कर देता हूं मोनो स्पेस तो इसको मोनो

play13:46

स्पेस भी नहीं मिला तो ये फैंटेसी के ऊपर

play13:47

फालबैक कर जाएगा इस तरीके से तो ये आपकी

play13:49

कुछ फॉन्ट फैमिली होती है यहां पर अपने

play13:51

खुद के फॉन्ट भी लेके ए सकते हैं तो उसके

play13:53

लिए हम उसे कर सकते हैं गूगल फॉन्ट का

play13:55

उसके लिए हम जाएंगे fonts.google.com

play13:56

फौंट्स google.com

play14:00

और यहां पर मैं काफी सारे अच्छे-अच्छे

play14:01

फॉन्ट देखने को मिलेंगे शुरुआत में आप देख

play14:03

रहे हैं और ये सारे फौंट्स हैं इनको आप

play14:06

एक्चुअली अपनी वेबसाइट के अंदर उसे कर

play14:07

सकते हो आपको जो भी फॉन्ट अच्छा लगे आप

play14:09

उसको अपनी वेबसाइट के अंदर चीज कर सकते हो

play14:11

फॉर एग्जांपल जैसे मुझे ये फॉन्ट थोड़ा सा

play14:12

फंकी टाइप का लग रहा है इसको अपने हैदर के

play14:15

अंदर उसे कर सकते हैं तो आप इसको सिलेक्ट

play14:17

करोगे और यहां पर आप देख लो डाउनलोड

play14:19

फैमिली लिखा हुआ है एक्चुअली इस तरीके से

play14:20

डाउनलोड नहीं करेंगे हम थोड़ा नीचे आएंगे

play14:22

यहां पर और यहां पर हम चेक कर सकते हैं की

play14:25

ये आपके फॉन्ट में किस तरीके से दिखाई

play14:27

देगा तो लेट्स से मैं आप लिखता हूं कोडिंग

play14:30

शटल तो ये कुछ इस तरीके से आपको दिखाई

play14:32

देने वाला है हमें क्या करना है यहां पर

play14:33

सिलेक्ट कर लेना है आपके पास डिफरेंट

play14:34

डिफरेंट टाइप के वेट है तो एक ही आप में

play14:38

आपका रेगुलर वेट है एक आपका बोल्ड वेट है

play14:40

रेगुलर के अंदर 400 वेट होता है बोल्ड के

play14:42

अंदर 700 वेट होता है ऐसा करते हैं हम

play14:44

रेगुलर वाले को लेकर आते हैं बाकी बोल्ड

play14:46

वगैरा हम अपने कस की हेल्प से कर लेंगे

play14:48

इसको तो मैं रेगुलर को लेकर आऊंगा प्लस और

play14:51

उसके बाद आपको यहां पर देखेंगे डिफरेंट

play14:52

डिफरेंट टाइप के तरीके हैं जिससे आप लोग

play14:54

इसको लेके ए सकते हो अपनी वेबसाइट के अंदर

play14:56

पहला होता है आपका लिंक इस लिंक के थ्रू

play14:58

भी एक ले के ए सकते हैं तो हमें करना इसको

play15:00

मैं करना कॉपी तो मैं इसको करूंगा

play15:03

पेस्ट करना है तो उसके लिए मैं अपना कोर्ट

play15:05

में आऊंगा इंडेक्स और टेस्टेबल के अंदर और

play15:06

यहां पर आपने स्टाइल शीट से पहले इसको मैं

play15:10

अपने हेड के अंदर पेस्ट कर दूंगा इस तरीके

play15:12

से और इसको इंडेंट कर देते हैं

play15:16

तो यहां पर हमारी तीन चीज ए गई हैं अपने

play15:18

आप ही और इससे लेकिन आपका कोड यहां पर

play15:20

चेंज नहीं होगा इससे आपका फॉन्ट चेंज नहीं

play15:21

होगा फॉन्ट अभी भी आपको टाइम नहीं हो रोमन

play15:23

देखने वाला है एवं अगर मैं इसको यहां से

play15:24

हटा दूंगा तो भी आपका फोन जो बाय डिफॉल्ट

play15:26

रहता है वही देखने वाला है आप यहां पर देख

play15:28

सकते हो फॉन्ट में कुछ भी चेंज नहीं हुआ

play15:30

लेकिन अगर आपको फॉन्ट में चेंज करना है

play15:31

फॉर एग्जांपल मैं चाहता हूं पूरे वेबसाइट

play15:32

के अंदर जितने भी फॉन्ट है उन सब में चेंज

play15:35

हो जाए तो मैं बॉडी के अंदर अपने फॉन्ट

play15:37

फैमिली को चेंज कर दूंगा और यहां पर हमें

play15:40

लिख सकता हूं देखते हैं क्या लिख सकता हूं

play15:41

यहां पर मैं आऊंगा यहां पर और यहां पर देख

play15:43

सकते हैं फोन फैमिली के अंदर आपको लिखना

play15:45

है सिल्क स्क्रीन एंड दें कर से तो अगर

play15:47

सिल्क स्क्रीन मिला तो ठीक है नहीं तो कर

play15:49

सिर्फ फॉलो बैक कर जाओ तो हमें स्क्रीन

play15:51

मिलेगा क्योंकि हम इसे पहले डाउनलोड कर

play15:53

लेना अपने वेबसाइट के अंदर ही तो उसके लिए

play15:55

हम यहां पर लिखूंगा ये सब चीज सिर्फ

play15:57

उसके बाद अपनी वेबसाइट पर आते हैं तो आप

play15:59

यहां पर देख रहे हो हमारा फॉन्ट यहां पर

play16:01

हर जगह चेंज हो चुका है थोड़ा लग रहा है

play16:03

लेकिन हान हमें समझ में ए रहा है किस

play16:04

तरीके से फॉन्ट हम दूसरी जगह से लेकर ए

play16:06

सकते हैं गूगल फौंट्स के अंदर और भी आपको

play16:07

डिफरेंट डिफरेंट टाइप के फॉन्ट मिल जाएंगे

play16:09

आपकी सारी जरूरत का यहां पे फॉन्ट मिल ही

play16:11

जाएंगे तो आप यहां पर जाकर डिफरेंट

play16:12

डिफरेंट फौंट्स को चेक कर सकते हो लेकिन

play16:14

आपको दिख रहा होगा यहां पर लिंक के अलावा

play16:15

एक और इंपोर्ट इसको भी उसे कर सकते हैं

play16:19

तो अभी हमने क्या किया था अपने एचटीएमएल

play16:22

के अंदर ये चीज कॉपी पेस्ट की थी आप लोग

play16:24

अपनी एचटीएमएल के अंदर चेंज ना करके सिंपल

play16:26

कस के अंदर चेंज करके भी फॉन्ट को लेकर

play16:29

सकते हो तो उसके लिए आपको इंपोर्ट पर

play16:31

क्लिक करना है एंड दें आपको यहां पर दिख

play16:32

रहा होगा की ये स्टाइल के अंदर ये कुछ चीज

play16:34

डालने के लिए का रहे हैं मैं स्टाइल के

play16:36

अंदर नहीं क्योंकि मैं तो एक्सटर्नल कस

play16:37

उसे कर रहा हूं तो उसके लिए मेरे पास इस

play16:39

बीच वाली चीज को कॉपी करूंगा एंड दें इसको

play16:41

मैं पेस्ट करूंगा यहां पे अपनी बॉडी से

play16:43

पहले सबसे ऊपर यहां पर इसे हम पेस्ट कर

play16:45

दूंगा अपने स्टाइल के अंदर तो इस तरीके से

play16:47

यहां से अपने आप भी जो हमारी कस लोड होगी

play16:49

तो सबसे पहले ये फॉन्ट डाउनलोड होगा और अब

play16:51

हम यहां पर से इस चीज को हटा सकते हैं मैं

play16:53

इसे कर देता हूं कमेंट इन तीन लाइनों को

play16:55

मैंने कमेंट कर दिया कमेंट करने के लिए

play16:57

कमांड स्लैश और अभी भी ये हमारा कम करेगा

play16:59

देखते हैं

play17:01

अभी हमारा कम कर रहा है और अगर मैं यहां

play17:04

से से कर दूंगा कमेंट इस लाइन को तो अब

play17:06

इसको नहीं मिलेगा वह फॉन्ट तो ये अपने आप

play17:08

ही कर्सिव के ऊपर फालबैक कर गया क्योंकि

play17:10

इसे सिल्क स्क्रीन वाला कोई फॉन्ट मिल

play17:12

नहीं रहा है अगर हम इसे वापस करेंगे

play17:13

अनकमेंट तो पहले हमारा फॉन्ट डाउनलोड होगा

play17:15

सनस्क्रीन वाला और उसके बाद ही आप यहां पे

play17:17

लोड हो जाएगा अब आप यहां पर एक चीज और

play17:18

नोटिस कर रहे होंगे सिल्क स्क्रीन के ऊपर

play17:20

तो कोट्स लगे हुए हैं कर्सिव के ऊपर

play17:22

कोर्ट्स नहीं लगे हुए हैं एक्चुअली जो

play17:23

कर्सिव है या फिर आप यहां लिख सकते हो

play17:25

मोनोस्पेस ये सारे के सारे आपके होते हैं

play17:27

वेब से फौंट्स वेब से फौंट्स वो फौंट्स

play17:30

होते हैं जो आपके वेबसाइट के अंदर आपके

play17:32

ब्राउज़र के अंदर हमेशा मिलेंगे ही

play17:33

मिलेंगे ठीक है तो जैसे यहां पे आते हैं

play17:35

हम वेब से फौंट्स के बारे में पढ़ते हैं

play17:37

तो वेब से फौंट्स और फौंट्स डेट आर

play17:39

यूनिवर्सल इंस्टॉल अक्रॉस ऑल ब्राउज़र एंड

play17:41

डिवाइसेज तो ये सारी सारी ब्राउज़र के

play17:43

अंदर बाय डिफॉल्ट इंस्टॉल होते ही हैं

play17:44

उनमें आते हैं आपके एरियल जो की सेंस के

play17:47

अंदर होता है वर्ड आना ये सारे के सारे आप

play17:49

उसे कर सकते हो बिना किसी दिक्कत के ठीक

play17:51

है तो आप लोग यहां पर सिंपल लिख सकते हो

play17:53

वर्ड आना

play17:55

इस तरीके से बढ़ाना लिखा मैंने तो पहले

play17:57

वर्ड आना नहीं मिला तो यह सब चीजों पर यह

play17:59

फॉल बैक करता जाएगा तो आप देखोगे की यहां

play18:01

पर अपने आप ही वर्ड आना इसको मिल गया ठीक

play18:04

है तो ये थोड़ा मुझे बटर फॉन्ट लगता है

play18:05

उसको मैं ज्यादा उसे कर रहा हूं तो यहां

play18:07

पर हम एक चीज कर सकते हैं की यहां से बीच

play18:09

में से ये दोनों चीजों को हटा देते हैं

play18:11

और सिल्क स्क्रीन को ऐड कर देते हैं

play18:15

तो किसी भी दिक्कत की वजह से अगर आप लोगों

play18:17

का ब्राउज़र

play18:20

सिल्क स्क्रीन को डाउनलोड नहीं कर पता है

play18:22

तो आप वर्ड आना पर फॉल पैक कर जाओगे ठीक

play18:24

है

play18:27

अब हम आगे बढ़ते हैं हमारे फॉन्ट के अंदर

play18:29

कुछ और भी प्रॉपर्टीज होती है सबसे पहले

play18:30

मैं इस पैराग्राफ को ठीक कर लेता हूं

play18:31

क्योंकि यह पैराग्राफ

play18:33

थोड़ा दिख रहा है मुझे यहां पर हेडर तक तो

play18:36

ठीक है लेकिन पैराग्राफ तो नॉर्मल रखते

play18:38

हैं अपना यहां पर हमारे पास एक होता है

play18:40

फॉन्ट साइज

play18:42

राइट और फॉन्ट साइज आपको दिख रहा होगा

play18:43

यहां पर कुछ इस प्रॉपर्टीज है बड़ी बड़ी

play18:46

आर मीडियम अगर आप लोग ये प्रॉपर्टीज उसे

play18:48

करते हो तो आप लोग मिक्सर करोगे की आपके

play18:49

वेबसाइट के अंदर डिफरेंट डिफरेंट टाइप के

play18:51

फॉन्ट साइज नहीं है मतलब चार पीपल पंच

play18:53

पिक्सल ऐसे-ऐसे करके नहीं है एक

play18:54

यूनीफामिटी मेंटेन हो राखी है की छोटे

play18:57

वाले फॉन्ट इस साइज के होंगे बड़े वाले

play18:58

फॉन्ट इस साइज के होंगे तो ये बेसिकली

play18:59

आपके वैरियेबल्स हैं तो आप इनको भी उसे कर

play19:01

सकते हो फॉर एग्जांपल मैं अपने पैराग्राफ

play19:02

को थोड़ा बड़ा करना चाहता हूं तो मैं यहां

play19:04

पर कर दूंगा लार्जर तो आप देखोगे मेरा

play19:06

पैराग्राफ थोड़ा बड़ा हो गया है लेकिन

play19:08

इनके अलावा आप लोग यहां पर आर एम्स भी उसे

play19:10

कर सकते हैं फॉर एग्जांपल मैं यहां पर उसे

play19:11

करता हूं तू ए रही है हम और मैं पता है की

play19:13

हमारे वैन के अंदर सेक्शन पिक्सल होते हैं

play19:14

तो ये आपका 32 पिक्सल का फॉन्ट साइज यहां

play19:16

पर हो चुका है तो इस तरीके से आप लोग

play19:18

फॉन्ट साइज को भी चेंज कर सकते हो मैं

play19:19

इसको कर देता हूं लेट्स से 1.2 और ये हम

play19:22

तो ये थोड़ा सा बड़ा दिखाई देगा मुझे

play19:24

नॉर्मल पैराग्राफ से इसके अलावा हमारे पास

play19:26

प्रॉपर्टी होती है फॉन्ट वेट फॉन्ट वेट के

play19:29

अंदर आपके पास डिफरेंट टाइप के फॉन्ट होते

play19:31

हैं आप देख सकते हो यहां पे 100 से लेकर

play19:32

700 तक 400 आपका नॉर्मल यूजुअल जो फॉन्ट

play19:36

होता है वो होता है इसके अलावा अगर आपको

play19:38

थोड़ा सा बोल्ड करना है तो आप लिख सकते हो

play19:39

600 तो आप देखोगे की थोड़ा सा बोल्ट जो की

play19:42

फॉन्ट वहीं पर आपके पास 100 तो उससे आप

play19:45

देखोगे की आपका फॉन्ट थोड़ा सा लाइट हो

play19:47

जाएगा यहां पर आप लोग ऐसे न्यूमेरिकल

play19:49

वैल्यू डिफाइन कर सकते हो लेट्स से 300 तो

play19:51

ये आपको थोड़ा सा पतला दिखाई देगा और वहीं

play19:53

पे आप लोग लिखोगे इसको 900 तो ये काफी

play19:55

ज्यादा बोल्ड दिखाई देगा आपको इसके अलावा

play19:57

एक प्रॉपर्टी और भी होती है उसको हम कहते

play19:58

हैं फॉन्ट स्टाइल तो इसको मैं कर देता हूं

play20:00

नॉर्मल एंड दें हमारे पास होता है फॉन्ट

play20:02

स्टाइल

play20:04

डिफाइन कर सकते हो नॉर्मल इटेल एक या फिर

play20:06

ऑब्लिक तो इटली कैन ऑब्लिक दोनों ही से

play20:09

होते हैं आते अलेक्स से करते हैं तो ये

play20:11

थोड़ा सा इटली साइज हो जाता है एंड दें

play20:12

ऑब्लिक करते हैं तो थोड़ा और ज्यादा

play20:15

इटलाइज हो जाता है ये थोड़ा और टेढ़ा हो

play20:17

जाता है लेकिन मुझे ज्यादा कुछ फर्क दिखता

play20:19

नहीं है इन दोनों के अंदर तो ये आपका

play20:20

फॉन्ट स्टाइल हो गया और यही कुछ प्रॉपर्टी

play20:22

आपके फॉन्ट के अंदर फॉन्ट फैमिली फॉन्ट

play20:23

साइज फॉन्ट वेट और फॉन्ट स्टाइल यही आप

play20:25

लोग ज्यादा टाइम उसे कर रहे होते हो मैंने

play20:26

यहां पर ह वैन के अंदर भी कुछ और

play20:28

प्रॉपर्टी ऐड कर दी है ये हम ऑलरेडी देख

play20:29

चुके हैं टेक्स्ट ट्रांसफॉर्म और टेक्स्ट

play20:31

लाइन टेक्स्ट डेकोरेशन लाइन हाइट लेटर

play20:34

स्पीकिंग शब्द फेसिंग इसके अलावा हमने

play20:35

देखा टेक्स्ट शैडो किस तरीके से कम करता

play20:37

है इनकी हेल्प से आप लोग अपने टेक्स्ट को

play20:39

अपने फॉन्ट को थोड़ा मॉडिफाई कर रहे होते

play20:41

हो इसके लिए हमने बात की आप कैसे अपने खुद

play20:43

के फॉन्ट आप लोग इसके अंदर दल सकते हो तो

play20:45

आप लोग गूगल फॉन्ट से अपने फॉन्ट को

play20:46

इंपोर्ट कर सकते हो उसको आप लोग अपने कस

play20:48

के अंदर इंपोर्ट कर सकते हो या फिर अपने

play20:50

एचटीएमएल के अंदर भी इंपोर्ट कर सकते हो

play20:51

आपको ज्यादा रिकमेंड किया जाता है की आप

play20:53

लोग अपने कस के अंदर ये इंपोर्ट कर के लाओ

play20:54

और उसके बाद अपने फॉन्ट फैमिली को अपने

play20:56

बॉडी के अंदर डिफाइन कर दो शो डेट आपके

play20:58

थ्रू आउट डी वेबसाइट

play21:03

स्पोर्ट्स इस वीडियो के कोड अवेलेबल होंगे

play21:05

और एक और चीज टेलीग्राम ग्रुप है हमारा

play21:07

जहां पर इस पहले से रिगार्डिंग अपडेट्स

play21:09

आते रहते हैं तो उसको जाकर आपको ज्वाइन कर

play21:10

लेना है और हम नेक्स्ट में बात करेंगे

play21:12

डिस्प्ले के बारे में डिस्प्ले प्रॉपर्टी

play21:13

ऑफ कस

Rate This

5.0 / 5 (0 votes)

Связанные теги
Text FormattingWeb DevelopmentCSS PropertiesJavaScriptHTML TutorialFont CustomizationAdvanced CSSWeb DesignTypographyFrontend
Вам нужно краткое изложение на английском?