#cssaspirants

Typography and text alignment (w3-center, w3-left) In Hindi.

So let’s learn about the classes related to typography in W3.CSS in HTML website.

W3.CSS Text Size Classes.

आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस .w3-xlarge, .w3-large, .w3-small, आदि बिल्ट-इन रेडीमेड टेक्स्ट क्लासेज का उपयोग करके वेब पेज टेक्स्ट कंटेंट फ़ॉन्ट साइज को बड़े से लेकर छोटे साइज आर्डर में प्रीव्यू कर सकते हैं।

W3.CSS Text Size Classes Example.

<h1 class=”w3-xlarge”>Now You See Extra Large Heading</h1>

<p class=”w3-small”>This is a smaller text example </p>

Classes for W3.CSS text size.

.w3-xlarge — मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट को एक्स्ट्रा लार्ज टेक्स्ट साइज में प्रीव्यू करता है।

.w3-large — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को लार्ज साइज आर्डर में प्रीव्यू करता है।

.w3-small — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को स्माल टेक्स्ट फॉण्ट साइज में प्रीव्यू करता है।

.w3-xsmall — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को एक्स्ट्रा स्माल साइज में प्रीव्यू करता है।

.w3-tiny — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को  स्माल टाइनी साइज में प्रीव्यू करता है।

W3.CSS Text Weight Classes.

आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस टेक्स्ट वेट क्लास्सेस का उपयोग किसी भी वेबपेज टेक्स्ट कंटेंट वेट को बोल्ड या थोड़ा डार्क आर्डर मे प्रीव्यू करते हैं।

W3.CSS Text Weight Classes Example.

<p class=”w3-bold”>Example of W3.CSS bold text </p>

W3.CSS Classes for Text Weight.

.w3-bold — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेबपेज टेक्स्ट कंटेंट  टेक्स्ट को बोल्ड आर्डर में प्रीव्यू करता है।

.w3-light — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट  टेक्स्ट को लाइट थिन (पतला) आर्डर में प्रीव्यू करता है।

.w3-medium — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को डिफ़ॉल्ट (मीडियम) फॉण्ट टाइपोग्राफी वेट आर्डर में प्रीव्यू करता है।

Typography and text alignment (w3-center, w3-left).

So let’s learn about the classes related to typography in W3.CSS in HTML website.

W3.CSS Text Size Classes.

You can preview web page text content font size in large to small size order using W3.CSS .w3-xlarge, .w3-large, .w3-small, etc. built-in readymade text classes in your existing HTML website webpage.

W3.CSS Text Size Classes Example.

<h1 class=”w3-xlarge”>Now You See Extra Large Heading</h1>

<p class=”w3-small”>This is a smaller text example </p>

Classes for W3.CSS text size.

.w3-xlarge — Previews text in extra large text size in existing HTML website webpage.

.w3-large — It previews the web page text content in the current HTML website webpage in large size order.

.w3-small — It previews the web page text content in the current HTML website webpage in small text font size.

.w3-xsmall — It previews the web page text content in the current HTML website webpage in extra small size.

.w3-tiny — It previews the web page text content in the current HTML website webpage in small tiny size.

W3.CSS Text Weight Classes.

You can use W3.CSS Text Weight Classes in your current HTML website webpage to preview any web page text content weight in bold or slightly dark order.

W3.CSS Text Weight Classes Example.

<p class=”w3-bold”>Example of W3.CSS bold text </p>

Creating rows and columns in W3.CSS table.

So let’s use w3-row and w3-col classes in W3.CSS grid-based table layout.

W3.CSS w3-row class.

एचटीएमएल वेबसाइट वेबपेज में w3-row क्लास का उपयोग कई कॉलम बनाने के लिए एक रौ कंटेनर क्रिएट किया जाता है। यह टेबल में एक कॉलम के लिए एक कोर के रूप में प्रीव्यू होता है. जहा आप w3-col क्लास को साथ में उपयोग कर एक कम्पलीट टेबल स्ट्रक्चर क्रिएट कर सकते है।

w3-row class basic use in W3.CSS.

<div class=”w3-row”>

<!—You can write column content from here –>

</div>

W3.CSS w3-col class.

किसी भी एचटीएमएल वेबसाइट वेबपेज में w3-col क्लास का उपयोग टेबल में रौ के अंदर कॉलम को क्रिएट करने में किया जाता है। जहा टेबल कॉलम आपके टेबल लेआउट के इंडिविजुअल ब्लॉक एलिमेंट हैं, और उन्हें आप अपने टेबल जरूरत के अनुसार रौ की कुल विड्थ के आधार पर क्रिएट किया जा सकता है।

w3-col class basic use in W3.CSS.

<div class=”w3-row”>

    <div class=”w3-col w3-quarter”>Column 1 element (3/12)</div>

    <div class=”w3-col w3-quarter”>Column 2 element (3/12)</div>

    <div class=”w3-col w3-quarter”>Column 3 element (3/12)</div>

    <div class=”w3-col w3-quarter”>Column 4 element (3/12)</div>

</div>

यहाँ आप 1 से लेकर 12 कॉलम के बीच की संख्या के रूप में प्रत्येक कॉलम की विड्थ को डिफाइन कर सकते हैं। जहा एक रौ में कॉलम की कुल संख्या पूरी चौड़ाई को भरने के लिए 12 होनी चाहिए।

Predefined button styles for webpage forms in W3.CSS.

Common button class in W3.CSS web page.

w3-button in W3.CSS Basic button style.

डब्लू3.सीएसएस में बटन क्लास w3-button में एक फंडामेंटल बिल्ट-इन बटन क्लास है। जहा आप एक सिंपल वेबपेज बटन बनाने के लिए बटन पैडिंग, बटन बॉर्डर, और बटन फ़ॉन्ट साइज जैसी बेसिक बटन स्टाइल्स और ऐट्रिब्यूट्स को अप्लाई कर सकते है। इसके साथ आप क्रिएटेड वेबपेज फॉर्म बटन अपीयरेंस और बटन बिहैवियर आदि को मॉडिफाई करने के लिए कई अन्य बटन क्लास को मैन्युअल अप्लाई कर सकते हैं।

W3.CSS Basic button style example.

<button class=”w3-button”>Simple Button</button>

W3.CSS Button Colors and Themes.

आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस के कई मल्टीप्ल कलर चॉइस के लिए बिल्ट-इन बटन क्लासेज को अप्लाई करके किसी बटन का डिफ़ॉल्ट कलर को जरूरत के अनुसार मॉडिफाई कर सकते हैं। जहा आप इन बटन क्लास से किसी बटन का बैकग्राउंड कलर और बटन टेक्स्ट के कलर को चेंज कर सकते हैं।

W3.CSS Button Colors and Themes Types.

w3-blue – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को नीला बटन कलर में बदलता है.

w3-green – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को हरा बटन कलर में बदलता है.

w3-red – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को लाल बटन कलर में बदलता है.

w3-yellow – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को पीला बटन कलर में बदलता है.

w3-orange – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को नारंगी बटन कलर में बदलता है.

w3-teal – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को टील बटन कलर में बदलता है.

w3-pink – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को पिंक बटन कलर में बदलता है.

w3-purple – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को पर्पल बटन कलर में बदलता है.

w3-black – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को ब्लैक बटन कलर में बदलता है.

w3-light-grey – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को लाइट ग्रे बटन कलर में बदलता है.

w3-dark-grey – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को डार्क ग्रे बटन कलर में बदलता है.

Predefined Button Styles in W3.CSS

Common button class in W3.CSS web page.

w3-button in W3.CSS Basic button style.          

Button class in W3.CSS is a fundamental built-in button class in w3-button. Where you can apply basic button styles and attributes like button padding, button border, and button font size to create a simple webpage button. Apart from this, you can manually apply many other button classes to modify the created webpage form button appearance and button behaviour etc.

W3.CSS Basic button style example.

<button class=”w3-button”>Simple Button</button>

W3.CSS Button Colors and Themes.

You can modify the default color of a button as per your requirement by applying W3.CSS built-in button classes for multiple color choices to your existing HTML website webpage. Where you can change the background color of a button and the color of the button text with these button classes.

W3.CSS Button Colors and Themes Types.

w3-blue – This W3.CSS button class changes the existing button color to blue button color.

w3-green – This w3.css button class changes the current button color to a green button color.

w3-red – This w3.css button class changes the current button color to a red button color.

w3-yellow – This w3.css button class changes the current button color to a yellow button color.

w3-orange – This w3.css button class changes the current button color to an orange button color.

w3-teal – This w3.css button class changes the current button color to a teal button color.

w3-pink – This w3.css button class changes the current button color to a pink button color.

w3-purple – This w3.css button class changes the current button color to a purple button color.

w3-black – This W3.CSS button class changes the current button color to black button color.

w3-light-grey – This W3.CSS button class changes the current button color to light grey button color.

w3-dark-grey – This W3.CSS button class changes the current button color to dark grey button color.

Applying Built-in Animations with w3-animate-* in W3.CSS

So, let’s apply animation effects using w3-animate-* class from W3.CSS in HTML webpage.

Overview of W3.CSS available animations.

आपको अपने वेबपेज में मौजूदा एचटीएमएल वेबसाइट वेबपेज में कंटेंट इनफार्मेशन को अट्रैक्टिव और कमर्शियल करने के लिए डब्लू3.सीएसएस आपको कई बिल्ट-इन एनिमेशन क्लास प्रोवाइड करता हैं. जिन्हें आप अपने डिजायर वेबपेज वेबसाइट कंटेंट एलिमेंट पर एनीमेशन को अप्लाई कर सकते हैं।

Here are some of the most commonly used W3.CSS animation classes.

w3-animate-top – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्क्रीन के टॉप डायरेक्शन से वेबपेज कंटेंट एलिमेंट को एनिमेट करता है।

w3-animate-bottom – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्क्रीन के बॉटम डायरेक्शन से वेबपेज कंटेंट एलिमेंट को एनिमेट करता है।

w3-animate-left – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्क्रीन के लेफ्ट डायरेक्शन से वेबपेज कंटेंट एलिमेंट को एनिमेट करता है।

w3-animate-right – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्क्रीन के राइट डायरेक्शन से वेबपेज कंटेंट एलिमेंट को एनिमेट करता है।

w3-animate-opacity – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट को एनिमेट कर ओपेसिटी इफ़ेक्ट को अप्लाई करता है।

w3-animate-zoom – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट में ज़ूमिंग एनिमेशन इफ़ेक्ट को अप्लाई करता है. यहाँ ज़ूम एनीमेशन वेबपेज एलिमेंट को ज़ूम इन और ज़ूम आउट प्रीव्यू करता है ।

w3-animate-fade – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट किसी एलिमेंट को इनसाइड और आउटसाइड से फ़ेड प्रीव्यू करता है।

w3-animate-slide – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस वेबपेज कंटेंट एलिमेंट को लेफ्ट से राइट डायरेक्शन में स्लाइड कर मूव करता है।

w3-animate-spin – यह एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस

वेबपेज कंटेंट में स्पिनिंग इफ़ेक्ट के साथ वेबपेज एलिमेंट को रोटेट करता है।

Applying Built-in Animations with w3-animate-* in W3.CSS

So let’s apply animation effects using w3-animate-* class from W3.CSS in HTML webpage.

Overview of W3.CSS available animations.       

W3.CSS provides you with many built-in animation classes to make the content information in your existing HTML website webpage attractive and commercial. You can apply animation on your desired webpage website content element.

Here are some of the most commonly used W3.CSS animation classes.

w3-animate-top – This animates the webpage content element from the top direction of the W3.CSS screen in an HTML website webpage.

w3-animate-bottom – This animates the webpage content element from the bottom direction of the W3.CSS screen in an HTML website webpage.

w3-animate-left – This animates the webpage content element from the left direction of the W3.CSS screen in an HTML website webpage.

w3-animate-right – This HTML website webpage animates the W3.CSS webpage content element from the right direction of the screen.

w3-animate-opacity – This HTML website webpage animates the W3.CSS webpage content and applies opacity effect.

w3-animate-zoom – This HTML website webpage applies zooming animation effect to the W3.CSS webpage content. Here the zoom animation previews the webpage element zooming in and out.

w3-animate-fade – This HTML website webpage previews the W3.CSS webpage content element fading in and out.

w3-animate-slide – This HTML website webpage moves the W3.CSS webpage content element sliding from left to right direction.

w3-animate-spin – This rotates a webpage element with a spinning effect in W3.CSS webpage content in an HTML website webpage.

Overriding predefined styles in W3.CSS

So let us effectively override the predefined styles classes in W3.CSS.

Using Custom CSS in W3.CSS.

मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्टाइल्स को ओवरराइड करने के लिए, आप डब्लू3.सीएसएस स्टाइलशीट लिंक को वेबपेज में लिंक करने के बाद कस्टम डब्लू3.सीएसएस कोड को मैन्युअली रूप से वेबपेज के लिए क्रिएट कर सकते हैं। इस तरह, आपके द्वारा कस्टम डब्लू3.सीएसएस स्टाइल्स बिल्ट-इन स्टाइल्स को ओवरराइड कर देगी, और ये पूरी तरह से आपकी पुरानी डब्लू3.सीएसएस फाइल को रिप्लेस कर देगी।

W3.CSS button styles override example.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Basic Overriding W3.CSS Styles Example</title>

    <link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>

    <style>

        /* let create ustom w3.css ode to Override button style */

        .w3-button {

            background-color: blue; /* apply Custom blue background */

            color: yellow;              /* apply Custom white yellow color */

            padding: 19px 34px;        /* apply Custom button padding */

            font-size: 20px;            /* apply Custom button font text size */

            border-radius: 20px;         /* apply Custom button border radius pie */

        }