Complete CSS - .OnlineGuruji

.OnlineGuruji

Provides E-Notes,Video Tutorials And Download Links For Students In hindi

*********************************************************

*********************************************************
********************************************************************************

Breaking

Ramchandicollege Saraipali

Technology Jobs

OnlineGuru Blog मे आपका स्वागत है ब्लॉग से संबन्धित जानकारी के लिए संपर्क करें मो ॰ नम ।-9826026747(सपन कुमार दास) अपने विषय से संबन्धित अपडेट प्राप्त करने के लिए ब्लॉग पे दिये गए Bell Icon को press करें कम्प्युटर,Science,English Grammer से संबन्धित विषय की अधिक जानकारी के लिए हमारे ब्लॉग अथवा यू ट्यूब चैनल को सब्क्राइब करे ..

Monday, April 6, 2026

Complete CSS

Complete CSS

by on in

 


CSS का पूरा नाम  Cascading Style Sheet होता है, यह एक स्टाइल शीट भाषा है इसका प्रयोग  Html document  के Layout या  Formatting को Handle करने  के लिय, Use किया जाता है, CSS वेब डेवलपर्स को वेब पेजों के लेआउट और अन्य दृश्य पहलुओं को नियंत्रित करने में मदद करता है।

             CSS आधुनिक वेब विकास में महत्वपूर्ण भूमिका निभाता है, क्योंकि यह आकर्षक, सुलभ और प्रतिक्रियाशील वेबसाइट बनाने के लिए आवश्यक उपकरण प्रदान करता है।

CSS  plays a crucial role in modern  web  development  by  providing  the  tools  necessary  to  create  visually  appealing, accessible, and responsive websites.
CSS वेब डॉकयुमेंट को स्टाइल करने की भाषा है जिसे  W3C – World Wide Web Consortium द्वारा विकसित किया गया है .इसका पहला संस्कारण 1996 मे प्रकाशित किया गया था . CSS4  इसका नवीनतम संस्कारण है . इसका उपयोग एक वेबपेज को सजाने के लिए होता है . और HTML के साथ साथ  ही इस्तेमाल होती है |
             CSS का जनक श्री  Hakon Wium Lie है . इनहोने ही सबसे पहले  1994 मे  CSS Rules को बनाया था और इसके बाद  W3C – World Wide Web Consortium द्वारा CSS Level 1 को दिसेम्बर  1996 मे प्रकाशित किया गया था .यह  CSS का पहला Version कहलाया |
CSS Version 1 से अब तक CSS के 4 और  Versions को प्रकाशित कराया जा चुका है  . जो क्रमशः  CSS Level 2, CSS Level 2.1 , CSS Level 3 और CSS Level4   है . CSS4 इसका नवीनतम  (Latest Version) संस्कारण है  

Types  of  CSS

Inline CSS: Inline CSS is applied directly to an HTML element using the style attribute. It has the highest priority among the three methods.

Example:-

<p style="color: blue; font-size: 16px;">

  This line is an inline-styled paragraph.

</p>

Internal CSS: Internal CSS is defined within the <style> tag inside the <head> section of an HTML document.

Example:-

<head>

  <style>

    p { color: green; font-size: 18px; }

  </style>

</head>

<body>

  <p>This line is styled using internal CSS.</p>

</body>

External CSS: External CSS is written in a separate .css file and linked to the HTML document using the <link> tag. This is the recommended method for large projects as it improves maintainability.

निचे दिए गए प्रोग्राम को  नोटपैड में टाइप कर .CSS एक्सटेंसन के साथ सेव करेंगे

/* style.css */

body {

  background-color: lightblue;

}

h1 {

  color: darkblue;

  text-align: center;

}

p {

  color: green;

  font-size: 18px;

}

.box {

  border: 2px solid black;

  padding: 10px;

  background-color: white;

}

उसके बाद निचे दिए गए HTML कोड को टाइप कर htmlएक्सटेंसनके साथ सेव करेंगे

<!DOCTYPE html>

<html>

<head>

  <title>External CSS Example</title>

  <!-- Linking External CSS -->

  <link rel="stylesheet" href="style.css">

</head>

<body>

 

  <h1>Welcome to External CSS</h1>

  <p>This is a paragraph styled using external CSS.</p>

  <div class="box">

    This is a styled box using class selector.

  </div>

 

</body>

</html>

यहाँ याद रखना जरुरी है की दोनों फाइल एक ही फोल्डर में सेव रहे

How It Works (Explanation)

1. <link> Tag

<link rel="stylesheet"  href="style.css">

Connects HTML with CSS file

href = CSS file name

rel="stylesheet" एक standard value है जो browser को बताती है कि linked file एक CSS file है, इसलिए इसके स्थान पर कोई अन्य value उपयोग नहीं की जा सकती।

क्यों “stylesheet” ही लिखना जरूरी है?

rel attribute browser को बताता है कि linked file का प्रकार क्या है

"stylesheet" एक standard value है जो specifically CSS के लिए use होती है

 

 अगर आप इसे बदल देंगे, तो browser CSS को पहचान नहीं पाएगा और style apply नहीं होगा।

 

2. CSS Selectors Used

✔ body

body { background-color: lightblue; }

  • Changes full page background

✔ h1

h1 { color: darkblue; }

  • Styles all <h1> headings

✔ p

p { color: green; }

  • Styles all paragraphs

✔ class (.box)

.box { border: 2px solid black; }

  • Applied only to elements with class="box"

Advantages of External CSS

  • Reusable across many pages
  • Clean HTML code
  • Easy to maintain
  • Faster website loading (cached file)

⚠️ Important Points

  • File name must match exactly (style.css)
  • Use correct path if in different folder:

Selector क्या होता है?

CSS में selector का मतलब होता है:
👉 किस HTML element पर style apply करना है, CSS में element selectors होते हैं, जो सीधे HTML tags को select करके उन पर styles apply करते हैं।

🔹 1. p selector

p {

  color: red;

}

👉 यह सभी <p> (paragraph) tags को select करता है
👉 सभी paragraph का color red हो जाएगा

🔹 2. h1 selector

h1 {

  color: blue;

}

👉 यह सभी <h1> headings को select करता है
👉 सभी headings blue हो जाएंगी

🔹 3. body selector

body {

  background-color: yellow;

}

👉 यह पूरे webpage (body part) को select करता है
👉 पूरा background yellow हो जाएगा

🔹 इन्हें क्या कहते हैं?

👉 इन्हें Element Selectors (या Tag Selectors) कहते हैं
क्योंकि ये सीधे HTML tags को select करते हैं

🔹 Simple Example

<html>

<head>

<style>

  body { background-color: lightblue; }

  h1 { color: red; }

  p { color: green; }

</style>

</head>



<body>

  <h1>Hello</h1>

  <p>This is paragraph</p>

</body>

</html>

Output:

  • Background → light blue
  • Heading → red
  • Paragraph → green

 

Class Selector :- In CSS, selectors are used to "target" the HTML elements you want to style.

Class Selector का उपयोग एक ही style को multiple HTML elements पर apply करने के लिए किया जाता है।

👉 इसमें class name के पहले . (dot) लगाया जाता है।

Class selector का उपयोग एक ही class name के माध्यम से कई HTML elements पर समान CSS style apply करने के लिए किया जाता है।

🔹 Syntax

.classname {

  property: value;

}

🔹 Example

CSS:

.myclass {

  color: blue;

  font-size: 20px;

}

HTML:

<p class="myclass">Paragraph 1</p>

<p class="myclass">Paragraph 2</p>

<h1 class="myclass">Heading</h1>

👉 Output:

  • सभी elements (p और h1) का color blue और size 20px होगा

 

🔹 Key Points

  • एक class को कई elements में use कर सकते हैं
  • एक element में multiple classes भी दे सकते हैं
  • Reusable styling के लिए उपयोगी है

 

 

Div और Span टैग (कंटेनर)

इन टैग्स का अपने आप में कोई दृश्य अर्थ नहीं होता है, लेकिन ये लेआउट के लिए आवश्यक हैं:

·         <div>(ब्लॉक-स्तर): एक "बॉक्स" या सेक्शन बनाता है। यह हमेशा नई पंक्ति से शुरू होता है और उपलब्ध पूरी चौड़ाई लेता है। इसका उपयोग लेआउट सेक्शन (जैसे साइडबार या फ़ूटर) के लिए किया जाता है।

<div style="background:yellow;">This is div</div>

·         <span>(इनलाइन): इसका उपयोग पैराग्राफ या शीर्षक के अंदर छोटे-छोटे टेक्स्ट के लिए किया जाता है । यह नई पंक्ति शुरू नहीं करता है।

<p>This is <span style="color:red;">important</span> text</p>

 

HTML DOM (Document Object Model) – Simple Explanation (Teacher Style)

HTML DOM एक ऐसा मॉडल है जो पूरे HTML document को tree structure (पेड़ जैसी संरचना) में represent करता है, ताकि हम JavaScript की मदद से webpage को बदल (modify) सकें। एक प्रोग्रामिंग इंटरफेस जो जावास्क्रिप्ट को पेज की सामग्री, शैली और संरचना को गतिशील रूप से बदलने की अनुमति देता है।

·  इनर एचटीएमएल: एक प्रॉपर्टी जिसका उपयोग एचटीएमएल एलिमेंट के अंदर की सामग्री को प्राप्त करने या बदलने के लिए किया जाता है।

1. डोम क्या है? (अवधारणा)

DOM एक ब्रिज (पुल) है जो HTML (स्ट्रक्चर) और JavaScript (लॉजिक) को जोड़ता है।

·         डी (दस्तावेज़): आपका HTML फ़ाइल।

·         ओ (ऑब्जेक्ट): HTML के सारे टैग्स ( <h1>, <p>, <div>) अब जावास्क्रिप्ट के लिए "ऑब्जेक्ट्स" बन गए हैं जिन्हे वो छू सकता है और बदल सकता है।

·         एम (मॉडल): एक पेड़ जैसी संरचना या नक्ष।

2. वृक्ष संरचना (पदानुक्रम)

छात्रों को बताएं कि DOM में हर चीज़ एक "नोड" होती है:

·         रूट नोड: <html> (सबका दादा/परदादा)।

·         पैरेंट नोड्स: <body> aur <head>.

·         चाइल्ड नोड्स: <body> अंदर के टैग जैसे <h1>हां <a>।

·         लीफ नोड्स: टैग के अंदर लिखा हुआ टेक्स्ट।

3. डोम का काम (यह क्यों मायने रखता है?)

बिना डोम के, जावास्क्रिप्ट को पता ही नहीं चलेगा कि स्क्रीन पर लिखा हुआ "सबमिट" बटन कहां है। DOM की मदद से JavaScript ये काम कर सकता है:

1.      HTML तत्वों को जोड़ें या हटाएं ।

2.      कंटेंट को चेंज करना (लाइव स्कोर अपडेट की तरह)।

3.      सीएसएस शैलियों को संशोधित करना (डार्क मोड सक्षम करना)।

 

🌳 DOM को कैसे समझें?

  • पूरा HTML page एक tree (पेड़) की तरह होता है
  • हर tag एक node (node = element) होता है

👉 Example structure:

html

 └── body

      ├── h1

      └── p

🔹 DOM क्या काम करता है?

DOM हमें allow करता है:

  • Content बदलना
  • Style बदलना
  • Element add या delete करना

🔹 Simple Example

HTML:

<!DOCTYPE html>

<html>

<body>



<h1 id="title">Hello Students</h1>

<button onclick="changeText()">Click Me</button>



<script>

function changeText() {

  document.getElementById("title").innerHTML = "Welcome to DOM";

}

</script>



</body>

</html>

🔍 Explanation (Step-by-step)

  1. id="title" → हम element को पहचान रहे हैं
  2. document.getElementById("title") → DOM के माध्यम से element को select किया
  3. .innerHTML → उसके अंदर का text बदल दिया

👉 Button click करने पर:
Hello Students → Welcome to DOM

 “HTML DOM एक programming interface है जो HTML document को tree structure में represent करता है और JavaScript की मदद से हमें webpage के elements को dynamically बदलने की सुविधा देता है।”

HTML DOM एक संरचना है जो HTML document को objects के रूप में प्रस्तुत करता है, जिससे JavaScript के द्वारा elements को access और modify किया जा सकता है।

 

1. DHTML Kya Hai? (The Concept)

DHTML koi single programming language nahi hai. Ye teen alag-alag cheezon ka milan hai jo ek static (ruki hui) website ko Dynamic (chalti-firti) banati hain.

Aap students ko ye formula de sakte hain:

DHTML = HTML + CSS + JavaScript + DOM

·         HTML: Structure banata hai (Haddi).

·         CSS: Look deta hai (Kapde).

·         JavaScript: Dimag aur movement deta hai (Kaam).

·         DOM: Wo raasta hai jiske zariye JavaScript, HTML aur CSS ko control karta hai.

2. DHTML Ka Jadoo (Main Features)

Bina page ko Reload kiye, screen par kuch bhi badal dena hi DHTML hai.

·         Example: Jab aap kisi menu par mouse le jaate hain aur wo apne aap niche khul jaata hai (Drop-down), ya kisi image par click karne se uska size bada ho jaata hai.

3. DHTML Form (Interactive Forms)

Ek normal HTML Form sirf data collect karta hai aur server par bhej deta hai. Lekin ek DHTML Form user ke sath "baat" karta hai.

DHTML Form ke fayde (Teaching Points):

1.      Real-time Validation: Jaise hi user galat email likhta hai, turant red color mein warning aa jati hai (Bina submit button dabaye).

2.      Interactive Elements: Agar user "Other" option select kare, toh ek naya text box apne aap prakat (appear) ho jaye.

3.      Calculations: Jaise hi user quantity likhe, total price apne aap calculate ho jaye.


By on
Tags:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)