Archive for October 2020
CSS All About in Hindi
1.CSS Introduction
2.Selectors
3.Combinators
4.Value Types
5.Fonts
6.Text
7.Backgrounds
8.Images
9.Tables
10.Lists
11.Links
12.Box Model
13.Width
14.Height
15.Borders
16.Padding & Margin
17.Overflow
18.Positioning
19.Display
20.Cursor
21.Visibility
22.Float
23.Attribute Selectors
24.Outline
25.z-index
26.box-shadow
27.Pseudo Classes
28.Pseudo Elements
29.border-image
30.text-shadow
31.@font-face
32.@media
33.@import
34.filter
35.object-fit
36.Transition
37.Transformation
Introduction to Cascading Style Sheet (CSS)
__________________________________________
CSS एक designing language है। इसका इस्तेमाल webpages को और भी beautiful बनाने के लिए किया जाता है। CSS के द्वारा आप HTML tags पर designing apply कर सकते है। CSS आप 3 तरह से apply कर सकते है।
Inline – इस method में आप CSS को HTML tag में ही define कर देते है। ऐसा आप style attribute के द्वारा करते है।
Internal – इस method में आप CSS को HTML tag में define करने की बजाए HTML file के <head> tag में <style> tag की मदद से define करते है।
External – इस method में आपकी CSS file और HTML file अलग अलग होती है। HTML file में आप CSS file को <link> attribute के द्वारा add करवाते है।
CSS से आप webpages के presentation को control कर सकते है। CSS आपको webpage की design पर पूरा control देती है। CSS से आप web page का text color, font family, background, margin, padding और position आदि set कर सकते है।
Property & Value
CSS बहुत ही powerful technology है। इसकी मदद से आप complete HTML page की presentation control कर सकते है। CSS property और value के context में काम करती है। जैसे की यदि आप web page का background-color change करना चाहते है तो background-color property है और जो आप value देंगे वो इसकी value होगी।
property:value;
जैसा की मैने ऊपर बताया inline style sheet में आप style attribute यूज़ करते है। लेकिन internal और external CSS के लिए <style> tag में selectors यूज़ किये जाते है। Selector उस tag, id या class का नाम होता है जिस पर आप CSS apply करना चाहते है। Selector के बारे में और अधिक detail से next tutorial में बताया गया है।
Advantages of Cascading Style Sheet (CSS)
CSS को यूज़ करने से आपका time बचता है। आप एक CSS file बना कर उसे कई HTML documents पर apply कर सकते है। आप हर HTML tag के लिए एक style fix कर सकते है और इसे जितने चाहे उतने webpages पर apply कर सकते है।
जब आप HTML attributes के द्वारा webpage को decorate करते है तो हर element के लिए अलग से attribute और value define करनी पड़ती है। ऐसा करने से code बहुत अधिक हो जाता है और pages धीरे load होते है। लेकिन जब आप CSS यूज़ करते है तो उस webpage में यूज़ होने वाले सभी tags के लिए आप एक बार ही styles define कर सकते है। ऐसा करने से code कम रहता है और आपके pages fast load होते है।
CSS के द्वारा webpage को maintain करना बहुत ही आसान होता है। उदहारण के लिए आप सभी headings का यदि color change करना चाहते है तो सिर्फ CSS में change कीजिये और ये सभी headings पर apply हो जायेगा।
यह आपको HTML से अधिक style options provide करती है। HTML के comparison में आप CSS से अधिक attractive web pages design कर सकते है।
CSS के द्वारा आप एक ही webpage को multiple devices के लिए configure कर सकते है। जैसे की mobile phones के लिए अलग styles यूज़ की जा सकती है।
अब HTML attributes का उपयोग बहुत कम हो चूका है। CSS को यूज़ करना अब एक global standard बन चूका है।
Applying Cascading style sheet (CSS)
Inline Style Sheet
निचे दिए गए उदाहरण को देखिये इसमें body tag के अंदर style attribute define किया गया है। इसके बाद style attribute में property और value define की गई है। इसे inline style sheet कहते है।
Example
<html>
<head>
<title>Inline CSS Demo</title>
</head>
<body style="background-color:pink">
<p>This is inline CSS Demo</p>
</body>
</html>
Internal Style Sheet
Internal style sheet में आप styles को tag के अंदर define नहीं करते है। Head section में <style> tag define किया जाता है। इसके बाद selectors को यूज़ करते हुए आप styles को define करते है। इसमें HTML code और CSS code को एक ही document में define किया जाता है।
Example
<html>
<head>
<title>Internal Style Demo</title>
<style>
body {
background-color:red;
}
</style>
</head>
<body>
<p>This is internal style sheet</p>
</body>
</html>
External Style Sheet
External style sheet के संदर्भ में CSS किसी दूसरी file में होती है। उस file को <link> tag द्वारा HTML file से जोड़ा जाता है। External style sheet से आपको बार बार CSS लिखने की जरुरत नहीं होती है। आप एक ही CSS file को कई HTML files पर apply कर सकते है। इसका उदाहरण निचे दिया जा रहा है।
Example
externalDemo.html File
<html>
<head>
<title>External Style Demo</title>
<link rel="stylesheet" type="text/css" href="externalDemo.css">
</head>
<body>
<p> This is external stylesheet</p>
</body>
</html>
externalDemo.css File
body {
background-color:lime;
}
Introduction to CSS Selectors
========================
CSS के syntax में selectors का important role होता है। आप किस element के ऊपर कौनसी style apply करना चाहते है ये आप selectors के द्वारा ही define करते है।
ये CSS के selectors ही है जो इसे इतनी powerful और efficient language बनाते है। Selectors आपको HTML के किसी भी element को select करके उसकी presentation को change करने की ability provide करते है।
इससे पहले की में आपको selectors के बारे में और बताऊँ आइये पहले CSS के syntax को समझ लेते है।
css-syntax
ऊपर दिए गए उदाहरण में h1 एक selector है। ये selector HTML के h1 tag पर apply हो रहा है इस तरह के selectors को element type selectors कहा जाता है।
यँहा पर HTML tag को ही selector की तरह यूज़ किया गया है। Selector के बाद curly brackets में color property और उसकी value को define किया गया है। ये property heading के text को red में change कर देती है।
Types of Selectors
*********************
CSS के द्वारा कई तरह के selectors provide किये गए है जिन्हें यूज़ करके आप और भी accurately काम कर सकते है। इन selectors के बारे में detail से निचे दिया जा रहा है।
Element Type Selectors
***************************
इस तरह के selectors किसी एक HTML tag पर apply होते है। इन selectors का नाम उसी HTML tag का नाम होता है। जब आपको किसी एक particular HTML tag पर कोई style apply करने की आवश्यकता हो तो आप इस तरह के selectors को यूज़ कर सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Element Type Selecter Demo</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>CSS is very powerful & effective</p>
</body>
</html>
ऊपर दी गयी script निचे दिया गया output generate करती है।
Universal Selector
*********************
Universal selector को * से represent किया जाता है। इस selector में define की गई styles सभी HTML elements पर apply हो जाती है। लेकिन याद रहे ये तभी काम करता है जब किसी element के लिए style अलग से define न की गई हो।
यदि किसी element के लिए अलग से style define की गई है या फिर वह element inline style sheet यूज़ करता है तो इस selector का कोई effect उस element पर नहीं होगा। इसका उदाहरण निचे दिया गया है।
<html>
<head>
<title>Universal Selector Demo</title>
<style>
*{
color:blue;
}
</style>
</head>
<body>
<h1>Global Warming</h1>
<p>Global warming is matter of talk around the world. It should be handled quickly. Otherwise it will be late before we know it.
</p>
</body>
</html>
यँहा पर universal selector h1 और p दोनों ही tags पर apply होगा और इनका color blue होगा। ये script निचे दिया गया output generate करती है।
Introduction to CSS Combinators
_______________________________
अभी तक आपने selectors के बारे में जान लिया है और आप उन्हे use भी कर चुके है। लेकिन अभी तक आपने सिर्फ single selectors को ही use किया है।
हालाँकि single selectors द्वारा आसानी से किसी भी element को design किया जा सकता है। लेकिन कई बार कोई element कई parent elements के अंदर हो सकता है या फिर वह element किसी ऐसी position पर हो सकता है की जिसे single selector द्वारा target नहीं किया जा सकता है।
उदाहरण के लिए आप किसी particular <div> के अंदर define किये गए paragraph को design करना चाहते है। इसके लिए आप एक single paragraph selector use कर सकते है क्योंकि ऐसा करने से webpage के सभी paragraphs पर वह style apply हो जाती है।
ऐसे में आपको div और paragraph selector को combinator द्वारा combine करके use करना होगा। जिससे आप interpreter को बताएँगे की paragraph particular <div> element का child है और आप उसे design करना चाहते है।
CSS combinators को दो selectors के बीच में relationship define करने के लिए use किया जाता है। इन्हें selectors के बीच special symbol के रूप में define किया जाता है। जैसा की नाम से ही पता चलता है combinators selectors को combine करते है और एक नया selector बना देते है।
यदि आप special elements पर ही style apply करना चाहते है तो दोनों selectors को id या class द्वारा target करेंगे ताकि webpage के सभी div और paragraphs target ना हो।
CSS में 4 तरह के combinators available है। इन्हें multiple selectors भी कहा जाता है। क्योंकि ये एक से अधिक CSS selectors को combine करते है।
Descendent Selector (space)
Child Selector (>)
Adjacent Sibling Selector (+)
General Sibling Selector (~)
आइये इन combinators के बारे में detail से जानने का प्रयास करते है।
Descendent Selector
____________________
इस combinator को सबसे अधिक use किया जाता है। यह हो सकता है की अभी तक आप कई बार इसको use कर चुके हो लेकिन आपको इसके बारे में अधिक जानकारी नहीं है।
Descendent selector ऐसे element को target करने के लिए प्रयोग किया जाता है जो किसी parent element के child हो। इस बात से कोई फर्क नहीं पड़ता है की वह child element कितने deep level पर है।
उदाहरण के लिए किसी div element के अंदर यदि एक unordered list define की जाए तो list elements को target करने के लिए आप CSS में div element के बाद space देकर li element define करते है। ऐसा करने से उस list के सभी li elements target हो जाते है।
हालाँकि <li> elements <ul> element के अंदर define किये गए है लेकिन आपको css में ul define करने की आवश्यकता नहीं है। क्योंकि जैसा की मैने बताया इस बात से कोई फर्क नहीं पड़ता की वह child element कितने deep level पर है।
Descendent selector का general syntax निचे दिया जा रहा है।
parent-element descendent-element (child at any level)
{
property:value;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है descendent element को parent element के बाद space देकर define किया जाता है। Descendent का मतलब होता है की वह child element है। इससे कोई फर्क नहीं पड़ता की वह कितने दूसरे parent elements के अंदर define किया गया है।
इस selector को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
#myDiv li{
background:lime;
}
</style>
</head>
<body id=”myDiv”>
<div>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</div>
</body>
</html>
Child Selector
______________
Child selector ऐसे elements को select करने के लिए प्रयोग किया जाता है जो किसी parent element के immediate child होते है। Immediate child से यँहा पर तात्पर्य ऐसे element से है जो उस parent element के अंदर define किये गए है लेकिन किसी दूसरे parent element के अंदर नहीं है।
उदाहरण के लिए आप किसी <div> के ऐसे <span> elements को target करना चाहते है जो div के child है लेकिन किसी दूसरे parent के अंदर define नहीं किये गए है तो इसके लिए आप इस selector को use कर सकते है।
Child selector का general syntax निचे दिया जा रहा है।
parent-element > child-element (but not inside any other parent element)
{
property:value;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है immediate child को parent element के बाद > (greater than) symbol लगाकर define किया गया है। इस selector को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
#myDiv > span
{
background:pink;
}
</style>
</head>
<body>
<div id=”myDiv”>
<span>span text</span>
<span>span text</span>
<p><span>this is also span text but not immediate</span></p>
<span>span text</span>
</div>
</body>
</html>
Adjacent Sibling Selector
________________________
Adjacent sibling selector किसी specify किये गए element के adjacent siblings को select करने के लिए प्रयोग किया जाता है।
कोई भी दो elements adjacent जब कहलाते है जब वे एक दूसरे के पहले या बाद में आते है। यानी जब दो elements एक दूसरे के सटे हुए रहते है तो वह adjacent कहलाते है।
कोई भी दो elements तब sibling कहलाते है जब उनका parent element same होता है। उदाहरण के लिए किसी <body> tag के अंदर define किये गए <div>, <p> और <table> आदि elements sibling होते है।
यानी की आसान भाषा में कहा जाए तो adjacent sibling selector ऐसे element को select करता है जो specify किये गए element से सटा (adjacent) हुआ भी है और उसका sibling (same parent) भी है।
इस selector का general syntax निचे दिया जा रहा है।
specified-element + adjacent-sibling-element
{
property:value;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है adjacent sibling selector किसी element और उसके adjacent sibling element के बीच में plus (+) symbol के रूप में define किया जाता है। इस selector को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p+span
{
background:green;
}
</style>
</head>
<body>
<div id=”myDiv”>
<p>This is a paragraph</p>
<span>This span is adjacent sibling of above paragraph</span></br>
<span>This span is sibling but not adjacent sibling of above paragraph</span>
</div>
</body>
</html>
General Sibling Selector
_______________________
General sibling selector ऐसे सभी elements को select करता है जो specify किये गए element के siblings है। इस selector का general syntax निचे दिया जा रहा है।
specified-element ~general-sibling-elements
{
property:value;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है general sibling selector tilde (~) symbol के रूप में define किया जाता है। इस selector को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p ~ span
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph</p>
<span>This span is adjacent sibling of above paragraph</span>
<span>This span is sibling of above paragraph</span>
<span>This span is also sibling of above paragraph</span>
<p>This is a paragraph</p>
</div>
</body>
</html>
General Sibling Selector
_______________________
General sibling selector ऐसे सभी elements को select करता है जो specify किये गए element के siblings है। इस selector का general syntax निचे दिया जा रहा है।
specified-element ~general-sibling-elements
{
property:value;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है general sibling selector tilde (~) symbol के रूप में define किया जाता है। इस selector को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p ~ span
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph</p>
<span>This span is adjacent sibling of above paragraph</span>
<span>This span is sibling of above paragraph</span>
<span>This span is also sibling of above paragraph</span>
<p>This is a paragraph</p>
</div>
</body>
</html>
CSS Percentage Value Type
___________________________
जिन properties की value आप numeric में define करते है उनमें से ज्यादातर properties की value आप percentage में भी define कर सकते है। Percentage value उन situations में suitable रहती है जब आप किसी element की value screen की size के सन्दर्भ में change करना चाहते है।
जिन elements की value percentage में define की जाती है उनकी size screen के अनुसार changeable होती है। लेकिन जब आप दूसरे numeric types को use करते है तो elements की value fix हो जाती है।
उदाहरण के लिए यदि आप किसी paragraph की width 30% define करते है तो उस paragraph को जिस भी screen पर देखा जाएगा उसकी 30% width में वह पैराग्राफ show होगा।
निचे कुछ properties की list दी जा रही है जिनकी value percentage में define की जा सकती है।
* margin
* padding
* font-size
* border
* color
* width
* height
* Example
* Percentage value type का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
p
{
width:30%;
}
</style>
</head>
<body>
<h1>Percentage Value Type Example</h1>
<p>Width of this paragraph is set using percentage value type</p>
</body>
</html>
CSS Color Value Types
______________________
CSS में ऐसी कई properties है जिनकी value color के रूप में define की जाती है। जैसे की color, background-color आदि properties की value color के रूप में define की जाती है।
CSS में 3 मुख्य color types available है। इनके द्वारा आप किसी भी value की color value define कर सकते है।
Name – Color value define करने के लिए आप directly color का नाम define कर सकते है।
Hex Value – किसी color की hex value को भी आप property की value के रूप में define कर सकते है।
RGB – Red, Green और Blue colors की अलग अलग values के रूप में भी आप color को define कर सकते है।
Example
निचे color value types का example दिया जा रहा है।
<html>
<head>
<style>
body{
background-color:pink;
}
h1{
color:#f07c82;
}
p
{
color:rgb(0,0,255);
}
</style>
</head>
<body>
<h1>Color Value Types Example</h1>
<p>Background is set using color name, heading color is set using hex value of color and paragraph color is set using rgb function of color property.</p>
</body>
</html>
CSS Function Value Types
CSS में कई ऐसी भी properties है जिनकी values function के रूप में define की जाती है। जैसे की यदि आप कोई background image network पर से अपने webpage में include करना चाहते है तो इसके लिए आप background property की value के रूप में url() function define करते है और उसमे उस image का address pass करते है।
इसी प्रकार transform property की value rotate(), translate() आदि functions के रूप में define की जाती है। इसके अलावा background-color property की value rgba() और hsla() functions के रूप में define की जा सकती है।
Example
निचे function value type का उदाहरण दिया जा रहा है।
<html>
<head>
<style>
body
{
background:url(/images/flowers/lotus.jpg);
}
</style>
</head>
<body>
<h1>Function Value Type Example</h1>
<p>Background of this page is added using url() function value of background property.</p>
</body>
</html>
Font Properties
_______________
Introduction to CSS font properties
_________________________________
* Setting font family with CSS
* Setting font style with CSS
* Introduction to CSS Font Properties
CSS के द्वारा आप fonts की size, style, weight, line-height आदि को change कर सकते है। इन सभी changes के लिए अलग से एक एक property बनायीं गई है। आइये इन properties के बारे में जानते है।
font-family Property
================
किसी भी HTML element के font की family set करने के लिए आप font-family property को यूज़ करते है। इस property की value के रूप में आप किसी भी font family का नाम देते है।
निचे कुछ font families की list दी जा रही है जिन्हें आप value के रूप में इस्तेमाल कर सकते है।
* Times New Roman
* Verdana
* Arial
* Courier
* serif
आइये font family property को एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>Font Family Property Demo</title>
<style>
p{
font-family:Arial;
}
</style>
</head>
<body>
<h1>Font Family Example</h1>
<p>This font will be shown in Arial. </p>
</body>
</html>
font-style Property
__________________
CSS की मदद से font style change करने के लिए आप font-style property यूज़ करते है। इस property की values normal, italic और oblique हो सकती हैं। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Font style Property Demo </title>
<style>
h1{
font-style:italic;
}
</style>
</head>
<body>
<h1>This heading will be in italic</h1>
<p>This is an example of font style property and this is a paragraph</p>
</body>
</html>
font-variant Property
____________________
इस property की मदद से आप font के variants define कर सकते है। इस property की मदद से आप fonts को capital letters में show कर सकते है। इस property की values normal और small-caps हो सकती है। इसका उदाहरण निचे दिया गया है।
<html>
<head>
<title>font variant property example</title>
<style>
p{
font-variant:small-caps;
}
</style>
</head>
<body>
<p> This paragraph will be in capital letters. This is an example of font-variant</p>
</body>
<html>
font-weight Property
___________________
इस property से आप font का weight define कर सकते है। ये property define करती है की font कितना bold होगा। इस property की values bold, bolder और lighter हो सकती है। आप कोई custom font weight भी define कर सकते है। इसका उदाहरण आगे दिया गया है।
<html>
<head>
<title>font-weight property</title>
<style>
p{
font-weight:bold;
}
</style>
</head>
<body>
<p>This is an example of font weight</p>
</body>
</html>
font-size Property
________________
इस property के द्वारा आप किसी भी HTML element के font का size change कर सकते है। इस property की value आप pixels में भी दे सकते है और % में भी दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>font size property demo </title>
<style>
h1{
font-size:20px;
}
p{
font-size:12px;
}
</style>
</head>
<body>
<h1> This is heading</h1>
<p>This is a paragraph</h1>
</body>
</html>
font-size-adjust Property
_______________________
इस property के द्वारा आप font की size को adjust कर सकते हैं। जब आप इस property को define करते है तो फिर चाहे font family कोई भी हो, browser font की height को automatically adjust कर देता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>font size adjust property demo</title>
<style>
p{
font-size-adjust:0.58;
}
#p1{
font-family:Verdana;
font-size-adjust:0.58;
}
</style>
</head>
<body>
<p> This is a paragraph </p>
<p id="p1">This is another paragraph</p>
</body>
</html>
font-stretch Property
____________________
इस property के द्वारा आप font को stretch कर सकते है। इस property की value normal, wider, narrower और condensed आदि हो सकती है। अब इस property को कोई भी browser support नहीं करता है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>font stretch property demo</title>
<style>
#p1{
font-stretch:wider;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p id=”p1″>This is a paragraph.</p>
</body>
</html>
Text Properties
_______________
* Introduction to CSS text properties in Hindi
* Examples of CSS text properties in Hindi
* Introduction to CSS Text Properties
CSS के द्वारा आप web page के text को भी design कर सकते है। इसके लिए CSS आपको बहुत सी properties provide करती है।
कई बार designers font properties और text properties के बीच confuse हो जाते है। इसलिए text properties के बारे में detail से जानने से पहले आइये देखते है की इन दोनों में क्या difference होता है।
Fonts shape को represent करते है, जैसे की अलग अलग font families (Times New Roman आदि) की shapes अलग अलग होती है। अलग अलग shapes के साथ जो आप character draw करते है वे text(a,b,c,d @,# आदि) कहलाते है।
Webpage में text को style करने के लिए CSS आपको निचे दी गयी properties provide करती है।
1. color
2. text-align
3. text-decoration
4. text-transform
5. text-indent
6. text-direction
7. text-shadow
8. word-spacing
9. letter-spacing
आइये अब इन properties के बारे में detail से जानने का प्रयास करते है।
color Property
______________
ये property text का color set करने के लिए यूज़ की जाती है। इसे आप different HTML elements पर apply कर सकते है। यदि आप इसे <body> tag पर apply करते है तो जो value आप इस property की देते है वही color webpage के सारे text का हो जाता है।
इस property की value के रूप में आप color का नाम या उसकी hex value दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>color property</title>
<style>
div
{
width:20%;
}
p
{
color:blue;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph. Its text color is blue.</p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में सभी paragraph text का color blue set किया गया है।
text-align
_________
इस property के द्वारा आप text का webpage में alignment set करते है। इस property की आप निचे दी गयी 4 में से कोई भी एक value define कर सकते है।
* left – इस value से text left side में align हो जाता है।
* right – इस value के द्वारा text right side में align हो जाता है।
* justify – इस value के द्वारा आप text को book की तरह align कर सकते है।
* center – ये text को center में align करती है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>text align example</title>
<style>
div
{
width:20%;
border:2px solid blue;
}
p
{
text-align:center;
}
</style>
</head>
<body>
<div>
<p>A paragraph</p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में webpage के सभी paragraphs का alignment center set किया गया है।
text-decoration
_______________
इस property के द्वारा आप text को decorate कर सकते है। जैसे की text के निचे underline define करना आदि। निचे दी गयी 4 values में से आप इस property की कोई भी value set कर सकते है।
* none – इस value से text पर कोई भी decoration नहीं रहता है।
* underline – इस value को set करने से text के नीचे line appear हो जाती है।
* overline – इस value को apply करने पर text के ऊपर line appear हो जाती है।
* line-through – इस value को यूज़ करने पर text को काटती हुई बीच से line खींच जाती है।
निचे इसका उदाहरण दिया जा रहा है।
<html>
<head>
<title>Text decoration property</title>
<style>
p{
text-decoration:underline;
color:blue;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
ऊपर दिए गए उदाहरण में सभी paragraph के text को underline किया गया है।
text-transform
______________
इस property के द्वारा आप text का case set कर सकते है। आप चाहे तो text को upper case में show कर सकते है या फिर lower case में show कर सकते है। निचे दी गयी 4 values में से आप कोई भी value इस property की set कर सकते है।
* none
* uppercase
* lowercase
* capitalize
इस property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title> Text transform property</title>
<style>
p{
text-transform:uppercase;
}
</style>
</head>
<body>
<p>This is some text</p>
</body>
</html>
ऊपर दिए गए उदाहरण में सभी paragraphs के text को uppercase में transform किया गया है।
text-indent
___________
इस property के द्वारा आप paragraph की first line का indent set कर सकते है। Indent paragraph की first line में extra space होता है जो उस line को दूसरी lines से अलग show करता है। इस property की value आप length में या फिर percentage में दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Text indent example</title>
<style>
div{
width:20%;
border: 1px solid;
}
p{
text-indent:20px;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph. It show use of text indent property in CSS.</p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में webpage के सभी paragraph की first line का indent 20 pixels set किया गया है।
direction
_________
इस property के द्वारा आप text का direction set करते है। यानी की आप text को किस तरफ से लिखना शुरू करना चाहते है। ये बाँयी और से दाँयी और भी हो सकता है और दाँयी और से बाँयी और भी हो सकता है। निचे दी गयी values में से आप कोई भी value इस property की set कर सकते है।
1. ltr – इस value के द्वारा आप text का direction left से right set करते है।
2. rtl – इस property के द्वारा आप text का direction right से left set करते है।
3. initial – इस property के द्वारा आप text का default direction set कर सकते है।
4. inherit – जब आप ये value set करते है तो text का direction parent element जैसा ही होता है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Text direction demo</title>
<style>
div{
width:20%;
border:1px solid;
}
p{
direction:rtl;
}
</style>
</head>
<body>
<div>
<p>Example showing use of text direction property</p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में webpage के paragraphs का direction right से left set किया गया है।
Background Properties
______________________
* Introduction to CSS background properties in Hindi
* Setting background color with CSS in Hindi
* Setting background image with CSS in Hindi
* Introduction to CSS Background Properties
CSS के द्वारा किसी भी HTML element का background set किया जा सकता है। उदाहरण के लिए आप headings को highlight करना चाहते है ऐसी situation में आप CSS के द्वारा सभी headings का background set कर सकते है।
Background 2 तरह से set किया जा सकता है। आप चाहे तो background में कोई solid color set कर सकते है या फिर कोई image भी set कर सकते है। Background को set करने के लिए CSS आपको बहुत सी properties provide करती है। आइये इनके बारे में जानने का प्रयास करते है।
Setting Background Color
CSS के द्वारा background color set करने के लिए आप background-color property यूज़ करते है। इस property की value आप color का नाम या hex code दे सकते है। आइये इसे एक उदाहरण से समझते है।
<html>
<head>
<title>Setting Background Color</title>
<style>
p{
background-color:gold;
}
</style>
<body>
<h1>Indian Economy</h1>
<p>Indian economy is growing very fast. India is 7th richest country in the world</p>
</body>
</html>
ऊपर दिए गए उदाहरण में paragraph का background color CSS के द्वारा change किया गया है। इसी प्रकार दूसरे HTML elements का background color भी आप change कर सकते है।
आइये अब CSS के द्वारा background में image set करना सीखते है।
Setting Image Background
_________________________
CSS के द्वारा image को background के रूप में set किया जा सकता है। इसके लिए background-image property यूज़ की जाती है। इस property की value के रूप में image का url दिया जाता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Setting Image Background</title>
<style>
body{
background-image:url(‘flowers.jpg’);
}
</style>
</head>
<body>
<h1>Image Background</h1>
<p>There is an image behind this text</p>
</body>
</html>
कई बार ऐसा हो सकता है की आपकी image बहुत छोटी हो और उससे पूरा background fill नहीं हो रहा हो। ऐसी situation में आप background-image property के बाद background-repeat property यूज़ कर सकते है।
इस property की repeat और no-repeat 2 values होती है। जब आप repeat value define करते है तो आपकी image repeat हो जाती है और पुरे background को fill कर देती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>Background Repeat Property</title>
<style>
body{
background-image:url(‘flowers.jpg’);
background-repeat:repeat;
}
</style>
</head>
<body>
<h1>Image Background Repeat Example</h1>
<p>This is an example of background image repeating. Behind this text there is an image and it is repeating itself so that it can fill entire background;
</p>
</body>
</html>
Background image repeat करने के अलावा आप चाहे तो image को background में किसी certain position पर set कर सकते है। उदाहरण के लिए आप image को left से 50px छोड़कर set करना चाहते है तो ऐसा करना possible है।
ऐसा background-position property के द्वारा किया जाता है। में आपको बता दू की इस property को आप background-image property के साथ यूज़ करते है।
Background position property की आप 2 values देते है। पहली value left side से image की दुरी define करती है। और दूसरी value top से image की दुरी define करती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>Background position demo</title>
<style>
body{
background-image:url(‘rose.jpg’);
background-position:100px 70px;
}
</style>
</head>
<body>
<h1> Rose </h1>
<p>Roses are most amazing flowers according to me. I gave my mother rose on mother’s day.</p>
</body>
</html>
एक और property CSS के द्वारा provide की गई है जिसे आप background images के साथ यूज़ कर सकते है। इस property के द्वारा आप background image को fixed या scroll-able बना सकते है।
ये property background-attachment है। इस property की fixed और scroll
2 values हो सकती है। Fixed value से image fixed रहती है उसे scroll नहीं किया जा सकता है। और scroll value से image को scroll-able बनाया जा सकता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Background attachment demo</title>
<style>
p{
background-image:url(‘flower.jpg’);
background-attachment:scroll;
}
</style>
</head>
<body>
<h1> This is a heading </h1>
<p> This is a paragraph. And behind this paragraph there is an image background. This image background is scroll enabled.</p>
</body>
</html>
Image Properties
_________________
* Introduction to CSS images properties in Hindi
* Different CSS image properties in Hindi
* Introduction to CSS Image Properties
CSS आपको कुछ properties provide करती है जिनकी मदद से आप images को optimize कर सकते है। ये properties images की height, width, border और opacity आदि define करती है। इनकी list निचे दी जा रही है।
* image border
* image height
* image width
* image opacity
* image radius
आइये इन सभी properties के बारे में detail से जानने का प्रयास करते है।
Image border Property
______________________
Border property के द्वारा आप किसी भी image की border की चौड़ाई, उसका type (dotted, dashed आदि) और उसका color define कर सकते है। इन attributes को define करके आप किसी भी image को अपने webpage के लिए optimize कर सकते है।
Border property define करने का syntax नीचे दिया जा रहा है।
border : width | type | color;
Border की चौड़ाई आप pixels में देते है। जैसे की
border:2px;
Border की चौड़ाई के बाद border का type define किया जाता हैं। CSS में borders के 4 basic types होते है।
* dotted – Border dotes की form में represent होती है।
* dashed – Border dashes की form में represent होती है।
* double – Border double lines के रूप में show होती हैं।
* solid – Border एक solid line के रूप में show होती है।
Border का type define करने के बाद आप उसका color define करते है। Color का आप नाम भी दे सकते है और इसे hex code के रूप में भी define कर सकते है।
Images की border से related CSS आपको border-radius property भी provide करती है जिसकी मदद से आप चाहे तो images को round बना सकते है। इस property की value आप % में define करते है। यदि आप images को पूरी तरह round बनाना चाहते है तो आपको value 50% देनी होगी। जैसे की
border-radius:50%;
Border property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Image border property demo</title>
<style>
img{
border:2px solid ;
border-radius:20%;
}
</style>
</head>
<body>
<h1> Image border & radius Example</h1>
<img src=”image.png”>
</body>
</html>
Image height Property
_____________________
Height property के द्वारा आप image की height define करते है। Image की height आप pixels में भी define कर सकते है और % में भी define कर सकते है। जब आप % में height define करते है तो image container के according उतनी % height ले लेती है। जैसे की यदि 50% height define करते है तो image window की 50% height ले लेगी।
Image height property का उदाहरण नीचे दिया जा रहा है।
<html>
<head>
<title>Image height property demo</title>
<style>
img{
height:200px;
// in percentage – height:50%;
}
</style>
</head>
<body>
<h1>Image height Example</h1>
<img src=”image.png”>
</body>
</html>
Image width Property
____________________
Width property के द्वारा आप images की width define करते है। Width आप pixels में भी define कर सकते है और % में भी define कर सकते है। जैसा की मैने ऊपर बताया जब आप % में width define करते है तो image container की उतनी % width में show होती है।
Image width property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Image width property demo</title>
<style>
img{
height:200px;
width:300px;
//In percentage – width:30%;
}
</style>
</head>
<body>
<h1>Image width Example</h1>
<img src=”image.png”>
</body>
</html>
Image opacity Property
______________________
Opacity property के द्वारा आप images की sharpness और clarity define कर सकते है। इस property की value 0.1 से लेकर 1 तक हो सकती है। जैसे जैसे आप value को बढ़ाते जाते है तो images उतनी है clear visible होती जाती है। 0.1 value में images सबसे धुँधली और 1 value से images सबसे clear show होती है। Opacity property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>image opacity property</title>
<style>
img{
opacity:0.2;
}
</style>
</head>
<body>
<h1>Image Opacity Example</h1>
<img src=”image.jpg”>
</body>
</html>
Table Properties
________________
* Introduction to CSS table properties
* Different CSS table properties
* Examples of using CSS table properties
Introduction to CSS Table Properties
किसी भी information को structured form में represent करने के लिए tables का प्रयोग किया जाता है। HTML आपको table create करने के लिए tags provide करती है।
लेकिन अगर designing part की तरफ देखे तो आप HTML के द्वारा tables को कुछ खास design नहीं कर सकते है। लेकिन आपको निराश होने की कोई जरुरत नहीं है क्योंकि CSS के द्वारा आप tables पर भी styles apply कर सकते है। इसके लिए CSS आपको 5 properties provide करती है।
* border-collapse
* border-spacing
* caption-side
* empty-cells
* table-layout
इन properties के साथ दूसरी common properties को यूज़ करके आप tables को design कर सकते है। आइये इन सभी properties के बारे में जानने का प्रयास करते है।
border-collapse Property
________________________
जैसा की आप देखते है HTML tables में सभी cells की borders merged होती है। लेकिन आप चाहे तो हर table cell को separate करते हुए उनकी borders को separately present कर सकते है। इसके लिए आप border-collapse property यूज़ करते है। इस property की 2 possible values होती है।
पहली value collapse होती है। जब आप इस value को set करते है तो सभी cells की border collapse हो जाती है और सभी cells एक ही border को यूज़ करते है। इस property की दूसरी value separate होती है। जब आप इस value को set करते है तो हर table cell की border separately represent होती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>Border collapse property demo </title>
<style>
table
{
border-collapse:separate;
}
</style>
</head>
<body>
<table border=”1″>
<tr>
<th>Name</th>
<th>Age of Death</th>
</tr>
<tr>
<td>Mahatma Gandhi</td>
<td>78</td>
</tr>
<tr>
<td>Swami Vivekananda</td>
<td>39</td>
</tr>
</table>
</body>
</html>
border-spacing Property
_______________________
इस property के द्वारा आप किसी भी table के cells के बीच का space define कर सकते है। इस space को आप horizontally और vertically दोनों तरह से define कर सकते है।
इस property की value एक भी हो सकती है और 2 भी हो सकती है। जब आप एक value define करते है तो यह horizontal और vertical दोनों तरह से apply हो जाती है। जब आप दो values define करते है तो पहली value horizontally apply होती है और दूसरी value vertically apply होती है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Border spacing property demo</title>
<style>
table{
border-collapse:separate;
border-spacing:20px;
}
</style>
</head>
<body>
<table border=”1″>
<tr>
<th>Mobile</th>
<th>Prices</th>
</tr>
<tr>
<td>Samsung</td>
<td>15,000</td>
</tr>
<tr>
<td>Apple</td>
<td>53,000</td>
</tr>
</table>
</body>
</html>
caption-side Property
____________________
इस property के द्वारा आप table का caption (शीर्षक) कँहा show होगा ये define कर सकते है। लेकिन ये property केवल तब ही काम करती है जब आप table के अंदर <caption> tag यूज़ करते है। <caption> tag table का शीर्षक define करने के लिए यूज़ किया जाता है।
इस property की आप 2 values define कर सकते है। पहली value top होती है जिससे caption table के top पर show होता है। दूसरी value आप bottom दे सकते है इससे caption bottom में show होता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>caption-side property demo</title>
<style>
table
{
border-spacing:20px;
caption-side:bottom;
}
</style>
</head>
<body>
<table border=”1″>
<caption>My Table</caption>
<tr>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>CEO</td>
<td>20,000</td>
</tr>
<tr>
<td>Content Writer</td>
<td>10,000</td>
</tr>
</table>
</body>
</html>
empty-cells Property
____________________
इस property के द्वारा आप define कर सकते है की जिन cells में content नहीं है उनकी borders शो करनी है या नहीं। इस property की 2 values हो सकती है। पहली value hide हो सकती है।
जब आप इस value को set करते है तो जिन cells में कोई content नहीं होता है उनकी borders hide हो जाती है। दूसरी value show हो सकती है जब आप ये value define करते है तो जिन cells में content नहीं होता उनकी borders show होती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>empty-cells property demo</title>
<style>
table
{
empty-cells:hide;
}
</style>
</head>
<body>
<table>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tr>
<td>India</td>
<td>250000000</td>
</tr>
<tr>
<td>Nepal</td>
<td></td>
</tr>
</table>
</body>
</html>
table-layout Property
____________________
इस property के द्वारा आप define कर सकते है की table का layout सभी browsers और windows में same रहेगा या फिर automatically change होगा। इस property की 2 values हो सकती है।
एक value आप fixed define कर सकते है। जब आप ये value define करते है तो table का layout सभी browsers में fixed रहता है।
दूसरी value आप auto define कर सकते है जब आप ये value define करते है तो table का layout browsers के according automatically change हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>table layout border property</title>
<style>
table
{
table-layout:auto;
width:20%;
}
</style>
</head>
<body>
<table border=”1″>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
इनके अलावा आप CSS की common properties जैसे की background-color, color आदि भी tables पर आप apply कर सकते है।
Lists
_____
Introduction to CSS lists properties in Hindi
_________________________________________
* CSS list-style-type property in Hindi
* CSS list-style-position property in Hindi
Introduction to CSS List Properties
_______________________________
Lists किसी भी topic से related important points को आसानी से present करने के लिए useful होती है। HTML के द्वारा आप 2 प्रकार की lists create कर सकते है। जिन्हें ordered lists और unordered lists कहा जाता है।
HTML में lists create करने के लिए आप निचे दिए गए HTML tags यूज़ करते है।
<ul> – Ordered list
<ol> – Unordered list
<li> – list Item
ऊपर दिए गए HTML tags पर आप CSS apply करके lists को style कर सकते है। Lists को style करने के लिए CSS में आपको 4 important properties provide की गयी है। इन properties की list निचे दी जा रही है।
* list-style-type
* list-style-position
* list-style-image
* list-style (shorthand)
इन सभी properties के बारे में निचे detail से दिया जा रहा है।
list-style-type
_____________
list-style-type property के द्वारा आप lists की numbering और bullets को control कर सकते है। Unordered lists के case में इस property के द्वारा आप अलग अलग तरह के bullets यूज़ कर सकते है और Ordered lists के case में इस property के द्वारा आप अलग अलग numbering यूज़ कर सकते है।
यदि आप इस property को unordered list (<ul> tag) पर apply करना चाहते है तो निचे दी गयी 4 values को आप यूज़ कर सकते है।
* none – इस value से कोई भी marker show नहीं होता है।
* disc – इस value से marker के रूप में एक भरा हुआ dark circle show होता है।
* circle – इस value से एक empty circle show होता है।
* square – इस value से एक भरा हुआ dark square show होता है।
यदि आप इस property को order lists (<ol> tag) पर apply करना चाहते है तो आप निचे दी values यूज़ कर सकते है।
* none – इस value से किसी भी प्रकार की numbering show नहीं होती है।
* decimal – इस value से decimal (1,2,3,4,5,6 ) numbering होती है।
* lower-roman – इस value से roman numbers lower case में show होते है।
* upper-roman – इस value से roman numbers upper case में show होते है।
* lower-alpha – इस value से alphabets lower case में show होते है।
* upper-alpha – इस value से alphabets upper case में show होते है।
इनके अलावा और भी values होती है जिन्हें आप यूज़ कर सकते है। आइये अब list-style-type property को एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>list-style-type demo</title>
<style>
ol
{
list-style-type:lower-alpha;
}
ul
{
list-style-type:disc;
}
</style>
</head>
<body>
<h1>Ordered List Example</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ol>
<h1> Un-ordered List Example</h1>
<ul>
<li>Java</li>
<li>PHP</li>
<li>JQuery</li>
</ul>
</body>
</html>
list-style-position
________________
इस property के द्वारा आप numbering और bullets की position define कर सकते है। इस property की आप 2 values define कर सकते है।
> outside – जब आप इस value को define करते है तो bullets/numbers और text के बीच में काफी space रहता है। इससे text अलग से show होता है।
> inside – जब आप इस value को define करते है तो bullets/numbers और text के बीच में space कम रहता है और दोनों एक साथ दिखाई देते है।
इस property को निचे उदाहरण के द्वारा समझाया गया है।
<html>
<head>
<title>list-style-position demo</title>
</head>
<body>
<h1>inside example</h1>
<ul style=”list-style-position:outside;”>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<h1>outside example</h1>
<ul style=”list-style-position:inside;”>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</body>
</html>
list-style-image
_______________
यदि आप चाहे तो lists में marker के रूप में bullets और numbers को यूज़ करने के बजाय आप किसी image को भी यूज़ कर सकते है। ये property उन situations में बहुत useful होती है जब आप lists को अपनी website की design के according configure करना चाहते है। इस property का basic syntax निचे दिया जा रहा है।
list-style-type:url(‘url-of-image’);
आइये अब इस property को उदाहरण के माध्यम से समझने का प्रयास करते है।
<html>
<head>
<title>list-style-image demo</title>
<style>
ul
{
list-style-image:url(‘list-bullet.png’);
}
</style>
</head>
<body>
<h1>Example of CSS list Image marker</h1>
<ul>
<li>ONE</li>
<li>TWO</li>
</ul>
</body>
</html>
list-style (shorthand) Property
____________________________
यदि आप ऊपर define की गयी सभी properties को एक बार में define करना चाहते है तो इसके लिए आप list-style (shorthand) property यूज़ कर सकते है। इस property में सबसे पहले आप list-style-type property की value देते है।
इसके बाद आप list-style-position property की value देते है। और इसके बाद आप list-style-image property की value define करते है। इस property का general syntax निचे दिया जा रहा है।
list-style:<list-style-type> <list-style-position> <list-style-image>
list-style property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>list-style demo</title>
<style>
ul
{
list-style:disc inside url(‘list-bullet.png’);
}
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
</html>
Applying CSS on List Items
_________________________
आप चाहे तो list items पर भी CSS apply कर सकते है। इसके लिए आप इस प्रकार selectors यूज़ कर सकते है।
For Unordered List
ul li
{
//CSS rules here
}
For Ordered List
ol li
{
//CSS rules here
}
Links
_____
Introduction to CSS link properties
________________________________
* CSS :link property
* CSS :visited property
Introduction to CSS Link Properties
_________________________________
World Wide Web एक links के collection के अलावा कुछ नहीं है। Links के माध्यम से ही आप एक page से दूसरे page तक travel करते है। CSS के माध्यम से आप links को design कर सकते है और अपने page के according customize कर सकते है।
Links पर आप सभी basic properties apply कर सकते है। लेकिन इसके लिए आपको selectors different यूज़ करने पड़ते है। Links की हर condition के लिए एक अलग selector provide किया गया है। इन selectors की list निचे दी गयी है।
> a : link – इस selector को link की normal state को design करने के लिए use किया जाता है। ये वो state होती है जब link को एक बार भी visit नहीं किया गया है।
> a : visited – इस selector को link की visited state को design करने के लिए यूज़ किया जाता है। ये वो state होती जब link visit की जा चुकी है।
> a : hover – इस selector को links की hover state को design करने के लिए यूज़ किया जाता है। ये वो state होती है जब link पर mouse ले जाया जाता है।
> a : active – इस selector से links की active state को design करने के लिए यूज़ किया जाता है। ये वो state होती है जब link active होती है।
इन selectors को यूज़ करके आप links की advanced designing कर सकते है। आइये इन selectors के बारे में detail से जानने का प्रयास करते है।
a : link
______
जैसा की मैने आपको ऊपर बताया इस selector के द्वारा आप link की normal state के लिए rules define करते है। ये वो state होती है जब links को आप किसी webpage पर पहली बार देखते है और अभी तक उस link को visit नहीं किया गया है।
आइये देखते है की इस selector को आप किस प्रकार यूज़ कर सकते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title> a : link demo</title>
<style>
a:link {
color:red;
}
</style>
</head>
<body>
<a href=”http://www.yahoo.com”>Yahoo</a>
</body>
</html>
ऊपर दिए गए उदाहरण में link की normal state का color red define किया गया है।
a : visited
_________
इस selector के द्वारा आप link की उस state के लिये rules define करते है जब link को visit किया जा चूका है। ये एक important selector है। जब आप इसे यूज़ करते है तो users को पता लग जाता है की वे कौनसी links visit कर चुके और कौनसी अभी तक नहीं visit की है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title> a : visited </title>
<style>
a:visited {
color:gold;
}
</style>
</head>
<body>
<a href=”https://www.dcruztechnology.blogspot.com”>Dcruz Technology Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब link एक बार visit की जा चुकी होगी तो उसका color gold show होगा।
a : hover
________
जब user mouse cursor को link पर ले जाये तो उसमे कौनसे changes होने चाहिए, उन्हें define करने के लिए आप a : hover selector यूज़ करते है।
उदाहरण के लिए यदि जब user mouse cursor ले जाये तो आप link का color red show करना चाहते है। इस selector के use करने से एक link highlight हो जाती है और वह से अलग दिखती है।
इससे simple text में भी आसानी से पता चल जाता है की ये link है। इसे निचे एक उदाहरण के माध्यम से समझाया गया है।
<html>
<head>
<title> a : hover demo</title>
<style>
a:hover {
color:purple;
}
</style>
</head>
<body>
<a href=”https://dcruztechnology.blogspot.com”>Dcruz Technology Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब visitor mouse cursor को link पर लेकर जाता है तो उस link का color purple हो जाता है।
a : active
_________
इस selector के द्वारा आप link को उस state के लिए design करते है जब link को click किया जा रहा होता है। इस state में आप link का color change कर सकते है या फिर और भी दूसरे rules apply कर सकते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>a : active demo</title>
<style>
a:active {
color:hot-pink;
}
</style>
</head>
<body>
<a href=”https://dcruztechnology.blogspot.com”>Dcruz Technology Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब user link पर click करता है तो उसको color hot pink हो जाता है।
Removing underline from links
____________________________
यदि आप links के निचे by default आने वाली line को remove करना चाहते है तो इसके लिए आप CSS की text-decoration property यूज़ कर सकते है। इसी property के द्वारा आप वापस underline show भी कर सकते है।
इस property की आप 2 values दे सकते है। एक तो none और दूसरी underline होती है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>text-decoration demo</title>
<style>
a{
text-decoration : none;
}
</style>
</head>
<body>
<a href=”https://www.Dcruz.com”>Learning CSS</a>
</body>
</html>
Box Model
__________
Introduction to CSS box model
_____________________________
* CSS box model properties
* Introduction to CSS Box Model
यदि आप CSS के द्वारा बेहतर web pages design करना चाहते है तो आपके लिए CSS box model को समझ लेना आवश्यक है। CSS box model के अनुसार हर HTML element एक rectangular box होता है। यह rectangular box उस element के content, padding, border और margin से बना होता है। इसे CSS में box model के नाम से जाना जाता है।
CSS box model webpages में elements के layout का common model है। आप जो भी elements webpage में add करते है जैसे की links, images, paragraphs, buttons, text आदि सभी का layout इस model के अनुसार होता है।
इसलिए जैसा की मैने पहले बताया बेहतर webpages design करने के लिए यह आवश्यक है की आप CSS box model को समझ लें।
CSS box model के अनुसार सबसे center में content होता है। किसी paragraph के case में content text हो सकता है और किसी image के case में content वह मुख्य image हो सकती है।
Content के चारों तरफ padding आती है जो की border और content के बीच space के रूप में define की जाती है। जितनी अधिक आप padding define करते है उतना ही अधिक space content के चारों तरफ create हो जाता है।
Padding के चारों तरफ element की border आती है। Elements की border by default hidden रहती है जब तक की आप इसे define ना करें।
Border के चारों तरफ element का margin होता है। Margin एक element से लेकर दूसरे element के बीच का space होता है। इससे एक element को दूसरे element से separate करने में मदद मिलती है।
Element की width और height pixels में define की जाती है जो यह define करती है की element horizontally और vertically कितना space occupy करेगा।
यदि एक बार CSS box model आपको समझ आ जाये तो इसके आधार पर आप elements को आसानी से design कर सकते है। एक बात आपको हमेशा ध्यान रखनी चाहिए की सभी HTML elements इस model को follow करते है।
Properties of CSS Box Model
___________________________
जैसा की मैने आपको पहले बताया CSS box model content, padding, border और margin से मिलकर बना होता है। ये सभी box model की properties कहलाती है। ये सभी properties सभी HTML elements के लिए common होती है।
इन properties की अलग अलग values define करके आप element के layout को control कर सकते है। इन properties के बारे में निचे detail से बताया जा रहा है।
content
________
किसी भी HTML element का content हमेशा show होता है। बाकी properties hidden होती है। Content क्या होगा यह CSS द्वारा control नहीं किया जा सकता है। Content HTML elements द्वारा ही define किया जाता है।
Content CSS box model का अहम् हिस्सा है। इसे आप common CSS properties जैसे की color, background और font आदि से design कर सकते है।
padding
________
Content के चारों तरफ कितना space रहेगा यह padding द्वारा define किया जाता है। Padding define करने के लिए CSS में padding properties available है। आप चाहे तो सभी sides के लिए padding एक साथ define कर सकते है या फिर अलग अलग sides के लिए अलग अलग paddings भी define कर सकते है।
Padding का कोई color नहीं होता है। यह transparent होती है। Padding उसी color में show होती है जो की element का background color है।
Padding define करने के लिए CSS की निचे दी गयी properties use की जाती है।
> padding – इस property द्वारा सभी sides की padding एक ही बार में define हो जाती है।
> padding-left – इस property द्वारा element के left side की तरफ की property define की जाती है।
> padding-right – इस property द्वारा element के right side की तरफ की property define की जाती है।
> padding-top – इस property द्वारा element के ऊपर की तरफ की padding define की जाती है।
> padding-bottom – इस property द्वारा element के निचे की तरफ padding define की जाती है।
border
_______
Content और padding के चारों तरफ element की border होती है। जब तक की आप border define नहीं करते है border hidden रहती है। Border define करने के लिए CSS में border properties available है। इनके बारे में निचे बताया जा रहा है।
> border – इस property से सभी sides की border एक ही बार में define की जाती है।
> border-left – इस property द्वारा left side की border define की जाती है।
> border-right – इस property द्वारा right side की border define की जाती है।
> border-top – इस property द्वारा element के ऊपर की तरफ की border define की जाती
है।
> border-bottom – इस property द्वारा element के निचे की तरफ की border define की जाती है।
margin
_______
किसी element का margin border के चारों तरफ space के रूप में define किया जाता है। Padding की ही तरह margin का भी कोई color नहीं होता है यह transparent होता है। Margin define करने के लिए CSS में margin properties available है। इन properties के बारे में निचे बताया जा रहा है।
> margin – इस property द्वारा सभी sides का margin एक ही बार में define किया जाता है।
> margin-left – इस property द्वारा left side का margin define किया जाता है।
> margin-right – इस property द्वारा right side का margin define किया जाता है।
> margin-top – इस property द्वारा top side का margin define किया जाता है।
> margin-bottom – इस property द्वारा bottom side का margin define किया जाता है।
Example of CSS Box Model
_________________________
CSS box model को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS Box Model Demo</title>
<style>
p
{
color:blue;
background:#f3f3f3;
padding:10px;
border:1px solid #eeeeee;
margin:10px;
}
</style>
</head>
<body>
<p>This is paragraph. It has blue text, light silver background, silver border and padding & margin of 10px each.</p>
</body>
</html>
ऊपर दिए गए उदाहरण में एक simple paragraph को CSS box model के आधार पर design किया गया है।
width Property
______________
Introduction to CSS width property
_________________________________
> CSS max-width property
> CSS min-width property
Introduction to CSS width Property
_________________________________
CSS width property द्वारा आप किसी भी element की width define कर सकते है। Width वह space होता है जितना कोई element webpage में horizontally occupy करता है।
सभी elements की default width अलग अलग होती है। जैसे की table की default width columns के content के अनुसार होती है और किसी पैराग्राफ की default width 100% होती है।
लेकिन यह जरुरी नहीं है की default width को ही आप use करें। CSS width property द्वारा आप अपनी आवश्यकतानुसार elements की कितनी भी width define कर सकते है।
उदाहरण के लिए आप किसी paragraph के text को quote के रूप में show करना चाहते है। लेकिन paragraph की default width 100% होती है। इस situation में आप width property द्वारा उस paragraph की width को अपने according कम define कर सकते है।
इसी प्रकार आप जिस भी element की जितनी भी width चाहते है इस property द्वारा define कर सकते है। केवल उन्हीं elements की width define नहीं की जा सकती है जिनका display inline होता है। उदाहरण के लिए आप <span> element की width नहीं define कर सकते है।
Syntax of CSS width Property
___________________________
निचे CSS width property का general syntax दिया जा रहा है।
width : auto | number-px(pixels) | number% ;
जैसा की आप ऊपर दिए गए syntax में देख सकते है width property की 3 possible values हो सकती है।
जब आप width property की value auto define करते है तो element की default width set की जाती है।
जब आप width property की value pixels में define करते है तो उतने ही pixels की width वह element cover करता है।
आप width property की value % में भी define कर सकते है। एक webpage की width 100% होती है। इसलिए आप किसी element की width 100% तक कुछ भी define कर सकते है।
Example of CSS width Property
CSS width property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>CSS width Property Demo</title>
<style>
p
{
width:30%;
border:1px solid #eeeeee;
}
</style>
</head>
<body>
<p>CSS is very powerful. HTML is used to build basic webpage structure. And CSS is used to design that structure.</p>
</body>
</html>
CSS max-width Property
_______________________
CSS में width property के अलावा max-width property भी available है। यह property किसी भी element की maximum width define करने के लिए use की जाती है। जब आप किसी element के लिए यह property define करते है तो उस element की width इस property द्वारा define की गयी value से अधिक नहीं हो सकती है।
उदाहरण के लिए यदि आप किसी paragraph की maximum width 300 pixels define करते है तो उस paragraph की width किसी भी device पर 300 pixels से अधिक show नहीं होगी।
इस property को min-width property के साथ use किया जाता है। इन दोनों properties से किसी element की maximum और minimum width define की जाती है। ऐसा करने से वह element minimum width से लेकर maximum width तक के किसी भी device पर automatically adjust हो जाता है।
CSS में ये दोनों properties elements को responsive बनाने के लिए use की जाती है।
इस property की value भी आप pixels और percentage में दे सकते है। इस property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS max-width Property Demo</title>
<style>
p{
max-width:300px;
}
</style>
</head>
<body>
<p>Once was a man they called him mad but the more he gave the more he had.</p>
</body>
</html>
ऊपर दिए गए उदाहरण में चाहे किसी भी device पर देखा जाए लेकिन paragraph की width 300 pixel से अधिक show नहीं होगी।
CSS min-width Property
_______________________
किसी भी element की minimum width set करने के लिए min-width property use की जाती है। जब आप किसी element के लिए यह property define करते है तो उस element की width इस property द्वारा define की गयी value से कम नहीं हो सकती है।
इस property की value भी आप pixels और percentage में दे सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS min-width Property Demo</title>
<style>
p
{
min-width:300px;
max-width:500px;
}
</style>
</head>
<body>
<p>No circumstances are bigger than you. The person who is willing to do it will find a way and the person who is not willing to do it will find an excuse.</p>
</body>
</html>
ऊपर दिए गए उदाहरण में paragraph की width 600 pixels से कम नहीं होगी।
height Property
_______________
Introduction to CSS height property
_________________________________
* CSS min-height property
* CSS max-height property
Introduction to CSS height Property
_________________________________
Width की तरह ही किसी element की height भी आप CSS द्वारा define कर सकते है। इसके लिए CSS में height property available है। यह property किसी भी element द्वारा vertically occupy किया जाने वाला space define करने के लिए प्रयोग की जाती है।
ज्यादातर HTML elements की height उनके content के अनुसार होती है। यदि आप चाहे तो height property द्वारा इस height को fix कर सकते है। लेकिन ऐसा करते समय आपको सावधानी रखनी चाहिए क्योंकि यदि आप content को show होने के लिए पर्याप्त height नहीं define करते है तो content box से बाहर overflow हो जाता है।
इसलिए ये ध्यान रखना जरुरी है की define की जाने वाली height में content आसानी से show हो सके। उदाहरण के लिए यदि आप किसी paragraph की height 300px define करते है लेकिन उसका text बहुत अधिक है तो वह text paragraph border को overlap करके बाहर show होने लगेगा।
हालाँकि overflow की समस्या से बचने के लिए CSS में overflow property available है लेकिन इस property को सभी elements के लिए नहीं use किया जाना चाहिए। यह property fixed layout create करने के लिए use की जाती है।
Overflow property के बारे में विस्त्रत जानकारी के लिए CSS overflow property in Hindi tutorial पढ़े।
Syntax of CSS height Property
CSS height property का general syntax निचे दिया जा रहा है।
height : auto | number-px | number-%;
जब height property की value auto define की जाती है तो height automatically content के अनुसार set की जाती है। इसके अलावा आप height को pixels और percentage के रूप में भी define कर सकते है। जब आप height को percentage के रूप में define करते है तो webpage की total height की उतनी percent height ही वह element लेता है।
Example of CSS height Property
CSS height property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>CSS height Property Demo</title>
<style>
p
{
height : 200px;
width : 200px;
}
</style>
</head>
<body>
<p>
IT industry of India have shown a remarkable growth in past few years. And now experts says that it is likely to grow more.
</p>
<p>
</body>
</html>
CSS min-height Property
_______________________
Elements की minimum height define करने के लिए CSS में min-height property available है। जब आप किसी element के लिए यह property define करते है तो उस element की height इस property द्वारा define की गयी height से कम नहीं हो सकती है।
इस property की value आप pixels और percentage में define कर सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS min-height Property Demo</title>
<style>
p
{
width:300px;
min-height:300px;
}
</style>
</head>
<body>
<p>Trees are very crucial for our environment. It is our duty to protect them. We should plant more trees to make our environment cleaner.</p>
</body>
</html>
CSS max-height Property
________________________
Elements की maximum height define करने के लिए CSS में max-height property available है। जब इस property को किसी element के लिए define किया जाता है तो उस element की height इस property द्वारा define की गयी value से अधिक नहीं हो सकती है।
इस property की value भी आप pixels और percentage में दे सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS max-height Property Demo</title>
<style>
p
{
width:300px;
max-height:40px;
border:1px solid #eeeeee;
}
</style>
</head>
<body>
<p>Trees are very crucial for our environment. It is our duty to protect them. We should plant more trees to make our environment cleaner.</p>
</body>
</html>
Borders
________
Introduction to CSS border properties
____________________________________
* CSS border-style property
* CSS border-width property
Introduction to CSS Border Properties
____________________________________
किसी भी element की border उसे दूसरे elements से separate करती है। Borders को design करके आप webpage को और भी attractive बना सकते है।
CSS आपको 4 properties provide करती है जिनकी मदद से आप borders की advanced designing कर सकते है। इनकी list निचे दी जा रही है।
* border-style
* border-width
* border-color
* border-radius
* border (shorthand)
इन सभी properties के बारे में निचे detail से दिया जा रहा है। आइये इन्हें समझने का प्रयास करते है।
border-style
____________
इस property के द्वारा आप border की style define करते है। इस property की values predefined होती है जिनकी list निचे दी जा रही है। यदि आप इस property की value none देते है तो आपको border display नहीं होती है।
> none – इस value से element की border show नहीं होती है।
> solid – इस value के द्वारा आप एक solid border define कर सकते है।
> double – जब आप ये value देते है तो border double line की show होती है।
> dashed – जब आप ये value देते है तो border -(dash) से बनी हुई show होती है।
> dotted – इस value से आप border को dotted show कर सकते है।
> groove – इस value से border grooved दिखाई देती है।
> ridge – ये value यूज़ करके आप border को ridged बना सकते है।
> inset – इस value से आप inset border show कर सकते है।
> outset – इस value से आप outset border show कर सकते है।
border-style property को निचे उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>border-style demo</title>
<style>
div
{
border-style:double;
width:20%;
}
</style>
</head>
<body>
<div style>
<p> India is the best country in the world. I love my India</p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में border की style को double define किया गया है। इससे Div के चारों तरफ double border show होगी।
border-width
____________
यदि आप border की default width यूज़ नहीं करना चाहते है और उसे change करना चाहते है तो ऐसा आप border-width property के द्वारा कर सकते है। इस property के द्वारा आप अपने according border की width customize कर सकते है।
इस property की value आप pixels में देते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>border-width</title>
<style>
#MyDiv{
border-style:solid;
border-width:10px;
width:20%;
}
</style>
</head>
<body>
<div id=”MyDiv”>
<p>Once upon a time there was crow. He was very thirsty. So he bought a water bottle and drank the water. And flew away.</p>
</div>
</body>
</html>
इस उदाहरण में border की width को 10px define किया गया है। इससे border की मोटाई 10px हो जाएगी।
border-color
____________
यदि आप पूरी border का color change करना चाहते है तो ऐसा आप border-color property यूज़ करके कर सकते है। इस property की value आप plain English में भी दे सकते है और hex में भी दे सकते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>border-color demo</title>
<style>
#MyDiv{
border-style:solid;
border-width:2px;
border-color:lime;
width:20%;
}
</style>
</head>
<body>
<div id=”MyDiv”>
<p>This is an example showing use of border color property in CSS</p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में border का color lime define किया गया है। By default यह black रहता है। इससे border का color lime हो जायेगा।
border-radius
_____________
यदि आप किसी element की border के कोनों को curve देना चाहते है या shape देना चाहते है तो इसके लिए आप border-radius property इस्तेमाल कर सकते है। इस property की value आप pixels में भी दे सकते है और % में भी दे सकते है। इसे निचे उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>border-radius</title>
<style>
#MyDiv{
border-style:solid;
border-width:2px;
border-color:blue;
border-radius:10px;
width:20%;
}
</style>
</head>
<body>
<div id=”MyDiv”>
<p>CSS is very powerful. We can design every element of a webpage using CSS. Borders are very important for designing a webpage.</p>
</div>
</body>
</html>
border (shorthand)
__________________
यदि आप ऊपर दी गयी properties को एक single statement के द्वारा define करना चाहते है तो आप border (shorthand) property यूज़ कर सकते है।
इस property के द्वारा आप ऊपर दी गयी सभी properties की value define कर सकते है। इस property का syntax निचे दिया जा रहा है।
border : <border-width> <border-style> <border-color>;
जैसा की आप ऊपर देख सकते है border property की values के रूप में सबसे पहले आप border-width की value देते है। इसके बाद आप border style define करते है और फिर उसके बाद border का color define किया जाता है।
Border radius property को इसमें include नहीं किया गया है। इस property को निचे एक उदाहरण के माध्यम से समझाया गया है।
<html>
<head>
<title>border shorthand property demo</title>
<style>
#MyDiv{
border : 1px solid lime;
width:20%;
}
</style>
</head>
<body>
<div id=”MyDiv”>
<p>Border short hand property is a short version of all the properties defined above. But it does not include a value for border-radius property. </p>
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में सभी properties को एक single statement द्वारा define किया गया है।
Padding & Margin
_________________
Introduction to padding & margin properties in Hindi
_________________________________________________
CSS padding properties in Hindi
______________________________
CSS margin properties in Hindi
______________________________
Introduction to Padding & Margin Properties
__________________________________________
किसी web page की design में padding और margin का बहुत महत्व होता है। Padding और margin को किसी HTML element (<div>,<h1> और <p> आदि) की border के संदर्भ में define किया जाता है।
Padding border की अंदर की तरफ space के रूप में define की जाती है और margin border के बाहर की तरफ space के रूप में define किया जाता है। इसे निचे diagram के द्वारा समझाया जा रहा है।
ऊपर दिए गए diagram में DIV के text और border के बीच जो green area है वह padding कहलाता है। जैसा की मैने आपको बताया padding border के अंदर की तरफ के space को कहते है। Border के बाहर की तरफ जो blue area है वह DIV का margin है। Margin एक element से दूसरे element के बीच space define करने के लिए यूज़ किया जाता है।
आपको हमेशा ध्यान रखना चाहिए की हर HTML element की border होती है जो की by default hidden रहती है। किसी भी element की border show करने के लिए आप उसकी border property set कर सकते है।
CSS Padding Properties
_______________________
Elements की padding define करने के लिए CSS आपको 4 properties provide करती है। इन properties से हर side की padding आप independently define कर सकते है। यदि आप सभी sides की padding एक जैसी रखना चाहते है तो इसके लिए CSS आपको एक और property provide करती है।
इस property से आप सभी sides की padding एक statement में ही define कर देते है। Padding को pixels में define किया जाता है और padding की value negative नहीं दी जा सकती है। आइये अब CSS की padding properties के बारे में जानने का प्रयास करते है।
padding-left Property
____________________
ये property left side की padding define करने के लिए यूज़ की जाती है। इस property की आप जितनी value देते है उतना ही space element के अंदर left side में create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
padding-left:20px;
padding-right Property
इस property के द्वारा आप किसी element की right padding define करते है। जितनी आप इस property की value देते है उतना ही space border के अंदर right side में create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
padding-right:30px;
padding-top Property
ये property element के ऊपर की तरफ border के अंदर padding define करने के लिए यूज़ की जाती है। इसका उदाहरण निचे दिया जा रहा है।
padding-top:10px;
padding-bottom Property
इस property के द्वारा आप किसी भी element में निचे की तरफ padding define कर सकते है। इस property की आप जितनी value देते है उतना ही space element के निचे की तरफ border के अंदर create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
padding-bottom:10px;
आइये इन properties का यूज़ एक उदाहरण के माध्यम से समझने का प्रयास करते है।
<html>
<head>
<title>padding-left-property-example</title>
<style type="text/css">
#MyDIV
{
width:20%;
border:2px solid lime;
padding-left:20px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
}
</style>
</head>
<body>
<div id="MyDIV">
Padding makes your text appear in a structure. It is important to set good padding for your webpage to look beautiful.
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में एक DIV create गया है जिसकी id MyDIV है। <head> tag में CSS के माध्यम से सभी sides की padding set की गयी है।
यदि आप चाहे तो इन चार अलग अलग properties को इस्तेमाल करने की बजाय एक short hand property यूज़ कर सकते है। इस shorthand property में आप सभी sides के लिए padding define कर सकते है। इसका syntax निचे दिया जा रहा है।
padding:top right bottom left;
इस property में सबसे पहले आप element के top की padding define करते है। इसके बाद right, फिर bottom और आखिर में left side की padding define की जाती है। इसका उदाहरण निचे दिया जा रहा है।
padding:20px 10px 20px 10px;
यदि इस property के साथ सिर्फ एक value define करते है तो सभी sides पर वही padding apply हो जाती है। जैसे की
padding:10px;
ऊपर दिया गया statement सभी sides की padding 10px set करता है।
CSS Margin Properties
______________________
CSS margin properties elements के चारों तरफ space create करने के लिए यूज़ की जाती है। Margin properties elements के बाहर की तरफ कितना space रहेगा ये decide करती है। CSS आपको चार margin properties provide करती है। इन properties से आप चारों sides की margin define कर सकते है।
साथ ही CSS आपको एक shorthand property भी provide करती है। जिससे आप इन सभी properties के लिए values एक ही statement में define कर सकते है। इन सभी properties की value आप चार type से define कर सकते है।
auto – जब आप auto value देते है तो browser automatically appropriate margin set कर देता है।
length – इस तरह की value में आप margin की length pixels में define करते है।
% – आप चाहे तो जिस element की आप margin set कर रहे है उसको contain करने वाले element की width का कुछ percent भी margin के रूप में set कर सकते है।
inherit – यदि आप margin parent element से inherit करना चाहते है तो इसके लिए आप ये inherit value pass कर सकते है।
margin-top Property
इस property के द्वारा आप element के top का margin set करते है। ये property define करती है की element के ऊपर border की बाहर की तरफ कितना space रहेगा। इसका उदाहरण निचे दिया जा रहा है।
margin-top:20px;
margin-right Property
इस property के द्वारा आप element के दाँयी तरफ का margin set करते है। इससे element के दाँयी और border के बाहर की तरफ specified space create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
margin-right:10px;
margin-bottom Property
इस property के द्वारा आप element के नीचे की तरफ का margin set करते है। आप जितनी value इस property की देते है उतना ही space element के bottom में border के बाहर की तरफ create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
margin-bottom:20px;
margin-left Property
ये property element के बाँयी तरफ margin set करने के लिए यूज़ की जाती है। जब आप इस property को value के साथ set करते है तो element के बाँयी तरफ border के बाहर space create हो जाता है।
margin-left:20px;
आइये अब इन margin properties को एक उदाहरण के माध्यम से समझने का प्रयास करते है।
<html>
<head>
<title> CSS margin properties demo</title>
<style type="text/css">
#MyDIV
{
width:20%;
border:2px solid blue;
margin-top:40px;
margin-right:10px;
margin-bottom:20px;
margin-left:10px;
}
</style>
</head>
<body>
<div id="MyDIV">
Margin creates space between elements. It makes them look organised. It is important to know the use of CSS margin properties for better website design.</div>
</div>
</body>
</html>
जैसा की आप देख सकते है ऊपर दिए गए उदाहरण में चारों properties के माध्यम से सभी sides का margin set किया गया है।
यदि आप चाहे तो चार properties यूज़ करने की बजाय इसकी जगह एक single shorthand property use कर सकते है। इस property को margin property कहा जाता है। इसका syntax निचे दिया जा रहा है।
margin: top right bottom left;
आइये अब इस property का example देखते है।
margin 20px 10px 20px 10px;
यदि आप इस property की एक single value देते है तो सभी sides का margin उसी value के द्वारा set कर दिया जाता है।
Overflow Properties
___________________
Introduction to CSS overflow properties
______________________________________
Overflow-x property
___________________
Overflow-y property
___________________
Introduction to CSS Overflow Properties
______________________________________
CSS overflow property ये specify करती है की जब किसी element (<body>,<div> और <p> आदि) का content (text, image और video आदि) उस element में fit ना हो पाए तो क्या करना है?
Overflow property को समझने से पहले ये समझना अनिवार्य है की overflow क्या होता है? आइये इसे एक उदाहरण से समझने का प्रयास करते है।
मान लीजिये आपने एक div create किया है। इस div की height 200px है और width 400px है। अब आप इस div में एक ऐसी image को add करते है जिसकी height 400px है और width 300px है।
क्योंकि image की height div की height से अधिक है इसलिए इस situation में image div की border को overflow कर जायेगी और border के बाहर दिखने लगेगी।
यही situation overflow कहलाती है। इसी situation को handle करने के लिए CSS overflow property provide करती है।
Values of CSS Overflow Property
_______________________________
Overflow की condition को कई प्रकार से handle किया जा सकता है। जैसे की जिस element से content overflow हो रहा है उस पर scroll apply किया जा सकता है।
यदि overflow हो रहा content important नहीं है तो उसे hide भी किया जा सकता है और clipping करके सिर्फ element की border के अंदर के content को ही show किया जा सकता है। इसके लिए आप CSS overflow property की अलग अलग values use करते है। इनके बारे में निचे दिया जा रहा है।
visible
जब overflow property की value visible define की जाती है तो वह content जो overflow हो रहा है visible रहता है। इस value से content element की border से बाहर overflow होता हुआ show होता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div
{
width:50px;
height:50px;
border:1px solid blue;
overflow:visible;
}
</style>
</head>
<body>
<div>
यह overflow property का एक उदाहरण है। इस उदाहरण में आप देखेंगे की जब text div में नहीं fit हो पाता है तो वह div की border को overflow करता हुआ बाहर निकल जाता है। क्योंकि overflow property को visible define किया गया है।
</div>
</body>
</html>
hidden
जब overflow property की value hidden define की जाती है तो जो content border के बाहर overflow हो रहा है वो hide हो जाता है। सिर्फ वही content show होता है जो border के अंदर है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div
{
width:50px;
height:50px;
border:1px solid blue;
overflow:hidden;
}
</style>
</head>
<body>
<div> इस उदाहरण में जो text overflow करेगा उसे show नहीं किया जाएगा। सिर्फ border के अंदर के content को ही clipping करके show किया जाएगा।
</body>
</html>
scroll
जब overflow property की value आप scroll देते है तो जिस element में content है उस element में scroll add हो जाता है। Content border से बाहर नहीं जाता है बल्कि content को पूरा देखने के लिए user को scrolling करनी पड़ती है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
p
{
width:50px;
height:50px;
border:1px solid blue;
padding: 5px;
overflow:scroll;
}
</style>
</head>
<body>
<p>
इस उदाहरण में content को clip नहीं किया जाएगा और ना ही content overflow होगा। बल्कि paragraph element में एक scroll create हो जाएगा। Scrolling करके इस सारे content को देखा जा सकता है।
</p>
</body>
</html>
auto
जब आप CSS overflow property की value auto define करते है तो scroll value की तरह ही element में scrolling add हो जाती है।
overflow-x Property
इस property के द्वारा आप left और right side के लिए overflow options define करते है। इस property को केवल तब ही use किया जाता है जब left और right side के लिए overflow option अलग से define करने हो।
इस property के साथ वही values use की जाती है जो overflow property के साथ use की जाती है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div
{
width:50px;
height:50px;
border:1px solid blue;
overflow:scroll;
overflow-x:hidden;
}
</style>
</head>
<body>
<div>
इस उदाहरण में overflow-x property का use करते हुए left और right side में जो भी content overflow हुआ है उसे hide किया गया है। इससे horizontal scrolling भी नहीं show होगी। साथ overflow property को scroll define किया गया है। ऐसा करने से vertically scrolling show होगी।
</div>
</body>
</html>
overflow-y Property
__________________
इस property के द्वारा आप top और bottom side के लिए अलग से overflow options define करते है। इस property के साथ भी वही values use की जाती है जो overflow property के साथ use की जाती है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div
{
width:50px;
height:50px;
border:1px solid blue;
overflow:scroll;
overflow-y:hidden;
}
</style>
<body>
<div>
इस उदाहरण में overflow-y property के माध्यम से top और bottom side में overflow होने वाले content को hide किया गया है। साथ ही overflow property के माध्यम से horizontal scrolling add की गयी है।
</div>
</body>
</html>
Positioning Elements
____________________
Introduction to CSS position property
___________________________________
Example of CSS position property
_______________________________
Introduction to CSS Position Property
___________________________________
Normally जब आप कोई web page create करते है तो एक के बाद दूसरा element create करते है। ये elements उसी order में show होते है जिसमें आपने इन्हें create किया है। ये simple web design होती है।
किसी भी web page की design user को attract करने के लिए महत्वपूर्ण होती है। इसलिए web pages की detailed designing भी की जाती है।
जब भी आप अपने web page की complex designing करते है तो आपको अलग अलग HTML elements को बेहतर user experience के लिए सही क्रम में position करने की आवश्यकता होती है।
जरुरी नहीं की जो element आपने पहले create किया है उसे ऊपर और जो बाद में create किया है उसे निचे show किया जाए। हो सकता है की आप किसी element को different position पर show करना चाहते है।
HTML elements को आवश्यकता के अनुसार position करने के लिए CSS आपको position property provide करती है। यह property आपको HTML elements को पुरे web page में कँही भी position करने के capability provide करती है।
CSS position property की 4 possible values हो सकती है।
1.static
2.relative
3.fixed
4.absolute
CSS position property का general syntax निचे दिया जा रहा है।
position:static/relative/fixed/absolute;
___________________________________
आइये अब position property की द्वारा की जाने वाली अलग अलग positioning के बारे में जानने का प्रयास करते है।
CSS Static Positioning
By default सभी HTML elements की position static होती है। जब आप किसी HTML element की position static define करते है तो वह element अपनी normal position पर ही रहता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div
{
border: 1px solid blue;
position:static;
}
</style>
</head>
<body>
<p>यह एक paragraph है। Web page में ये paragraph सबसे ऊपर show होगा। क्योंकि इसे सबसे पहले create किया गया है।
</p>
<div>
यह एक div element है। क्योंकि इसकी position को static define किया गया है। इसलिए ये web page में paragraph के बाद show होगा। ये इसकी default position भी है।
</div>
</body>
</html>
CSS Relative Positioning
_______________________
जब आप किसी element की position relative define करते है तो नयी position उस element की original position के संदर्भ में define की जाती है।
उदाहरण के लिए यदि आपने कोई div create किया है तो आप relative position के द्वारा इसकी default position के संदर्भ में नयी position define कर सकते है।
उदाहरण के लिए यदि आप div को उसकी normal position से 10 pixel दाएँ move करना चाहते है तो आप left में 10px add करते है।
यदि आप इसी div को इसकी normal position से left में move करना चाहते है तो इसकी right value 10px देते है। आप चाहे तो left में move करने के लिए left की value negative भी दे सकते है।
Element को सभी sides में relatively move करने के लिए left, right, top और bottom properties को use किया जाता है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<style>
div{
border:1px solid blue;
position: relative;
right:-10px;
}
</style>
</head>
<body>
<p>
यह एक normal paragraph है। इस paragraph की position normal है।
</p>
<div>
ये एक div है। इसे CSS relative positioning के द्वारा इसकी original position से 10 pixel right में move किया गया है।
</div>
</body>
</html>
CSS Fixed Positioning
---------------------------------
जब किसी element की position को fixed define किया जाता है तो वह element उसी position पर fix हो जाता है और scroll करने पर भी disappear नहीं होता है।
आपने कई website पर देखा होगा की side में social media button scroll करने पर भी disappear नहीं होते है। ऐसा इसलिए होता है क्योंकि उनकी position fixed होती है।
Fixed position को viewport (window screen) के संदर्भ में define किया जाता है। इसके लिए top, right, bottom और left properties को use किया जाता है। इन properties की value आप positive भी दे सकते है और negative भी दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div
{
border:1px solid blue;
position:fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<div>
यह div screen के top left corner में fixed है। यह scrolling करने पर भी disappear नहीं होगा। क्योंकि इस div की position fixed define की गयी है।
</div>
</body>
</html>
CSS Absolute Positioning
--------------------------------------
जब आप किसी element की position absolute define करते है तो वह element उसके parent element के संदर्भ में position किया जाता है। लेकिन इसके लिए parent element की position static नहीं होनी चाहिए।
उदाहरण के लिए यदि आप एक div के अंदर किसी दूसरे div को position करना चाहते है तो ऐसा आप absolute positioning द्वारा कर सकते है।
Position define करने के लिए top, right, bottom और left properties को use किया जाता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
#DivOne
{
width:200px;
height:200px;
border:1px solid blue;
position:relative;
right:0;
bottom:0;
}
#DivTwo
{
width:100px;
height:100px;
border:1px solid red;
position: absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="DivOne">
<div id="DivTwo">
</div>
</div>
</body>
</html>
Display Property
________________
Introduction to CSS display property
__________________________________
Values of CSS display property
_____________________________
Example of CSS display property
_______________________________
Introduction to CSS Display Property
-------------------------------------------------------
जब आप किसी बड़ी web application का निर्माण करते है तो कई बार आपको कुछ elements के display को control करने की आवश्यकता होती है।
इसके कई कारण हो सकते है। उदाहरण के लिए आप उन ही elements को show करना चाहते है जो content से या उस particular page से related है।
यदि आप ऐसे elements को display करते है जो related नहीं है तो इससे bad user experience create होगा। कारण कोई भी हो लेकिन good user experience के लिए elements के display को control करने की आवश्यकता सभी web developers को पड़ती है।
HTML elements के display को control करने के लिए CSS आपको display property provide करती है। इस property की अलग अलग values के आधार पर आप elements के display को कई प्रकार से control कर सकते है।
Display property का general syntax निचे दिया जा रहा है।
display:inline;
इस property की default value inline होती है।
Values of CSS Display Property
Display property की कुछ values के बारे में निचे दिया जा रहा है।
inline
यह display property की default value होती है। इस value से elements किसी inline element की तरह एक ही line में show होते है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div{
display:inline;
color:blue;
}
</style>
</head>
<body>
<div>यह div element है। </div>
<img src=”thumbsup.jpg” width=”50px” height=”50px”> </img>
</body>
</html>
block
जब display property की value block define की जाती है तो elements अलग से block elements की तरह show होते है।
उदाहरण के लिए जब आप बहुत सी links create करते है तो सभी links एक ही line में show होती है। क्योंकि anchor inline element होता है। लेकिन यदि आप इन links को अलग अलग lines मे show करना चाहते है तो display property को block define करके ऐसा कर सकते है। ऐसा करने से सभी links block elements की तरह अलग अलग lines में show होगी।
इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
a{
display:block;
}
</style>
</head>
<body>
<a href=””>First Link</a>
<a href=””>Second Link</a>
<a href=””>Third Link</a>
</body>
</html>
inline-block
इस value से elements एक ही line में inline elements की तरह show होते है लेकिन वे block container होते है।
उदाहरण के लिए जब भी div element create किया जाता है तो उससे पहले और उसके बाद line break automatically add हो जाता है। लेकिन इस value के माध्यम से आप इस behaviour को override करके कई divs को एक ही line में show कर सकते है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div{
display:inline-block;
}
</style>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV3</div>
</body>
</html>
list-item
इस value से element किसी list के item की तरह show होता है। उदाहरण के लिए यदि आप web page में span elements को किसी list की तरह show करना चाहते है तो display property की list item value use कर सकते है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
span{
color:blue;
display:list-item;
}
</style>
</head>
<body>
<span>ONE</span><span>TWO</span><span>THREE</span>
</body>
</html>
table
इस value से element किसी table की तरह show होता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
span{
display:table;
}
</style>
</head>
<body>
<span>ONE</span><span>TWO</span><span>THREE</span>
</body>
</html>
none
इस value से element display नहीं होता है। इससे webpage की बाकि design पर कोई फर्क नहीं पड़ता है। उदाहरण के लिए यदि आप web page में सभी divs को hide करना चाहते है तो ऐसा display property की none value से सकते है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div{
display:none;
}
</style>
</head>
<body>
<div>यह div display नहीं होगा। </div>
</body>
initial
इस value से display property की value default set हो जाती है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div{
display:initial;
}
</style>
</head>
<body>
<div>FIRST</div><img src=”URL”></img>
</body>
</html>
inherit
----------
जब आप display property की value inherit set करते है तो इस property की value parent element से ली जाती है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
div{
display:list-item;
}
span{
display:inherit;
}
</style>
</head>
<body>
<div>
<span>FIRST</span><span>SECOND</span>
</div>
</body>
</html>
Cursor Property
________________
Introduction to CSS cursor property
__________________________________
Syntax of CSS cursor property
_____________________________
Example of CSS cursor property
_______________________________
Introduction to CSS Cursor Property
__________________________________
जब आप किसी link पर mouse cursor ले जाते है तो आपको hand cursor show होता है और जब आप किसी text पर mouse cursor ले जाते है तो text cursor show होता है। बाकी दूसरे HTML elements पर भी arrow, move आदि cursors show होते है।
Cursor की मदद से user को पता चल जाता है की जिस element पर cursor ले जाया गया है वह किस प्रकार behave करेगा। उदाहरण के लिए hand cursor से user को पता चल जाता है की text एक link है जिसे click करने पर नया page खुलेगा।
Cursors किसी भी web application को interactive बनाने के लिए बहुत उपयोगी होते है। CSS आपको mouse cursor की appearance को control करने की ability provide करती है। यह कार्य CSS में available cursor property द्वारा किया जाता है।
Cursor property के द्वारा यह define किया जाता है की जब mouse cursor को किसी element पर ले जाया जाएगा तो किस प्रकार का cursor show होगा। Cursor property को आप किसी भी HTML element के लिए अपनी आवश्यकता के अनुसार define कर सकते है।
Syntax of CSS Cursor Property
----------------------------------------------
Cursor property का general syntax निचे दिया जा रहा है।
cursor : cursor-type;
जैसा की आप ऊपर दिए गए syntax में देख सकते है cursor property की value के रूप में cursor type का नाम दिया जाता है। इसके लिए बहुत से cursor types available जो value के रूप में define किये जा सकते है। इनके बारे में निचे बताया जा रहा है।
> auto – इस value से browser automatically निर्धारित करता है की कौनसा cursor किस > element के लिए show करना है।
> default – इस value से सभी elements के साथ उन से सम्बंधित default cursors use किये जाते है।
> none – इस value से किसी भी प्रकार का cursor नहीं show होता है।
> initial – यह value cursor की value default value के लिए set कर देती है।
> inherit – इस value से cursor की value वही set हो जाती है जो parent element की होती है।
> context-menu – इस value से एक context menu cursor show होता है जो यह बताता है की context menu available है। इस value को उन elements के लिए use किया जाना चाहिए जिनके लिए context menu define की गयी हो।
> help – यह value help cursor show करती है। Help cursor से user को पता चलता है की किसी element से सम्बंधित help available है।
> pointer – यह value hand cursor show करती है। Hand cursor mostly links के लिए show किया जाता है।
> progress – यह value एक progress indicator cursor show करती है। Progress indicator cursor यह बताता है की process progress में है। जैसे की किसी element का load होना आदि।
> wait – यह value wait cursor show करती है। Wait cursor बताता है की user को wait करना चाहिए।
> cell – यह value cell (column) cursor show करती है। Cell cursor से user को पता चलता है की किसी column को select किया जा सकता है।
> crosshair – यह value एक crosshair cursor show करती है।
> text – यह value text cursor show करती है। Text cursor indicate करता है की text को select किया जा सकता है।
> vertical-text – यह value vertical text selector cursor show करती है। इस text cursor से user को पता चलता है की vertical text को select किया जा सकता है।
> alias – यह value alias (shortcut) cursor show करती है। Alias cursor बताता है की element का shortcut create किया जा सकता है।
> copy – यह value copy cursor show करती है। Copy cursor से user को पता चलता है की element को copy किया जा सकता है।
> move – यह value move cursor show करती है। Move cursor से user को पता चलता है की element को move किया जा सकता है।
> no-drop – यह value no drop cursor show करती है। इस cursor से पता चलता है की current location पर element को drop नहीं किया जा सकता है।
> not-allowed – यह value not allowed cursor show करती है। Not allowed cursor से user को पता चलता है की element के साथ कोई action नहीं लिया जा सकता है।
> all-scroll – यह value all scroll cursor show करती है। All scroll cursor से user को पता चलता है की सभी sides में scroll किया जा सकता है।
> col-resize – यह value column resize cursor show करती है। इस cursor से user को पता चलता है की column को resize किया जा सकता है।
> row-resize – यह value row resize cursor show करती है। इस cursor से user को पता चल जाता है की row को resize किया जा सकता है।
> n-resize – यह value north resize cursor show करती है। इस cursor से user को पता चलता है की किसी element को north में resize किया जा सकता है।
> e-resize – यह value east resize cursor show करती है। इस cursor से user को पता चलता है की किसी element को east में resize किया जा सकता है।
> s-resize – यह value south resize cursor show करती है। इस cursor से user को पता चलता है की किसी element को south में resize किया जा सकता है।
> w-resize – यह value west resize cursor show करती है। इस cursor से user को पता चलता है की किसी element को west में resize किया जा सकता है।
> ne-resize – यह value north east resize cursor show करती है। इस cursor से user को पता चल जाता है की element को north east में move किया जा सकता है।
> nw-resize – यह value north west resize cursor show करती है। इस cursor से user को पता चल जाता है की element को north west में resize किया जा सकता है।
> se-resize – यह value south east resize cursor show करती है। इस cursor से user को पता चलता है की element को south east में move किया जा सकता है।
> sw-resize – यह value south west resize cursor show करती है। इस cursor से user को पता चलता है की element को south west में move किया जा सकता है।
> ew-resize – यह value east west resize cursor show करती है। इस cursor से user को पता चलता है की element को east west में move किया जा सकता है।
> ns-resize – यह value north south resize cursor show करती है। इस cursor से user को पता चलता है की element को north और south में move किया जा सकता है।
> zoom-in – यह value zoom in cursor show करती है। Zoom in cursor से user को पता चलता है की element में zoom in किया जा सकता है।
> zoom-out – यह value zoom out cursor show करती है। Zoom out cursor से user को पता चलता है की element में zoom out किया जा सकता है।
> grab – यह value grab cursor show करती है। Grab cursor से user को पता चलता है की element को grab किया जा सकता है।
> grabbing – यह value grabbing cursor show करती है। Grabbing cursor से user को पता चलता है की element को grab किया जा रहा है।
Example of CSS Cursor Property
-------------------------------------------------
CSS cursor property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>CSS Cursor Property Demo</title>
</head>
<body>
<p>This is a paragraph. When you hover over this paragraph hand cursor will be shown. Default cursor on a paragraph is text cursor. But on this paragraph cursor is changed using CSS cursor property.</p>
</body>
</html>
Visibility Property
_________________
Introduction to CSS visibility property
___________________________________
Syntax of CSS visibility property
______________________________
Values of CSS visibility property
______________________________
Introduction to CSS Visibility Property
____________________________________
जब आप किसी webpage का निर्माण करते है तो कई बार यह आवश्यक हो जाता है की किसी element को hide किया जाए। ऐसा कई कारणों से हो सकता है।
उदाहरण के लिए आप किसी div के content को initially hide करना चाहते है लेकिन जैसे ही कोई user उस पर mouse hover करें तो आप उस div के content को show करना चाहते है या फिर किसी condition के आधार पर भी elements को hide और show करने की आवश्यकता हो सकती है।
जैसे की आप website के किसी page पर ऐसे users जिन्होंने आप की service के लिए pay किया हुआ उन्हें आप advanced options show करना चाहते है और जिन्होंने pay नहीं किया हुआ है या फिर जो free customers है उन्हें आप limited options show करना चाहते है।
कारण कोई भी हो इस कार्य के लिए CSS में visibility property available है जिसके द्वारा आप elements को hide और show कर सकते है। आइये जानते है की visibility property क्या होती है?
CSS में visibility एक ऐसी property है जो किसी element को बिना उसके layout को change या effect किये हुए hide या show कर सकती है।
यँहा पर बिना layout को change या effect करने से मतलब यह है की यदि element visible नहीं है तो भी वह उतना space cover करेगा जितना की वह visible होने पर cover करता है। उस element के invisible होने पर white space show होगा और कोई भी दूसरा element उसके space में show नहीं हो सकता है।
यदि इस बात को आसान शब्दों में कहा जाए तो चाहे element visible हो या न हो लेकिन उसके लिए required white space अवश्य create होगा।
Difference Between CSS Display & Visibility Properties
____________________________________________________
CSS में display और visibility दोनों ही properties elements को hide करने के लिए use की जाती है। लेकिन आपको इससे confuse होने की आवश्यकता नहीं है क्योंकि ये दोनों ही properties अलग अलग तरह से elements को hide करती है।
जब display property के द्वारा किसी element को hide किया जाता है तो वह पूरी तरह hide हो जाता है और उसके लिए किसी प्रकार का white space भी create नहीं होता है। ऐसे elements के बाद वाले elements उस elements की जगह पर show हो जाते है।
लेकिन जैसा की आप जानते है की visibility property के साथ ऐसा नहीं होता है और element का white space create हो जाता है। इसलिए जब आपको layout को छोड़कर element को hide करना हो तो आपको visibility property use करनी चाहिए।
Syntax of CSS Visibility Property
------------------------------------------------
Visibility property का general syntax निचे दिया जा रहा है।
visibility : hidden | visible | collapse | initial | inherit;
जैसा की आप ऊपर दिए गए syntax में देख सकते है visibility property की 5 possible values हो सकती है। आइये इनके बारे में जानने का प्रयास करते है।
Values of CSS Visibility Property
------------------------------------------------
Visibility property की values के बारे में निचे बताया जा रहा है।
> hidden – इस value से element hide हो जाता है।
> visible – यह किसी भी element की default value होती है जिसमे element पूरी तरह visible होता है।
> collapse – यह value मुख्यतः tables के लिए use की जाती है। इस value से आप किसी > particular row या column को hide कर सकते है। ऐसा करने से उस row या column की जगह दूसरे rows या columns ले लेते है। यदि इस value को दूसरे elements के साथ use किया जाता है तो यह hidden की तरह ही काम करती है।
> initial – यह value property को default value पर set कर देती है।
> inherit – यह value property को parent element की value से set करती है।
Example of CSS Visibility Property
---------------------------------------------------
CSS visibility property के use को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS Visibility Property Demo</title>
<style>
#firstP{
border: 1px solid green;
visibility:hidden;
width:300px;
}
#secondP{
border:1px solid green;
width:300px;
}
</style>
</head>
<body>
<p id=”firstP”>This is a paragraph and initially its hidden. But white space for this paragraph is created by browser. </p>
<p id=”secondP”>
This is another paragraph. This paragraph can not take space of above paragraph because above paragraph is hidden using visibility property.
</p>
</body>
</html>
float Property
_____________
Introduction to CSS float property
________________________________
Syntax of CSS float property
__________________________
Example of CSS float property
____________________________
Introduction to CSS Float Property
---------------------------------------------------
किसी समाचार पत्र को पढ़ते समय आपने देखा होगा की एक text का column होता है और उस column में उसी text से सम्बंधित एक image भी होती है जो left या right side में float होती है।
कई बार text books में भी ऐसा होता है की किसी image के चारों तरफ text होता है और वह image left या right side में float होती है।
इससे reader को पता रहता है की दी गयी image text से सम्बंधित है और इसके अलावा इससे एक beautiful layout भी create होता है जो reader को अजीब नहीं लगता है। यदि image को separatly show किया जाए तो वह अधिक जगह भी घेरती है और उससे layout भी ख़राब हो जाता है।
समाचार पत्र और पुस्तकों में यह कार्य text editor द्वारा किया जाता है लेकिन यदि आप ऐसा layout web page में create करना चाहते है तो इसके लिए आप CSS की float property use कर सकते है।
Float property के द्वारा किसी element को left या right में float किया जाता है जिससे उसके आसपास के elements उसे चारों तरफ से घेर लेते है। इससे column layouts create हो जाते है जो webpage को और भी beautiful बनाते है।
मूल रूप से float property को एक simple layout create करने के लिए design किया गया था जिसमें एक image एक text column (container) के अंदर float होती है। जैसा समाचार पत्र या text books में आप देखते है।
लेकिन web developer को आवश्यकता महसूस हुई की images की तरह ही दूसरे element को भी float किया जा सके और इसके बाद यह property images के अलावा दूसरे element को float करने के लिए use कि जाने लगी।
अब यह property web developers द्वारा सबसे अधिक use की जाने वाली properties में से एक है। इस property के द्वारा आप webpage में elements को float करके organize कर सकते है।
Syntax of CSS Float Property
-------------------------------------------
CSS float property का general syntax निचे दिया जा रहा है।
float : left | right | none | initial | inherit;
जैसा की ऊपर दिए गए syntax में बताया गया है float property की 5 possible values हो सकती है। इनके बारे में निचे बताया जा रहा है।
> left – इस value से element left side में float होता है।
> right – इस value से element right side में float होता है।
> none – इस value से element float नहीं होता है और जिस sequence में उसे place किया गया उसी sequence में वह show होता है।
> initial – इस value से default value से property set हो जाती है।
> inherit – इस value से property की parent element से inherit की जाती है।
Example of CSS Float Property
----------------------------------------------
CSS float property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS Float Demo</title>
</head>
<body>
<p><img src="JS.jpg" alt="Javascript" style="width:170px;height:170px;margin-right:15px;">
JAVASCRIPT
============
> Javascript is a client side scripting language.
> Javascript is a cross plateform.
> Javascript is a not compiled language but it is a translated language which is done by browser embeded engine.
> initial name of javascript is mocha.
> javascript is introduce by the Netscape crop.
USES OF JAVASCRIPT
===================
> IMAGE SLIDES
> CLIENT SIDE VOLIDATION
> SHOW TIME AND TIME
> Javascript support exception is an unexpected even which occure during
the execution of programm and inpt the normal flow of the programm.
-:NOTE:-
=======
> JS related code we must put inside "<script>" "</script>" tag:-
(Data Variable In J.S)
======================
> variable is a container which is hold the user data.
> javascript in dynamically typed language.
> In Javascript we can creates variable which based on its value.
</p>
</body>
</html>
Attribute Selectors
__________________
Introduction to CSS attribute selectors
____________________________________
Different types of CSS attribute selectors
_______________________________________
Introduction to CSS Attribute Selectors
_____________________________________
CSS आपको attributes और attribute values के अनुसार elements को design करने की ability provide करती है। यानी की किसी ऐसे element को target किया जा सकता है जिसमे कोई specific attribute या attribute values define की गयी है। इसके लिए CSS में कई attribute selectors available है।
जैसा की आप नाम से ही समझ सकते है attribute selectors किसी element के attributes को select करते है। जिस भी element के attribute attribute selector से match करते है वही element target हो जाता है।
उदाहरण के लिए आप किसी webpage के उन सभी anchor tags को target करना चाहते है जिनके लिए target attribute define किया गया है और उस attribute की value _blank define की गयी है तो ऐसा आप normal selectors द्वारा नहीं कर सकते है। लेकिन attribute selectors द्वारा ऐसा करना बहुत ही आसान है।
आइये अब CSS में available सभी attribute selectors के बारे में detail से जानने का प्रयास करते है।
CSS [attribute] Selector
यह selector ऐसे elements को target करता है जिनमें angular brackets में specify किया गया attribute defined होता है। इस selector का general syntax निचे दिया जा रहा है।
[attribute-name]
{
property:value;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है जिस attribute को match करना है उसे angular brackets में define किया जाता है। इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[target]
{
background-color:yellow;
}
</style>
</head>
<body>
<a href=”https://www.facebook.com” target=”_blank”>Facebook</a>
<a href=”http://www.google.co.in”>Google India</a>
</body>
</html>
CSS-attribute-selector-example
------------------------------------------
CSS [attribute=”value”] Selector
यह selector ऐसे elements को target करता है जिनमें angular bracket में specify किया गया attribute और उसकी same value defined होती है। इस selector में attribute के नाम के आगे assignment operator द्वारा उसकी value भी define की जाती है।
इस selector को define करते समय attribute की value double quotes में define की जाती है। इस selector का general syntax निचे दिया जा रहा है।
[attribute-name=”value”]
{
property:value;
}
यह selector केवल उन्हीं elements को effect करता है जिनका attribute और उसके लिए define की गयी value exact match करती है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
[class=”p1″]
{
background-color:yellow;
}
</style>
</head>
<body>
<p class=”p1″> This paragraph will be effected.</p>
<p>This paragraph will not be effected.</p>
</body>
</html>
CSS [attribute~=”value”]
_______________________
यह selector ऐसे elements को target करता है जिनमें attribute की value में specify किया गया word शामिल होता है। इस selector को define करते समय attribute के नाम के बाद tilde (~) symbol define किया जाता है और उसके बाद assignment operator लगाकर उस word को double quotes में specify किया जाता है जो किसी element की value में शामिल हो सकता है।
उदाहरण के लिए आप कुछ div को target करना चाहते है जिनमें class attribute define हो और उस attribute की value में animal और flowers word शामिल हो तो ऐसी situation में आप इस selector को use कर सकते है।
इस selector का general syntax निचे दिया जा रहा है।
[attribute-name=”containing-word”]
{
property:value;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class~=”Animal”]
{
width:50px;
height:50px;
background-color:blue;
}
[class~=”Flowers”]
{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class=”Animal Div”> </div>
<div class=”Flowers Div”> </div>
</body>
</html>
CSS [attribute|=”value”] Selector
_______________________________
यह selector ऐसे elements को target करता है जिनमें angular brackets में specify किये गए attribute की value specify किये गए word से start होती हो। इस selector में attribute के नाम के बाद vertical (|) line symbol define किया जाता है और उसके बाद वह word double quotes में लिखा जाता है जिसे आप attribute की value से match करना चाहते है।
यह बात ध्यान रखनी आवश्यक है की word complete होना चाहिए। यदि attribute को define करते समय word से पहले hyphen का प्रयोग किया गया है तो ऐसे में word को define करते समय उसके आगे भी hypen लगाना चाहिए। यदि आप एक complete word नहीं लिखते है तो कोई भी element नहीं target होगा।
उदाहरण के लिए आप ऐसे paragraph element को select करना चाहते है जिसके class attribute की value first से शुरू होती है तो ऐसा आप इस selector द्वारा कर सकते है। इस selector का general syntax निचे दिया जा रहा है।
[attribute-name|=”containing-word”]
{
property:value;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class|=”First”]
{
color:blue;
}
</style>
</head>
<body>
<p class=”First-Paragraph”>This is first paragraph.</p>
<p class=”Second-Paragraph”>This is second paragraph.</p>
</body>
</html>
CSS [attribute^=”value”] Selector
________________________________
यह selector भी ऐसे elements को target करता है जिनके specify किये गए attribute की value specify किये गए word से शुरू होती है। फर्क सिर्फ इतना है की इस selector में आपको word complete define करने की आवश्यकता नहीं है। यानी की यदि कुछ letters भी define करते है तो यह selectors elements को target करता है।
इस selector को define करते समय attribute के नाम के बाद Circumflex (^) accent symbol define किया जाता है और उसके बाद assignment operator लगाकर double quotes में वह word लिखा जाता है जिसे आप attribute की value से match करना चाहते है।
इस selector का general syntax निचे दिया जा रहा है।
[attribute-name^=”containing-word”]
{
property:value;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class^=”ed”]
{
background:yellow;
}
</style>
</head>
<body>
<p class=”red-paragraph”>This is red paragraph.</p>
<p class=”green-paragraph”>This is green paragraph.</p>
</body>
</html>
CSS [attribute$=”value”] Selectors
_________________________________
यह selector ऐसे elements को target करता है जिनके specify किये गए attribute की value specify किये गए word से end होती है।
इस selector को define करते समय attribute के नाम के बाद dollar ($) symbol define किया जाता है और उसके बाद assignment (=) operator लगाकर double quotes में वह word define किया जाता है जिसे आप attribute की value से match करना चाहते है। यह आवश्यक नहीं है की word complete हो।
इस selector का general syntax निचे दिया जा रहा है।
[attribute-name$=”value”]
{
property:value;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class$=”graph”]
{
background-color:green;
}
</style>
</head>
<body>
<span class=”first-span”>This is first span</span> <br />
<p class=”first-paragraph”>This is first paragraph</p>
<span class=”second-span”>This is second span</span></br />
<p class=”second-paragraph”>This is second paragraph</p>
</body>
</html>
CSS [attribute*=”value”] Selector
_______________________________
यह selector ऐसे elements को target करता है जिनके specify किये गए attribute की value में specify किया गया word हो। यह selector [attribute=”value”] selector की तरह ही है फर्क सिर्फ इतना है की आपको पूरी value exactly specify करने की आवश्यकता नहीं है।
आप सिर्फ कुछ letters define कर सकते है जो जिस element के attribute की value से match होंगे वही element target हो जाएगा।
इस selector को define करते समय attribute के नाम के बाद asterisk (*) symbol define किया जाता है और उसके बाद assignment (=) operator लगाकर double quotes में वह word specify किया जाता है जिसे आप match करना चाहते है।
इस selector का general syntax निचे दिया जा रहा है।
[attribute-name*=”containing-word”]
{
property:name;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class*=”rst”]
{
background-color:gold;
}
</style>
</head>
<body>
<p class=”first-paragraph”>This is first paragraph.</p>
<p class=”second-paragraph”>This is second paragraph.</p>
</body>
</html>
outline Property
_______________
Introduction to CSS outline property
__________________________________
Syntax of CSS outline properties
_______________________________
Example of CSS outline property
_______________________________
Introduction to CSS outline Property
-----------------------------------------------------
CSS आपको elements की outline design करने के लिए outline property provide करती है। इस property के द्वारा आप element की outline का color, style और size define कर सकते है। इस property के बारे में अधिक जानने से पहले आइये जानते है की outline क्या होती है?
Outline किसी element के बाहर की तरफ एक line होती है। यह line border के outside होती है। किसी भी element की border उसी element का हिस्सा होती है। लेकिन outline element का हिस्सा नहीं होती है।
यदि आप किसी element का background set करते है तो आपको उसकी border के अंदर ही वह background color show होगा। Border के बाहर का जो हिस्सा होता है उस हिस्से में यह color fill नहीं किया जाता है। क्योंकि outline किसी element का हिस्सा नहीं होती है।
Border और outline में मुख्य difference यह होता है की आप चाहे तो किसी एक side की border define कर सकते है। लेकिन outline हमेशा सभी sides के लिए ही define की जाती है।
इसके अलावा outline के द्वारा आसपास के elements की position effect नहीं होती है। क्योंकि जब outline को default value से अधिक increase किया जाता है तो वह आसपास के elements को overlap कर जाती है। लेकिन borders को increase करने पर आसपास के elements की position change हो जाती है।
Outline को कई प्रकार से use किया जा सकता है। उदाहरण के लिए outline property को link tabs को design करने के लिए use किया जाता है। जैसे ही कोई user tab पर hover करता है तो outlines को show किया जाता है। इसके अलावा इसे border के साथ एक attractive layout design करने के लिए भी use किया जा सकता है।
जैसा की मैने पहले बताया outline को design करने के लिए आप outline property use करते है। यह outline को design करने के लिए shorthand property होती है क्योंकि इससे एक ही बार में सभी values set की जा सकती है।
Syntax of CSS outline Property
_____________________________
CSS outline property का general syntax निचे दिया जा रहा है।
outline : color style width;
जैसा की आप ऊपर दिए गए syntax में देख सकते है outline property की 3 values define की जाती है। इन values के बारे में निचे बताया जा रहा है।
> color – सबसे पहले outline का color define किया जाता है। Color define करने के लिए आप > directly नाम भी लिख सकते है या hex code भी लिख सकते है।
> style – दूसरी value style होती है। Style के रूप में आप निचे दी गयी values define कर सकते है।
> none – यह default value होती है। इससे कोई outline define नहीं होती है।
> hidden – इस value से outline define होती है। लेकिन वह hidden रहती है।
> dotted – इस value से dotted outline create होती है।
> dashed – इस value से dashed outline create होती है।
> solid – इस value से solid outline create होती है।
> double – इस value से double outline create होती है।
> groove – इस value से grooved outline create होती है।
> ridge -इस value से ridged outline create होती है।
> inset – इस value से inset outline create होती है।
> outset – इस value से outset outline create होती है।
> width – तीसरी value के रुप में outline की width define की जाती है। यह width आप pixels में define करते है।
Example of CSS outline Property
------------------------------------------------
CSS outline property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS Outline Property Demo</title>
<style>
p{
background:red;
border:1px solid yellow;
outline : brown dashed 10px;
width:250px;
margin:30px;
}
</style>
</head>
<body>
<p>This is a paragraph. This paragraph have blue border and red background. Outline of this paragraph is green. Width of this paragraph is 50px. </p>
</body>
</html>
Other Outline Properties
_______________________
CSS में और भी outline properties available है। इन properties से आप outline की हर value को separately define कर सकते है। इन properties के बारे में निचे बताया जा रहा है।
> outline-color : इस property के द्वारा आप outline का सिर्फ color specify कर सकते है।
> outline-style : इस property के द्वारा आप outline की style define कर सकते है।
> outline-width : इस property के द्वारा outline की width define की जाती है।
ये properties कई situations में useful होती है। जैसे की यदि सभी elements के लिए एक ही > outline rule define किया गया है और आप किसी specific element के लिए अलग outline > color define करना चाहते है तो उस situation में आप उस element के अंदर ही style > attribute के द्वारा outline-color property को use कर सकते है।
z-index Property
________________
Introduction to CSS z-index property
___________________________________
Syntax of CSS z-index property
_____________________________
Example of CSS z-index property
_______________________________
Introduction to CSS z-index Property
------------------------------------------------------
CSS में z-index property HTML elements का stack order define करने के लिए use की जाती है। Stack order वह order होता है जिसमें एक element को दूसरे element के ऊपर या निचे के क्रम में व्यवस्थित किया जाता है।
उदाहरण के लिए जब आप किसी की marriage party में खाना खाने जाते है तो वँहा रखी हुई plates stack order (एक के ऊपर दूसरी के क्रम) में होती है। यदि इन plates पर number लिख दिए जाए और इन्हें फिर से रखा जाए तो हर plate एक stack order (number) को represent करती है।
सबसे निचे की plate 1 (default) stack order represent करती है और सबसे ऊपर की plate highest stack order represent करती है। यदि किसी webpage के सन्दर्भ में देखा जाए तो यह stack order ही webpages में z-index कहलाता है।
Web elements के stack order को set करने के लिए CSS आपको z-index property provide करती है।
CSS की z-index property के द्वारा आप HTML elements को ऊपर निचे के क्रम (stack order) में व्यवस्थित कर सकते है। आसान शब्दों में कहा जाए तो आप यह decide कर सकते है की कौनसा element किस element के ऊपर या निचे show होगा।
उदाहरण के लिए मान लीजिये आपने 3 div elements create किये है। जिनके colors क्रमशः red, green और blue है। आप चाहते है की red color का div सबसे निचे show हो और उसके ऊपर green color का div show हो और उसके ऊपर blue color का div show तो आप इनको क्रमशः 1, 2 और 3 z-index numbers देंगे।
इसी प्रकार मान लीजिये web page design करते समय कोई div किसी div के पीछे चला गया है तो उसे ऊपर लाने के लिए भी आप z-index property use कर सकते है। ऐसे ही किसी div को दूसरे div के पीछे ले जाने के लिए भी आप z-index property को use कर सकते है।
एक बात आपको हमेशा ध्यान रखनी चाहिए की z-index property उन्हीं elements के साथ work करती जो positioned होते है। यानि की जिन elements की position static (default) के अलावा relative, absolute या fixed होती है उन्हीं elements के साथ यह property काम करती है।
Syntax of z-index Property
CSS z-index property का general syntax निचे दिया जा रहा है।
z-index : auto | integer-number;
जैसा की आप ऊपर दिए गए syntax में देख सकते है z-index property की auto और कोई integer number दो possible values हो सकती है।
जब आप इस property की value auto define करते है तो stack order automatically browser द्वारा उस order में define किया जाता है जिस order में elements को place किया गया है। सबसे आखिरी element की सबसे higher z-index होगी।
जब आप इस property की value कोई integer number देते है तो element उसी stack order में show होता है। इसे manual z-index भी कहा जा सकता है।
Example of CSS z-index Property
---------------------------------------------
CSS z-index property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS z-index Property Demo</title>
<style>
#one
{
width:200px;
height:200px;
background:red;
position:absolute;
top:100px;
left:100px;
z-index:3;
}
#two
{
width:200px;
height:200px;
background:green;
position:absolute;
top:150px;
left:150px;
z-index:2;
}
#three
{
width:200px;
height:200px;
background:blue;
position:absolute;
top:200px;
left:200px;
z-index:1;
}
</style>
</head>
<body>
<div id=”one”></div>
<div id=”two”></div>
<div id=”three”></div>
</body>
</html>
box-shadow Property
____________________
Introduction to CSS box-shadow Property
_______________________________________
Syntax of CSS box-shadow Property
__________________________________
Example of CSS box-shadow Property
____________________________________
Introduction to CSS box-shadow Property
-------------------------------------------------------------
जब भी box term को किसी HTML element के सन्दर्भ में use किया जाता है तो इसका तात्पर्य उस element की border, margin, padding और content के समग्र रूप से होता है।
हर HTML element एक box की तरह होता है। Box की कुछ default border, margin और padding होती है जिन्हें change किया जा सकता है। Box के अंदर ही actual content होता है। इसे CSS में box model कहा जाता है।
साधारणतः जब आप किसी HTML element को देखते है तो वह box की तरह प्रतीत नहीं होता है। लेकिन जब उस element की border define की जाती है तो वह box की तरह दिखने लगता है।
CSS box model को design करने के लिए आप अलग अलग colors और shapes की borders, backgrounds, margins और paddings use करते है। इनके अलावा CSS में एक और property available जिसके द्वारा आप किसी box की shadow भी (छाया) create कर सकते है।
Box की shadow create करने के लिए box-shadow property use की जाती है। किसी भी box की shadow create करके आप attractive effects create कर सकते है और उस box को focus में ला सकते है। आप box की किसी भी side में, किसी भी color की और किसी भी width की shadow create कर सकते है।
Syntax of CSS box-shadow Property
-----------------------------------------------------
CSS box-shadow property का general syntax निचे दिया जाता है।
=====================================================
box-shadow : horizontalShadow verticalShadow blur width color;
=====================================================
जैसा की आप ऊपर दिए गए syntax में देख सकते है box-shadow property की 5 values होती है। इनके बारे में निचे दिया जा रहा है।
> horizontalShadow – इस value के द्वारा आप define करते है की shadow left में होगी या right में होगी। जब यह value positive में होती है तो shadow right में show होती है और जब यह value negative में होती है तो shadow left में show होती है। आप जितनी इस value को increase या decrease करते है shadow उतनी ही left और right में बढ़ती जाती है। यह value आप pixels में देते है।
> verticalShadow – इस value के द्वारा आप define करते है की shadow top में होगी या bottom में होगी। जब यह value positive होती है तो shadow bottom side में show होती है और जब यह value negative होती है तो shadow top side में show होती है। यह value भी pixels में ही दी जाती है।
> blur – इस value से आप यह define करते है की आप shadow को कितनी sharp या धुँधली देखना चाहते है। जब आप इस value को 0 या negative define करते है तो shadow किसी border की तरह sharpe दिखाई देती है।
> width – इस value द्वारा आप define करते है की shadow की width क्या होगी।
> color – इस value द्वारा आप sahdow का color define करते है।
Example of CSS box-shadow Property
===============================
CSS box-shadow property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>CSS box-shadow Property Demo</title>
<style>
h1
{
box-shadow : 10px 10px 10px 10px black;
width:400px;
margin:30px;
}
</style>
</head>
<body>
<h1>Your Besty Saurabh Dcruz</h1>
</body>
</html>
Pseudo Classes
------------------------
Introduction to CSS pseudo classes
__________________________________
Syntax of CSS pseudo classes
____________________________
Different CSS pseudo classes
____________________________
Introduction to CSS Pseudo Classes
------------------------------------------------------
CSS pseudo classes elements की special states को design करने के लिए use की जाती है जो document tree में available नहीं है और जिन्हें regular CSS selectors द्वारा नहीं target किया जा सकता है।
जैसा की आपको पता है किसी भी HTML document का document tree web browser द्वारा automatically create किया जाता है। यह document tree उस HTML document में developer द्वारा define किये गए सभी HTML elements से बना होता है जिन्हें CSS द्वारा आसानी से access और design किया जा सकता है।
लेकिन कई बार कुछ ऐसी conditions और states होती है जिनके बारे में document tree में कोई information नहीं होती है। इन्हीं conditions और states को target करने के लिए pseudo classes use की जाती है।
उदाहरण के लिए आप mouse hover किये जाने पर किसी paragraph के color को red करना चाहते है। लेकिन ऐसा आप किसी normal CSS selector द्वारा नहीं कर सकते है क्योंकि यह एक special state जो user द्वारा generate होती है और document tree में इससे related कोई information नहीं होती है।
इसी प्रकार यदि आप किसी document के सिर्फ पहले paragraph का text color blue करना चाहते है तो इस प्रकार की conditions को भी normal CSS selectors द्वारा नहीं target किया जा सकता है। हालाँकि वह paragraph document tree में होगा लेकिन उसे target करने के लिए कोई selector available नहीं है।
इसी प्रकार की और भी कई महत्वपूर्ण states को design करने के लिए CSS में pseudo classes को introduce किया गया है। जिनके बारे में आगे detail से बताया जाएगा। लेकिन आइये उससे पहले pseudo classes के syntax के बारे में जानने का प्रयास करते है।
Syntax of CSS Pseudo Classes
_____________________________
CSS pseudo classes का general syntax निचे दिया जा रहा है।
selector:pseudo-class
{
property-name:value;
}
CSS pseudo के syntax से सम्बंधित एक बात आपको हमेशा ध्यान रखनी चाहिए। Pseudo classes हमेशा colon (:) के साथ start होती है।
आइये अब CSS में available अलग अलग pseudo classes के बारे में जानने का प्रयास करते है।
Complete List of CSS Pseudo Classes
===============================
CSS में available सभी pseudo classes को निचे उदाहरण सहित समझाया जा रहा है।
:link
-------
यह anchor pseudo class सिर्फ उन्हीं anchor tags को target करती है जिनमें href attribute define किया गया है। बाकी anchor tags skip कर दिए जाते है। यह class कई महत्वपूर्ण cases में useful होती है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
a:link
{
color:red;
}
</style>
</head>
<body>
<a href=”some-url-here”>href Link</a>
<a>Non href Link</a>
</body>
</html>
:visited
-----------
यह pseudo class सिर्फ ऐसी links को target करती है जो visit की जा चुकी है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
a:visited
{
color:green;
}
</style>
</head>
<body>
<a href=”https://www.google.co.in”>Google</a>
<a href=”https://www.gmail.com”>saurabhtiger786@gmail.com</a>
</body>
</html>
:hover
----------
जब mouse का cursor किसी element पर ले जाया जाता है तो वह element hover state में चला जाता है। यह class उसी hover state को target करने के लिए use की जाती है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:hover
{
color:red;
}
</style>
</head>
<body>
<p>This is a paragraph. When you bring your mouse on this paragraph its text color will become green</p>
</body>
</html>
:active
----------
यह class किसी link या button की pressed state को target करने के लिए use की जाती है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
a:active
{
color:yellow;
}
</style>
</head>
<body>
<p>Below link color turns yellow during its pressed state</p>
<a href=”some-link-here”>Link</a>
</body>
</html>
:focus
---------
जब कोई element focus में आता है तो उस state को target करने के लिए यह pseudo class use की जाती है। यह class मुख्यतः उन्हीं elements को target करती है जो keyboard के माध्यम से input लेते है। इसे निचे उदाहरण के द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:focus
{
background-color:yellow;
color:black;
}
</style>
</head>
<body>
<form>
Name : <input type=”text” name=”Name”> <br /> <br />
Email : <input type=”email” name=”Email”> <br /> <br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:target
----------
यह class target elements पर CSS rules apply करने के लिए use की जाती है। जब किसी link में URL ना दे कर आप # symbol के साथ किसी दूसरे element का ID name pass करते है तो उस link को click करने पर focus उस element पर चल जाता है। इस situation में वह दूसरा element target element होता है जिसे design करने के लिए यह class use की जाती है।
इस class को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
:target
{
background-color:yellow;
}
</style>
</head>
<body>
<a href=”#MyPara”>Go to My Paragraph</a><p id=”MyPara”> This is my paragraph.</p>
</body>
</html>
:enabled
-------------
यह class ऐसे input elements को select करती है जो by default enabled हो जिन्हें use किया जा सकता है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:enabled
{
background-color:yellow;
}
</style>
</head>
<body>
<form>
Name : <input type=”text” name=”Name”> <br />
Email : <input type=”email” name=”Email”><br />
Tel : <input type=”number” name=”Telephone” disabled><br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:disabled
--------------
यह class ऐसे elements को target करती है जो disabled है। इसे मुख्यतः form elements के साथ use किया जाता है। इसे निचे उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<style>
input:disabled
{
background:color:red;
}
</style>
</head>
<body>
<form>
Name : <input type=”text” name=”Name”><br /> <br />
Tel : <input type=”number” name=”Tel” disabled><br /> <br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:checked
--------------
यह pseudo class ऐसे checkboxes को target करने के लिए use की जाती है जो check किये गए है। उदाहरण के लिए मान लीजिये आप check किये जाने पर checkbox का background color green show करना चाहते है तो इसके लिए आप इस class को use कर सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:checked
{
width:20px;
height:20px;
}
</style>
</head>
<body>
<form>
Male : <input type=”checkbox” name=”male”><br /> <br />
Female : <input type=”checkbox” name=”female”><br /><br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:indeterminate
----------------------
यह pseudo class ऐसे form element को target करने के लिए use की जाती है जिसकी state indeterminate है।
:root
--------
यह class document के root element को target करने के लिए use की जाती है। किसी भी HTML document में root element हमेशा <html> element ही होता है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
:root
{
background-color:lime;
color:black;
}
</style>
</head>
<body>
<h1>saurabhtiger786@gmail.com</h1>
</body>
</html>
:first-child
---------------
यह class specify किये गए selector को target करती है लेकिन सिर्फ तब ही जब वह अपने parent का first child हो। उदाहरण के लिए यदि आप document के ऐसे सभी paragraph का background color red करना चाहते है जो अपने parent के first child है तो इसके लिए आप इस pseudo class को use कर सकते है।
इसे निचे उदाहरण द्वारा समझया जा रहा है।
<html> <head>
<style>
p
{
width:400px;
}
p:first-child
{
background-color:black;
color:yellow;
}
</style>
</head>
<body>
<div>
<p>This paragraph will be targeted because it is first child of its parent div.</p>
<p>This paragraph will not be targeted because it is second child.</div>
</div>
<p>
This paragraph will also be targeted because it is first child of body tag.
</p>
</body>
</html>
:last-child
---------------
यह class specify किये गए selector को target करती है लेकिन सिर्फ जब की वह अपने parent को last child हो। उदाहरण के लिए यदि आप ऐसे सभी paragraphs को target करना चाहते जो अपने parent element के last child हो तो उस situation में आप इस class को use कर सकते है।
इसे निचे उदाहरण के द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:last-child
{
background-color:red;
}
</style>
</head>
<body>
<div>
<p>This paragraph will not be targeted.</p>
<p>This paragraph will be targeted.</p>
</div>
</body>
</html>
:nth-child()
----------------
यह एक ऐसी pseudo class है जिसके द्वारा आप किसी भी number के child element को target कर सकते है। उदाहरण के लिए आप हर उस paragraph को target करना चाहते है जो अपने parent का third child है तो ऐसा करने के लिए आप इस pseudo class को use कर सकते है।
यह class सभी type के elements का एक ही order manage करती है। इसलिए यदि किसी element का third child paragraph नहीं है तो कोई भी element target नहीं होगा।
इस pseudo class में कोई number या expression argument के रूप में pass किया जाता है। जैसे की यदि आप third child element को target करना चाहते है तो आप 3 पास करेंगे। इस बात से कोई फर्क नहीं पड़ता है की parent किस type का है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:nth-child(3)
{
background-color:gold;
}
</style>
</head>
<body>
<p>First Child Paragraph of Body</p>
<span>Second Child Paragraph of Body</span>
<p>Third Child Paragraph of Body</p>
<p>Fourth Child Paragraph of Body</p>
</body>
</html>
:nth-of-type()
-------------------
यह pseudo class किसी particular type के child element को target करती है। उदाहरण के लिए आप किसी particular type (p, span आदि) के सिर्फ हर second child element को target करना चाहते है।
इसके लिए आप इस pseudo class को use कर सकते है। यह class उन situations में helpful है जब parent element के अंदर बहुत तरह के elements हो और आप किसी special type के element को ही target करना चाहते हो।
यह class हर type के child elements का अलग order manage करती है। जिससे उस type के सभी child elements में से specify की गयी position वाला child element target हो जाता है।
इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:nth-of-type(2)
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<span>This is first span of Div.</span>
<p>This is first paragraph of Div.</p>
<span>This is second span of Div</span>
<p>This is second paragraph of Div.</p>
</div>
</body>
</html>
:first-of-type
------------------
यह pseudo class किसी particular type के ऐसे element को target करती है जो अपने parent element का first child element होता है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:first-of-type
{
background-color:silver;
}
</style>
</head>
<body>
<div>
<span>This is first span</span>
<p>This will be targeted</p>
<p>This will no be targeted</p>
</div>
</body>
</html>
:last-of-type
------------------
यह pseudo class किसी particular type के ऐसे element को target करती है जो अपने parent element का last child element होता है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:last-of-type
{
background-color:gold;
}
</style>
</head><body>
<div>
<span>First Span</span>
<p>First Paragraph</p>
<span>Second Span</span>
<p>Second Paragraph</p>
</div>
</body>
</html>
:nth-last-of-type()
--------------------------
यह pseudo class nth-of-type() की तरह ही कार्य करती है लेकिन इसमें counting bottom side से की जाती है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:nth-last-of-type(2)
{
background-color:silver;
}
</style>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<span>First Span</span>
<p>Third Paragraph</p>
</div>
</body>
</html>
:nth-last-child()
-----------------------
यह pseudo class nth-child की तरह ही कार्य करती है लेकिन इसमें counting bottom side से की जाती है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
:nth-last-child(2)
{
background-color:red;
}
</style>
</head><body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</body>
</html>
:only-of-type
यह pseudo class ऐसे element को target करती है जो अपने parent element का एक मात्र किसी particular type का child element होता है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:only-of-type
{
background-color:green;
}
</style>
</head>
<body>
<div>
<p>Only Paragraph Element of Div.</p>
<span>Only Paragraph of Div.</span>
</div>
</body>
</html>
:not()
--------
यह selector specify की गयी class को छोड़कर बाकि दूसरे elements पर apply होता है। उदाहरण के लिए आप किसी खास element जैसे की span को छोड़कर सभी elements का text color red करना चाहते है तो ऐसा करने के लिए इस pseudo class को use कर सकते है।
इसके अलावा यदि आप एक ही type के elements को target कर रहे है लेकिन उनमें से किसी particular element को आप CSS rule से exclude करना चाहते है तो उस particular element की ID आप इस pseudo class में pass कर सकते है।
इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:not(#MyPara)
{
color:red;
}
</style>
</head>
<body>
<p>This is first paragraph</p>
<p id=”MyPara”>This is second paragraph</p>
</body>
</html>
:empty
----------
यह pseudo class ऐसे elements को target करने के लिए use की जाती है जिनके अंदर कोई content भी define नहीं होता है और जिनका कोई child element भी नहीं होता है। ऐसे elements empty elements कहलाते है। इसे नीच उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:empty
{
width:100px;
height:20px;
background:yellow;
}
</style>
</head>
<body>
<p>First Paragraph</p>
<p></p>
</body>
</html>
जैसा की आप ऊपर दिए गए उदाहरण में देख सकते है empty element का background color तब ही display होगा जब आप उसकी width और height define करेंगे।
क्योंकि empty elements में कोई content नहीं होता है इसलिए उनकी कोई width और height नहीं होती है।
:lang
--------
यह class ऐसे elements को select करने के लिए use की जाती है जिनमे lang attribute specify की गयी value के साथ define होता है। उदाहरण के लिए आप सिर्फ उन elements को target करना चाहते है जिनमें lang attribute की value hi (Hindi) define की गयी है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:lang(en)
</style>
</head><body>
<p lang=”en-us”>Gotta go</p>
</body>
</html>
:only-child
----------------
यह pseudo class ऐसे element को target करती है जो parent element का एकमात्र child है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:only-child
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>This is only child of Div</p>
</div>
</body>
</html>
:valid
यह pseudo class ऐसे form elements को target करती है जिनके लिए validation perform होता है और जिनमें user द्वारा valid value input की गयी है। उदाहरण के लिए इस class द्वारा आप email input type में user द्वारा valid email address input किये जाने पर text box का background color green show कर सकते है।
इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:valid
{
background-color:gold;
color:black;
}
</style>
</head>
<body>
<h1>Subscribe Us</h1>
<form>
<input type=”email” name=”Email”> <br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
ऊपर दिए गए उदाहरण में जब user valid email address input करेगा तो text box का background color gold होता है और यदि email address format valid नहीं है तो text box का background color white होगा।
:invalid
यह pseudo class ऐसे form elements को target करती है जिनके लिए validation perform किया जाता है और जिनमें invalid value input की गयी है। उदाहरण के लिए इस class द्वारा आप email input type में invalid email address input किये जाने पर background color red show कर सकते है।
इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:invalid
{
background-color:red;
}
</style>
</head>
<body>
<form>
<input type=”email” name=”Email” > <br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:required
--------------
यह pseudo class ऐसे form elements को target करती है जिनके लिए required attribute define किया गया है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:required
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Enter you email below</h1>
<form>
<input type=”email” name=”email” required> <br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:optional
-------------
यह pseudo class ऐसे form elements को target करती है जिनके लिए required attribute नहीं define किया गया है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:optional
{
background-color:lime;
}
</style>
</head>
<body>
<form>
Name : <input type=”text” name=”Name”><br /> <br />
Email : <input type=”email” name=”Email” required><br /> <br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:out-of-range
-------------------
यह pseudo class ऐसे form elements को target करती है जिनकी value out of range input की गयी है। लेकिन यह सिर्फ उन्ही input elements के लिए work करेगा जिनमें min और max attributes द्वारा range define की गयी है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:out-of-range
{
background-color:red;
}
</style>
</head>
<body>
<form>
<h2>Enter a number between 1 to 10</h2>
<input type=”number” min=”0″ max=”10″><br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:read-only
---------------
यह pseudo class ऐसे input elements को target करती है जिनके लिए readonly attribute define किया गया है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
input:read-only
{
background-color:gold;
color:black;
}
</style>
</head><body>
<form>
Name : <input type=”text” name=”name”<br />
Country :<input type=”text” value=”India” readonly><br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
:read-write
----------------
यह pseudo class ऐसे input elements को target करती है जिनके लिए readonly attribute नहीं define किया गया है।
Pseudo Elements
_________________
Introduction to CSS pseudo elements
___________________________________
Syntax of CSS pseudo elements
______________________________
Example of CSS pseudo elements
________________________________
Introduction to CSS Pseudo Elements
--------------------------------------------------------
कई बार CSS pseudo elements और pseudo classes को समझने में confusion हो जाता है। जिससे इन्हें एक जैसा ही समझ लिया जाता है। लेकिन मैं आपको बताना चाहूँगा की ये दोनों समान नहीं होते है। इनके बीच के difference को निचे स्पष्ट किया जा रहा है।
CSS pseudo classes elements की ऐसी states को target करती है जिनके बारे में document tree में कोई information नहीं है और जिन्हें normal CSS selectors द्वारा नहीं target किया जा सकता है।
उदाहरण के लिए किसी link की active, hover आदि states को target करने के लिए कोई normal selector available नहीं है। इसके लिए आप :hover, :active आदि pseudo classes user कर सकते है।
यदि CSS pseudo elements की बात की जाए तो pseudo elements के द्वारा ऐसे elements create किये जा सकते है जो document tree में पहले से available नहीं है। उदाहरण के लिए ::before pseudo element के द्वारा आप किसी element के content से पहले कोई और content जोड़ सकते है।
Pseudo elements के द्वारा किसी element को target नहीं किया जाता है बल्कि element के किसी special part को target किया जाता है। उदाहरण के लिए ::first-line pseudo element द्वारा आप किसी paragraph की first line को target कर सकते है।
CSS में 5 pseudo elements है। इनकी list निचे दी जा रही है।
> ::after
> ::before
> ::first-letter
> ::first-line
> ::selection
इन सभी pseudo elements के बारे में आगे detail से बताया जाएगा। लेकिन आइये उससे पहले pseudo elements के syntax को समझने का प्रयास करते है।
Syntax of CSS Pseudo Elements
CSS pseudo elements का general syntax निचे दिया जा रहा है।
selector::pseudo-element-name
{
property:value;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है pseudo elements के पहले double colons (::) का प्रयोग किया जाता है।
Double colons के माध्यम से आप किसी pseudo class और pseudo element को differentiate कर सकते है। Pseudo classes से पहले single colon और pseudo elements से पहले double colons लगाए जाते है।
Complete List of CSS Pseudo Elements
---------------------------------------------------
निचे CSS में available सभी pseudo elements को उदाहरण सहित समझाया जा रहा है।
::after
---------
यह pseudo element specify किये गए element के content के बाद कुछ और content add करने के लिए प्रयोग किया जाता है। उदाहरण एक लिए इस pseudo element द्वारा आप किसी webpage के सभी paragraphs के text के बाद कुछ special text add कर सकते है।
जो content आप add करना चाहते है उसे define करने के लिए content property use की जाती है।
इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:after
{
content:” Copyright 2017″;
}
</style>
</head>
<body>
<p>This is first paragraph</p>
<p>This is second paragraph<p>
</body>
</html>
::before
------------
यह pseudo element specify किये गए element के content के पहले कुछ content add करने के लिए प्रयोग किया जाता है। उदाहरण के लिए इस pseudo element द्वारा आप किसी webpage के सभी paragraphs के text से पहले कुछ text add कर सकते है।
::after pseudo element की तरह ही content add करने के लिए content property use की जाती है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p::before
{
content: ” – “;
}
</style>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</body>
</html>
::first-letter
___________
इस pseudo element के द्वारा आप किसी element के content के first letter को target कर सकते है। उदाहरण के लिए इस pseudo element के द्वारा आप किसी webpage के सभी paragraphs के text के first letter को bold और capital बना सकते है।
इस pseudo element के साथ color, paading, margin, font-size आदि properties use की जा सकती है।
इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:first-letter
{
font-size:3em;
color:blue;
}
</style>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</body>
</html>
::first-line
--------------
यह pseudo element किसी element के content की पहली line को target करने के लिए use किया जाता है। उदाहरण के लिए इस pseudo element द्वारा आप web page के सभी paragraph elements के content की first line को bold में show कर सकते है।
इस pseudo element के साथ आप font, color, word-spacing, letter-spacing, background आदि properties use कर सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
p:first-line
{
font-weight:bold;
}
</style>
</head>
<body>
<p>First Paragraph First Line</br.>
First Paragraph Second Line</p>
<p>Second Paragraph First Line</br>
Second Paragraph Second Line</p>
</body>
</html>
::selection
यह pseudo element user द्वारा select किये गए element के part को target करने के लिए use किया जाता है। उदाहरण के लिए इस pseudo element द्वारा आप user के द्वारा select किये गए text का background color और color आदि निर्धारित कर सकते है।
Firefox browser के लिए इस pseudo element का निचे दिया गया variant use किया जाता है।
::-moz-selection
------------------------
CSS selection ::pseudo element के साथ आप color, background, font आदि properties use कर सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
::selection
{
background-color:lime;
color:white;
}
</style>
</head>
<body>
<p>When you select this background will become lime and text color will become white. Try it</p>
</body>
</html>
border-image Property
______________________
Introduction to CSS border-image property
________________________________________
Syntax of CSS border-image property
___________________________________
Example of CSS border-image property
_____________________________________
Introduction CSS border-image Property
------------------------------------------------------------
CSS में border box model का अहम् हिस्सा है। Borders द्वारा आप एक element के content को दूसरे element से separate कर पाते है। एक आकर्षक website बनाते समय borders को design किया जाना महत्वपूर्ण होता है।
Borders को design करने के लिए CSS में कई properties available है। जिनके द्वारा आप borders का color, उनकी style (solid, dashed और double आदि।) और उनकी width define कर सकते है।
इसके अलावा CSS में borders को rounded बनाने के लिए border-radius property available है। जिससे elements और भी अधिक attractive और beautiful लगने लगते है।
Border properties की series में CSS3 में एक और property add की गयी है जिसे border-image property कहा जाता है। इस property के द्वारा कोई image किसी element की border के रूप में use की जा सकती है।
Images को border के रूप में use करने के कई कारण हो सकते है जैसे की webpage की theme के अनुसार किसी भी image को border के रूप use करके एक beautiful layout create किया जा सकता है।
Image borders normal borders से ज्यादा beautiful लगती है। ऐसी borders website की theme में पूरी तरह blend हो जाती है जिससे user को पता भी नहीं चलता है की borders का प्रयोग किया गया है।
CSS border-image property किसी भी element पर apply की जा सकती है। लेकिन जब th, tr और td elements के लिए border-collapse property की value collapse set की गयी हो तो इस property को नहीं use किया जा सकता है।
CSS में border-image एक short hand property है जिसके द्वारा निचे दी गयी properties की value एक ही बार में define की जा सकती है।
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
Currently ये सभी properties किसी भी browser द्वारा support नहीं की जाती है। इसलिए आपको image को border के रूप में define करने के लिए shorthand border-image property ही use करनी चाहिए।
Syntax of CSS border-image Property
--------------------------------------------------------
CSS border-image property का general syntax निचे दिया जा रहा है।
========================================
border-image : source slice width outset repeat;
========================================
जैसा की आप ऊपर दिए गए syntax में देख सकते है border-image property के लिए 5 values define की जाती है। लेकिन इस property को सिर्फ source value द्वारा भी define किया जा सकता है। जब आप ऐसा करते है तो बाकी 4 default values use की जाती है।
इन सभी values के बारे में निचे detail से बताया जा रहा है।
source
----------
यह value उस image का source होती है जिसे आप border के रूप में use करना चाहते है। जिस प्रकार background image define करते समय image को url() function द्वारा define करते है उसी प्रकार यँहा पर भी image को define करने के लिए url() function use किया जाता है।
आप चाहे तो image ना define करके CSS gradient colors भी border के रूप में define कर सकते है। इसके अलावा आप SVG images को भी borders के लिए use कर सकते है।
इस value को अलग से define करने के लिए border-image-source property use की जाती है। इसका syntax निचे दिया जा रहा है।
border-image-source : url(“address-of-image”) | CSS-gradient | SVG ;
slice
-------
यह value वह number होता है जिसके अनुसार आप border के रूप में use की जाने वाली image को slice (काटना) करना चाहते है। Image हमेशा nine parts में slice की जाती है। जिसमे 4 corners होते है, चार sides top, bottom, left और right होती है और एक image का middle part होता है। Image के 4 corners हमेशा fix रहते है। बाकी sides को आप अपने according manage कर सकते है।
Number के अलावा यह value percentage में भी define की जा सकती है और इस value को आप fill भी define कर सकते है जिसे image background में fill हो जाती है।
इस value को अलग से define करने के लिए border-image-slice property use की जाती है। इसका syntax निचे दिया जा रहा है।
border-image-slice : number-px | % | fill;
width
--------
यह value image border की width होती है। यह value mostly pixels में define की जाती है। इस value को अलग से define करने के लिए image-border-width property use की जाती है।
border-image-width : number-px;
outset
--------
यह value एक number होता है जो represent करता की border image box model से बाहर कितना फैलेगी। इस value को अलग से define की करने के लिए border-image-outset property use की जाती है।
border-image-outset : number-px;
repeat
---------
यह value define करती है की border image repeat होनी चाहिए, stretch की जानी चाहिए या round होनी चाहिए। यह value आप repeat, round या stretch define कर सकते है।
Repeat value का मतलब होता है की image को repeat किया जाएगा। Stretch का मतलब होता है की area को cover करने के लिए image को repeat करने की बजाय stretch किया जाएगा। Round value द्वारा image repeat की जाती है और पुरे area को fill कर देती है।
इस value को अलग से define करने के लिए border-image-repeat property use की जाती है। इसका syntax निचे दिया जा रहा है।
border-image-repeat : repeat | stretch | round;
Example of CSS border-image Property
निचे CSS border-image property को उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS border-image property Demo</title>
<style>
p
{
width:300px;
margin:30px;
padding:15px;
border:10px solid;
border-image:url(border.png) 20 stretch;
}
</style>
</head>
<body>
<p>This is paragraph. This paragraph have a image border around it. Images borders are more attractive than normal borders.</p>
</body>
</html>
text-shadow Property
_____________________
Introduction to CSS text-shadow property
_______________________________________
Syntax of CSS text-shadow property
__________________________________
Example of CSS text-shadow property
----------------------------------------------------
Introduction to CSS text-shadow Property
-------------------------------------------------------
CSS आपको text की shadow display करने की ability provide करती है। किसी भी text की shadow display करके आप उसे और भी attractive बना सकते है।
अभी तक यह popular feature सिर्फ कुछ word processors जैसे की MS Word आदि में ही available था। इस feature को webpages में implement करने के लिए CSS3 में text-shadow property introduce की गयी है।
इस property द्वारा आप किसी text की एक से अधिक shadows भी create कर सकते है। इसके लिए values को दुबारा comma से separate करके लिखा जाता है।
इस property को आप website की heading या फिर किसी important note को display करने के लिए use कर सकते है।
Syntax of CSS text-shadow Property
-------------------------------------------------
निचे text-shadow property का general syntax दिया जा रहा है।
==============================================
text-shadow : horizontal-shadow vertical-shadow blur color;
==============================================
जैसा की आप ऊपर दिए गए syntax में देख सकते है text-shadow property के लिए 4 values define की जाती है। इनके बारे में निचे बताया जा रहा है।
> horizontal-shadow – यह value define करती है की shadow horizontally किस प्रकार show होगी। यह value एक pixel number होता है जो यह बताता है की shadow right या left में कितना दिखाई देगी। जब यह value positive में define की जाती है तो shadow right side में show होती है। जब यह value negative में define की जाती है तो shadow left में show होती है। जब इस value को increase या decrease किया जाता है तो shadow उतनी ही left और right में बढ़ती है।
> vertical-shadow – यह value define करती है की shadow vertically किस प्रकार show होगी। यह value एक pixel number होता है जो यह बताता है की shadow top या bottom में कितनी दूर तक दिखाई देगी। यह value negative define किये जाने पर shadow top में show होती है और value positive होने पर shadow bottom में show होती है। जब इस value को increase या decrease किया जाता है तो shadow उतनी ही top और bottom की तरफ बढ़ती है।
> blur – यह value pixel number होता है जो यह बताता है की shadow कितनी धुँधली show होगी।
> color – यह value color के लिए होती है इसे आप नाम के द्वारा या hex value के रूप में define कर सकते है।
किसी text की एक से अधिक shadow define करने के लिए आप इन सभी values को comma से separate करके दूसरी shadow के लिए दुबारा से define करते है।
Example of CSS text-shadow Property
--------------------------------------------------------
निचे text-shadow property का simple उदाहरण दिया जा रहा है।
<html>
<head>
<title>CSS text-shadow Property Demo</title>
<style>
span
{
text-shadow : 8px 8px 8px #939597;
color:#272727;
font-size:3em;
}
</style>
</head>
<body>
<span>Dcruz Technology Tutorials</span>
</body>
</html>
@font-face Rule
________________
Introduction to CSS @font-face rule
__________________________________
Syntax of CSS @font-face rule
_____________________________
Example of CSS @font-face rule
______________________________
Introduction to CSS @font-face Rule
------------------------------------------------------
सभी devices जैसे की personal computer, laptop और mobile आदि में कुछ fixed fonts पहले से stored रहते है। इन्हें web safe fonts कहा जाता है। यह एक global standard है जिसके तह्त सभी devices को इन fonts को store करके रखना होता है।
जब users अपने device के through किसी website को देखते है तो इन्हीं fonts में से कुछ fonts को use करते हुए उस website का content उनको show होता है। यदि website के लिए web safe fonts के अलावा कोई दूसरा font face (font family) use किया गया है तो वह उनको show नहीं होगा क्योंकि वह font face उनके devices पर installed नहीं है।
यही reason है की web designers websites को design करते समय web safe fonts का ही अधिक प्रयोग करते है। लेकिन इससे designers bound हो जाते है और website का design भी fixed हो जाता है क्योंकि designers web safe fonts के अलावा दूसरे fonts को use नहीं कर सकते है।
इस problem के solution के रूप में CSS3 में एक बहुत ही useful @ rule introduce किया गया है। यह rule @font-face के नाम से जाना जाता है।
CSS @font-face rule के द्वारा आप किसी भी font को अपने webpage में use कर सकते है और इसके लिए उस font का user के device पर installed होना आवश्यक भी नहीं है। यह rule designer को webpages में custom fonts use करने की ability provide करता है।
इस rule के माध्यम से जिस भी font को आप use करना चाहते है सबसे पहले उसका नाम define करते है और उसके बाद उस location को define करते है जँहा वह font stored है। यह location मुख्यतः किसी server पर होती है ताकि सभी को webpage उसी font में show हो सके।
आप चाहे तो किसी particular device में font को store करके वह location भी pass कर सकते है लेकिन ऐसा करने से वह font सिर्फ उसी device पर show होगा।
आप जिस भी location पर font को store करते है Web page load होते समय वह font location से fetch करके webpage को display करने में प्रयोग किया जाता है।
लेकिन एक बात आपको ध्यान रखनी चाहिए की जब तक आप font-family property द्वारा उस font को webpage के लिए define नहीं करेंगे वह font आपके web page में show नहीं होगा। CSS @font-face rule सिर्फ webpage को उस font से link करता है।
इसके बाद जिस प्रकार आप normally अलग अलग fonts को define करने के लिए font-family property use करते है उसी प्रकार अपने custom font को भी आपको इस property द्वारा webpage में define करना होगा।
यह rule सभी modern browsers द्वारा support किया जाता है इसलिए आप इसे बिना किसी रुकावट के अपनी web applications के लिए use कर सकते है।
Syntax of CSS @font-face Rule
----------------------------------------------
निचे @font-face rule का general syntax दिया जा रहा है।
@font-face
{
font-family : “name-of-font”;
src : “location-of-font”;
—-more properties—-
}
जैसा की आप ऊपर दिए syntax में देख सकते है custom font के बारे में जानकारी प्रदान करने के लिए कुछ properties use की जाती है। इन्हें font descriptors कहा जाता है। इस rule के साथ निचे दिए गए font descriptors use किये जा सकते है।
font-family
----------------
इस property द्वारा आप custom font का नाम define करते है।
src
-----
इस property द्वारा वह location define की जाती है जँहा पर font stored है। Location define करने के लिए URL function का प्रयोग किया जाता है।
font-stretch
------------------
यह property optionally define की जाती है। इस property द्वारा आप define करते है की font किस प्रकार stretch होगा। इस property की कुछ common values normal, condensed और expanded आदि होती है।
font-style
--------------
यह property optionally define की जाती है। इस property द्वारा font की style define की जाती है। इस property की values normal, italic और oblique होती है।
font-weight
-----------------
यह property optionally define की जाती है। इस property द्वारा font की boldness define की जाती है। इस property की कुछ common values bold, bolder और boldest आदि होती है।
unicode-range
----------------------
यह property optionally define की जाती है। इस property द्वारा उन unicode characters को define किया जाता है जिन्हें font support करता है।
format
----------
यह एक function होता है जो font format define करने के लिए प्रयोग किया जाता है। सभी modern browsers के लिए WOFF (Web Open Font Format) format प्रयोग किया जाता है। Internet Explorer के पुराने versions में TTF (TrueType Font) और OTF (OpenType Font) formats use किये जाते है।
Example of CSS @font-face Rule
------------------------------------------------
निचे CSS @font-face rule को उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS @font-face Demo</title>
<style>
@font-face
{
font-family : Roboto;
src : url(‘roboto.woff’) format(‘woff’);
}
h1
{
font-family : ‘Roboto’, sans-serif;
font-size : 30px;
}
</style>
</head>
<body>
<h1>Best Dcruz Technology Infomation</h1>
<p>Computer Science & IT Tutorials</p>
</body>
</html>
@media Rule
_____________
Introduction to CSS @media rule
_______________________________
Syntax of CSS @media rule
__________________________
Example of CSS @media rule
____________________________
Introduction to CSS @media Rule
--------------------------------------------------
CSS @media rule अलग अलग media devices (Mobile, Desktop, Tablet आदि) के लिए अलग अलग CSS styles define करने के लिए use किया जाता है।
अक्सर ऐसा होता है की सभी तरह के media devices के लिए एक ही style define की जाती है। लेकिन ऐसा करने से आपका webpage अलग अलग media devices पर ठीक तरह से display नहीं होता है।
उदाहरण के लिए यदि आप किसी normal webpage को mobile पर देखेंगे तो वह ठीक तरह से display नहीं होता है। वह page mobile device पर fit नहीं होता है। क्योंकि mobile के लिए उसकी width बहुत अधिक होती है।
ऐसे में आपको उस webpage को mobile devices के लिए optimize करने की आवश्यकता होती है। इसके लिए आप उस page में @media rule द्वारा mobile devices पर use करने के लिए CSS styles define कर सकते है। ये styles केवल तब ही काम करती है जब webpage को किसी mobile device पर देखा जाएगा।
इसी प्रकार आप अलग अलग तरह के media devices (desktop, laptop, tablets आदि) के लिए @media rule द्वारा अलग अलग CSS styles define कर सकते है। इस rule को CSS media queries के नाम से भी जाना जाता है।
जब भी आप इस rule को अपने webpage में define करते है और webpage को किसी device के through देखते है तो उस समय यह rule उस device के viewport (device का actual screen area) की width, height, orientation और resolution आदि जैसी जानकारी collect करता है। बाद में इसी जानकारी के आधार पर अलग अलग devices पर अलग अलग styles apply की जाती है।
इस जानकारी को collect करने के लिए अलग अलग media feature expressions use किये जाते है। जिनके बारे में आप आगे जानेंगे। लेकिन आइये उससे पहले @media rule का syntax समझने का प्रयास करते है।
Syntax of CSS @media Rule
CSS @media rule का general syntax निचे दिया जा रहा है।
=======================================================
@media operator media-type operator (media-features-expression)
=======================================================
{
CSS Code here;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है @media rule को media type, and keyword और media-features के block के रूप में define किया जाता है। इस rule को define करने के लिए आप @media keyword use करते है।
इस syntax को समझने के लिए आपको इन सभी terms को समझना आवश्यक है। इनके बारे में निचे detail से बताया जा रहा है।
Operator
-------------
Operators media query create करने के लिए use किये जाते है। आप निचे दिए जा रहे operators को use कर सकते है।
> and – यह operator media features को combine करने के लिए use किया जाता है।
> not – यह operator media query को negate करने के लिए use किया जाता है।
> only – यह operator use करने से only जब complete query true होती है तो ही CSS style apply होती है।
media-type
-----------------
Media type वह device type होता है जिस पर आप CSS style define करना चाहते है। Media type के रूप में आप निचे दी गयी values define कर सकते है।
> all – सभी media devices के लिए इस value को प्रयोग किया जाता है।
> print – यह value printers के लिए use की जाती है।
> screen – यह value desktop computers, tablets और mobile आदि media device के लिए प्रयोग की जाती है। Web designing करते समय मुख्यतः आप इसी value को use करेंगे।
> speech – यह value screen readers के लिए use की जाती है। Screen readers > screen के text को loudly read करते है।
> media-feature-expression
> Media feature expressions media device की special characteristics को test करने के लिए प्रयोग किया जाते है। उदाहरण के लिए आप CSS style को उन्हीं devices पर apply करना चाहते है जिनके viewport की width 400 pixels से कम है तो इसके लिए max-width media feature expression use करेंगे।
आप निचे दिए गए media feature expressions value के रूप में use कर सकते है।
> width – viewport की width test करने के लिए।
> min-width – viewport की minimum width test करने के लिए।
> max-width – viewport की maximum width test करने के लिए।
> height – viewport की height test करने के लिए।
> min-height – viewport की minimum height test करने के लिए।
> max-height – viewport की maximum height test करने के लिए।
> aspect-ratio – viewport की width और height का aspect ratio test करने के लिए।
> orientation – viewport के orientation को test करने के लिए।
> resolution – media device का resolution test करने के लिए।
> scan – Media device की scanning process test करने के लिए।
> grid – Device में grid या bitmap screen है test करने के लिए।
> update – कितनी जल्दी device appearance को update करता है यह test करने के लिए।
> overflow-block – Media device की overflow-block condition handling को test करने के लिए।
> overflow-inline – Media device की overflow-inline condition handling test करने के लिए।
> color – Media device में हर bit में कितने color component है यह test करने के लिए।
> color-gamut – Media device के द्वारा कितने color support किये जाते है यह test करने के लिए।
> color-index – Media device की color lookup table में कितनी entries है यह test करने के लिए।
> display-mode – Web application का display mode test करने के लिए।
> monochrome – एक monochrome device में per bit पर कितने colors है यह test करने के लिए।
> inverted-colors – क्या browser या operating system colors को invert करते है यह test करने के लिए।
> pointer – क्या primary input mechanism एक input device है यह test करने के लिए।
> hover – क्या primary mechanism से user elements पर hover कर सकता है यह test करने के लिए।
> any-pointer – क्या कोई भी available input device एक pointing device है यह test करने के लिए।
> any-hover – क्या किसी भी available input device से user elements पर hover कर सकता है।
> light-level – Environment का light level test करने के लिए।
> scripting – क्या scripting available है यह test करने के लिए।
Example of CSS @media Rule
--------------------------------------------
निचे CSS @media rule को एक simple उदाहरण द्वारा समझाया जा रहा है। उदाहरण में @media rule द्वारा ऐसी style define की गयी है जो सिर्फ उन devices पर apply होगी जिनकी width 300 pixels है।
<html>
<head>
<title>CSS @media Rule Demo</title>
<style>
@media only screen and (width:300px)
{
body
{
width:300px !important
}
}
</style>
</head>
<body>
<p>I like Dcruz Technology Tutorials.</p>
</body>
</html>
ऊपर दिया गया उदाहरण ऐसा webpage generate करता है जो 300 pixel device पर देखे जाने पर भी सही तरह से display होता है।
@import Rule
______________
Introduction CSS @import rule
_____________________________
Syntax of CSS @import rule
__________________________
Example of CSS @import rule
_____________________________
Introduction to CSS @import Rule
---------------------------------------------------
किसी भी HTML page के लिए CSS styles कई प्रकार से define की जा सकती है। उदाहरण के लिए आप HTML file के अंदर भी CSS style define कर सकते है या फिर आप चाहे तो एक external file create करके उसमे सभी styles define कर सकते है।
जब आप कोई बड़ी web application create करते है तो उसे design करने के लिए बहुत अधिक CSS styles define करते है। यदि आप इन styles को HTML file के अंदर ही define करते है तो ये इतनी अधिक होती है की आप इन्हें मैनेज नहीं कर सकते है।
क्योंकि जब आप HTML file के अंदर CSS define करते है तो वह categorized नहीं होती है। जब भी आपको कोई changes करने की आवश्यकता होती है तो आपको पूरी HTML file को search करना पड़ता है।
इसके अलावा जब आप HTML file में बहुत अधिक CSS styles define करते है तो इससे page की loading speed भी effect होती है। ऐसी situations के लिए CSS में @import rule introduce किया गया है।
CSS @import rule के द्वारा आप दूसरी style sheets से CSS styles import कर सकते है। Stylesheet वह file होती है जिसमें बहुत सी CSS styles defined होती है। Style sheet को .css extension के साथ save किया जाता है।
आप <link> tag द्वारा भी external stylesheet को webpage में include कर सकते है। जब आप <link> tag को use करते है तो उसमें parallel loading allow होती है। यानी की एक से अधिक stylesheet एक साथ load हो सकती है।
लेकिन जब आप @import rule use करते है तो parallel loading allow नहीं होती है। यानी की यदि आपने HTML file में एक से अधिक stylesheet import की है तो जब तक पहली stylesheet पूरी तरह से load नहीं होगी तब तक दूसरी stylesheet की loading शुरू नहीं होगी।
CSS @import rule के साथ आप media type (Computer, laptop, mobile आदि) भी define कर सकते है। यानी की आप define कर सकते है की import की जाने वाली style sheet किस तरह के media type पर apply होगी।
Media type के अलावा आप complete media query भी इस rule के साथ define कर सकते है। Media types आप <link> tag में भी define कर सकते है।
CSS @import rule को बहुत कम use किया जाता है। हालाँकि कई situations में यह rule बहुत useful होता है। उदाहरण के लिए जब आप चाहते है की जब तक कोई special stylesheet load ना हो तब तक बाकि stylesheets load ना हो तो इसके लिए आप इसे use कर सकते है।
Syntax of CSS @import Rule
------------------------------------------
CSS @import rule का general syntax निचे दिया जा रहा है।
===============================
@import url(“url-of-stylesheet-here”);
===============================
आप चाहे तो url() function ना define करके URL को directly एक string के रूप में भी define कर सकते है।
==========================
@import url-of-stylesheet-here;
==========================
जैसा की मैने आपको पहले बताया @import rule के साथ media type या media query को भी define किया जा सकता है। इन्हें URL के बाद सबसे आखिर में define किया जाता है।
@import url(“url-of-stylesheet-here”) media-type/media-query;
Media types और media queries से सम्बंधित अधिक जानकारी के लिए आप @media rule tutorial पढ़ सकते है।
Example of CSS @import Rule
---------------------------------------------
CSS @import rule का simple उदाहरण निचे दिया जा रहा है।
myWebPage.html
--------------------------
<html>
<head>
<title>CSS @import Rule Demo</title>
<style>
@import url(“/project1/files/bht.css”);
</style>
</head>
<body>
<h1>Dcruz Technology Tutorials</h1>
</body>
</html>
bht.css
-----------
h1{
color:lime;
}
filter Property
_____________
Introduction to CSS filter property
________________________________
Syntax of CSS filter property
___________________________
Example of CSS filter property
_____________________________
Introduction to CSS filter Property
---------------------------------------------------
Elements की color सम्बन्धित properties जैसे की contrast, brightness, blurriness आदि को control करने के लिए CSS3 में filter property introduce की गयी है। यह property मुख्यतः <img> elements के साथ प्रयोग की जाती है।
Basically इस property द्वारा आप elements की brightness, contrast आदि को increase और decrease कर सकते है। यह property आपको कुछ हद तक image editors जैसी capabilities provide करती है।
इस property द्वारा color shifting भी की जा सकती है। यानी की यदि आप किसी color image को black and white में show करना चाहते है तो ऐसा आप इस property द्वारा कर सकते है।
इस property की value के रूप में functions pass किये जाते है। हर color property के लिए अलग से function मौजूद है। इन functions को filters भी कहा जाता है जिन्हें आप किसी <img> या दूसरे element पर apply करते है।
जब भी किसी element पर कोई filter apply किया जाता है तो render (display) होने से पूर्व वह element filter function से pass होता है। Filter function या simply filter द्वारा उस element की color properties change की जाती है और इसके बाद वह element webpage में render होता है।
Syntax of CSS filter Property
___________________________
CSS filter property का general syntax निचे दिया जा रहा है।
=======================
filter : none | filter-function;
=======================
जैसा की आप ऊपर दिए गए syntax में देख सकते है filter property की value none या किसी filter function के रूप में pass की जाती है।
जब इस property की value none pass की जाती है तो किसी भी प्रकार का filter apply नहीं होता है। इसके अलावा आप इस property में निचे दिए जा रहे filter functions को भी pass कर सकते है।
blur(px)
------------
यह function किसी image का blur effect define करने के लिए प्रयोग किया जाता है। इस function में value pixels के रूप में pass की जाती है।
brightness(%)
---------------------
यह function किसी image की brightness को control करने के लिए use किया जाता है। इस function में value percentage के रूप में pass की जाती है।
contrast(%)
------------------
यह function किसी image के contrast को control करने के लिए प्रयोग किया जाता है। इसकी value percentage के रूप में pass की जाती है।
drop-shadow(v-shadow h-shadow blur spread color)
------------------------------------------------------------------------------
यह function किसी image का shadow effect create करने के लिए प्रयोग किया जाता है। इस function में vertical shadow, horizontal shadow, blur, spread और shadow का color आदि values pass की जाती है।
Vertical shadow value द्वारा define किया जाता है की shadow top में show होगी या bottom में show होगी। इसी प्रकार horizontal shadow value द्वारा define किया जाता है की shadow right में show होगी या left में show होगी।
Blur value define करती है shadow कितनी धुँधली show होगी। Spread value define करती है की shadow कितनी फैलेगी। Color value द्वारा shadow का color define किया जाता है।
grayscale(%)
--------------------
यह function किसी image पर black and white effects apply करने के लिए प्रयोग किया जाता है। इस function की value percentage के रूप में pass की जाती है।
hue-rotate(deg)
-------------------------
यह function image पर hue rotation apply करने के लिए प्रयोग किया जाता है। Hue rotation एक color circle पर किया जाने वाला rotation होता है। Value के रूप में इस function में degree pass की जाती है जिस पर आप image को rotate करना चाहते है। जिस degree पर आप rotate करते है वही color combination image पर apply हो जाता है।
invert(%)
--------------
यह function किसी image के colors को उनके विपरीत colors में invert कर देता है। इस function की value percentage के रूप में pass की जाती है।
opacity(%)
----------------
इस function द्वारा image की opacity define की जा सकती है। Opacity define करने के लिए आप opacity properties भी use कर सकते है।
saturate(%)
------------------
यह function image को saturate करने के लिए प्रयोग किया जाता है। इसकी value percentage के रूप में pass की जाती है।
sepia(%)
-------------
यह function image को काले और भूरे रंग के combination में convert करता है। इसकी value percentage में define की जाती है।
url()
-------
यह function SVG elements को filter करने के लिए प्रयोग किया जाता है। इस function में उस XML file का address pass किया जाता है जो SVG element को filter करेगी।
Example of CSS filter Property
---------------------------------------------
निचे CSS filter property को simple उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS filter Property Demo</title>
<style>
img
{
filter:blur(5px);
}
</style>
</head>
<body>
<h1>CSS filter Property Example</h1>
<img src=”images/bht-logo.jpg”>
</body>
</html>
object-fit Property
__________________
Introduction to CSS object-fit property
____________________________________
Syntax of CSS object-fit property
_______________________________
Example of CSS object-fit property
_________________________________
Introduction to CSS object-fit Property
---------------------------------------------------------
CSS object-fit property बताती है की किसी image या video को उसके container में fit करने के लिए किस प्रकार resize किया जाना चाहिए।
कई बार ऐसा हो सकता है की आपके webpage में बहुत ही कम space available है और आप किसी image को show करना चाहते है। जब आप उस space में image को show करते है तो कम space होने की वजह से image सिकुड़ जाती है और ठीक से display नहीं होती है।
या फिर कई बार ऐसा भी हो सकता है की आपके पास बहुत सा space available है लेकिन आपकी image की size बहुत कम है। आप चाहते है की image पुरे space को cover करे लेकिन जब आप ऐसा करते है तो image बहुत अधिक stretch हो जाती है और ठीक तरह से display नहीं होती है।
Situation कोई भी हो object-fit property के द्वारा आप image या video को इस प्रकार resize कर सकते है की वह available space में आपकी आवश्यकता के अनुसार ठीक से display हो सके। इसके लिए इस property की values के रूप में आपके पास बहुत से options available है।
Syntax of CSS object-fit Property
--------------------------------------------
निचे CSS object-fit property का general syntax दिया जा रहा है।
=========================================
object-fit : none | fill | contain | cover | scale-down;
=========================================
जैसा की आप ऊपर दिए गए syntax में देख सकते है object-fit property की 5 possible values हो सकती है। इनके बारे में निचे explain किया जा रहा है।
> none – इस value को define करने से object (image or video) को किसी भी प्रकार से resize नहीं किया जाता है।
> fill – इस value को define करने से object द्वारा container पूरी तरह fill कर दिया जाता है फिर चाहे इसके लिए image को stretch करना पड़े या सिकुड़ना पड़े। इस value द्वारा object का aspect ratio (real object clarity) नहीं preserve किया जाता है। यानि की image को stretch और shrink करते समय image की quality का ध्यान नहीं रखा जाता है।
> contain – इस value को define करने से container में fit होने के लिए object की size को increase या decrease किया जाता है लेकिन object के aspect ratio को preserve किया जाता है।
> cover – इस value को define करने से object द्वारा container को पूरी तरह fill कर दिया जाता है साथ ही object का aspect ratio भी preserve किया जाता है। लेकिन container को fill करने के लिए object को sides में से clip किया जाता है।
> scale-down – इस value को use करने से object के aspect ratio को preserve करते हुए object को shrink किया जाता है ताकि वह container में आसानी से fit हो सके।
Example of CSS object-fit Property
CSS object-fit property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS object-fit Property Demo</title>
<style>
#myImage
{
width:300px;
height:100px;
object-fit : scale-down;
}
</style>
</head>
<body>
<img src=”/images/bht-logo.jpg”>
</div>
</body>
</html>
transition Property
__________________
Introduction to CSS transition property
_____________________________________
Syntax of CSS transition property
________________________________
Example of CSS transition property
----------------------------------------------------
Introduction to CSS transition Property
================================
CSS3 में transition property introduce की गयी है जिसके द्वारा आप transition perform कर सकते है। यह property CSS में animation का ही एक part है।
Transition वह process होती है जिसमें कोई element अपनी एक state से दूसरी state में change होता है। उदाहरण के लिए कई बार जब आप किसी element पर hover करते है तो उसकी state change होती है और उसका color आदि दूसरी properties change होती है।
Normally यह transition इतना fast होता है की user को पता नहीं चलता है। लेकिन transition property द्वारा आप transition की speed, duration आदि control कर सकते है।
यह जरुरी नहीं की transition perform होने के लिए hover आदि pseudo classes को use करना आवश्यक है। Pseudo classes transition के लिए सिर्फ trigger के रूप में काम करती है। आप इनके बिना भी transition perform कर सकते है। ऐसे में transition page के load होने के बाद define किये गए delay time के बाद शुरू होगा।
CSS में transition एक shorthand property है इसके द्वारा निचे दी गयी properties को एक ही बार में define किया जाता है।
> transition-property – यह property उस property को define करने के लिए use की जाती है जिस पर transition apply होगा।
> transition-duration – इस property से define किया जाता है की transition कितनी देर में complete हो जाएगा।
> transition-timing-function – इस property द्वारा आप define करे है की transition किस प्रकार होगा।
> transition-delay – इस property द्वारा आप define करते है की transition कितने delay के बाद start होगा।
आप चाहे तो ऊपर दी गयी properties के द्वारा भी transition के लिए अलग अलग values define कर सकते है। लेकिन जब आप इन्हे use करें तो transition-duration property की appropriate value अवश्य define की जानी चाहिए नहीं तो transition effects display नहीं होगा।
Syntax of CSS transition Property
________________________________
निचे CSS transition property का general syntax दिया जा रहा है।
=============================================
transition : property duration timing-function delay;
==========================================
जैसा की आप ऊपर दिए गए syntax में देख सकते है transition property को 4 values के द्वारा define किया जाता है। इनके बारे में आगे detail से बताया जा रहा है।
property
-------------
यह value element की उस property को दर्शाती है जिसमें transition के दौरान changes होंगे। उदाहरण के लिए यदि transition के दौरान element की width 30 pixel से 70 pixel हो जाती है तो इस value के रूप में आप width property को define करेंगे।
Normally आप सभी property को इस value के रूप में define कर सकते है। लेकिन कुछ properties जैसे की display, position, font-family आदि को इस value के रूप में define नहीं किया जा सकता है।
इस value के रूप में आप all और none keywords को भी define कर सकते है। जब आप यह value all keyword के रूप में define करते है तो उस element की सभी properties पर transition apply हो जाता है। जब आप value none define करते है तो किसी भी property पर transition apply नहीं होता है।
इस value को आप transition-property property द्वारा separately भी define कर सकते है।
duration
-------------
Duration value द्वारा वह समय define किया जाता है जिसमें transition complete हो जाएगा। इसे seconds और milliseconds में define किया जाता है।
जब आप seconds में time को define करते है तो time के बाद s लगाते है और जब आप milliseconds में time को define करते है तो time के बाद ms लगाते है।
transition-timing-function
--------------------------------------
Transition timing function value transition की speed को define करती है। यह value एक function के रूप में define की जाती है जो यह define करता है की transition के दौरान किस प्रकार speed कम या अधिक होगी। इस value के रूप में आप निचे दिए जा रहे functions को define कर सकते है।
> ease – यह default value होती है। यह value बताती है की शुरआत में transition धीरे start होगा और उसके बाद उसी speed बढ़ेगी और अंत में वह फिर से धीरे हो जाएगा।
> linear – यह value बताती है की शुरू से अंत तक transition की एक ही speed होगी।
> ease-in – यह value बताती है की transition धीरे धीरे start होगा और उसकी speed बढ़ती जायेगी।
> ease-out – यह value बताती है की transition धीरे धीरे end होगा।
> ease-in-out – यह value बताती है की transition slow start होगा और slow end होगा।
> step-start – यह value बताती है की transition की शुरुआत में 1 interval होगा।
> step-end – यह value बताती है की transition के end में 1 interval होगा।
> steps(int,start|end) – इस function value से आप first argument में transition में होने वाले number of intervals को define करते है और second argument में start या end define किया जाता है जो यह बताता है की intervals start या end में होगा।
cubic-bezier(n,n,n,n) – इस function value द्वारा अपनी custom speed define कर सकते है।
delay
--------
यह value define करती है की trigger होने के कितने समय बाद transition शुरू होगा। इस value को आप transition duration की तरह seconds या milliseconds में define कर सकते है।
जैसा की मैने पहले बताया trigger कुछ भी हो सकता है जैसे की page load या फिर कोई pseudo class आदि।
एक से अधिक properties के लिए transition define करने के लिए आप इन values को comma से separate करके दुबारा लिखते है।
Example of CSS transition Property
----------------------------------------------------
CSS transition property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS transition Property Demo</title>
<style>
#myDiv
{
width:200px;
height:200px;
background-color:lime;
transition : width 1s ease 0s, height 1s ease 0s;
}
#myDiv:hover
{
width:400px;
height:400px;
}
</style>
</head>
<body>
<h1>CSS Transition Demo</h1>
<div id=”myDiv”></div>
</body>
</html>
ऊपर दिए गए उदाहरण में जब page शुरू में load होता है तो green div की width और height 100 pixels होती है।
transform Property
___________________
Introduction to CSS transform property
_____________________________________
Syntax of CSS transform property
________________________________
Example of CSS transform property
__________________________________
Introduction to CSS transform Property
-----------------------------------------------------------
Transformation एक process होती है जिसमें elements को visually modify किया जाता है। Webpage elements पर 2D और 3D transformation apply करके आप उन्हें real life effects दे सकते है। इससे webpage और भी real और live लगने लगता है।
कुछ समय पहले तक webpages में 2D और 3D transformation apply करना असंभव था। इसके लिए special softwares और plugins use किये जाते थे जैसे की flash आदि। लेकिन इसकी वजह से webpage की size बहुत अधिक बढ़ जाती थी जिससे page load होने में बहुत समय लगता था।
2D और 3D transformation की बढ़ती हुई popularity को देखते हुए CSS3 में एक बहुत ही उपयोगी property add की गयी है जिसके द्वारा आप web page elements पर 2D और 3D transformation आसानी से apply कर सकते है। यह property transform के नाम से जानी जाती है।
CSS transform property द्वारा आप webpage elements पर निचे दिए जा रहे transformations apply कर सकते है।
<) Translation – Elements को एक coordinate position से दूसरी coordinate position पर move करना।
>) Rotation – Element को आवश्यकता अनुसार अलग अलग angles पर rotate करना।
>) Scaling – Elements की size को बढ़ाना और घटाना।
>) Skewing – Elements को अलग अलग angles पर तिरछा करना।
इन transformations को apply करने के लिए transform property की value के रूप में अलग अलग transformation functions को use किया जाता है।
Syntax of CSS transform Property
---------------------------------------------------
CSS transform property का general syntax निचे दिया जा रहा है।
===================================
transform : none | transformation-function;
===================================
जैसा की आप ऊपर दिए गए syntax में देख सकते है transform property की value none या फिर किसी transform function के रूप में define की जाती है।
जब आप transform property की value none define करते है तो किसी भी प्रकार का transformation apply नहीं होता है।
Transformation function के रूप में आप निचे दी जा रही values को define कर सकते है।
>) matrix(n,n,n,n,n,n) – यह function 6 values के द्वारा 2D transformation create करने के लिए प्रयोग किया जाता है। इस function में सभी transformations और दोनों axis की value एक ही बार में pass की जाती है।
>) matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) – यह function 16 values के द्वारा 3D transformation create करने के लिए प्रयोग किया जाता है।
>) translate(x,y) – यह function 2D translation define करने के लिए प्रयोग किया जाता है। इसमें x और y axis के coordinates pass किये जाते है।
>) translate3d(x,y,z) – यह function 3D translation define करने के लिए प्रयोग किया जाता है। इसमें x, y और z axis के coordinates pass किये जाते है।
>) translateX(x) – यह function X-axis coordinates से translation define करने के लिए प्रयोग किया जाता है।
>) translateY(y) – यह function Y-axis coordinates से translation define करने के लिए प्रयोग किया जाता है।
>) translateZ(z) – यह function Z-axis coordinates से translation define करने के लिए प्रयोग किया जाता है।
>) scale(x,y) – यह function element को 2D scale करने के लिए प्रयोग किया जाता है। इसमें x और y axis coordinates pass किये जाते है।
>) scale3d(x,y,z) – यह function element को 3D scale करने के लिए प्रयोग किया जाता है। इसमें x, y और z axis coordinates pass किये जाते है।
>) scaleX(x) – यह function element को X-axis coordinates से scale करने के लिए प्रयोग किया जाता है।
>) scaleY(y) – यह function element को Y-axis coordinates से scale करने के लिए प्रयोग किया जाता है।
>) scaleZ (z) – यह function element को Z-axis coordinates से scale करने के लिए प्रयोग किया जाता है।
>) rotate(angle) – यह function पास किये गए angle के अनुसार element को 2D rotate करता है।
>) rotate3d(x,y,z,angle) – यह function pass किये गए x, y और z axis coordinates और angle के अनुसार element को rotate करता है।
>) rotateX(x) – यह function X axis coordinates के अनुसार element को rotate करता है।
>) rotateY(y) – यह function Y axis coordinates के अनुसार element को rotate करता है।
>) rotateZ(z) – यह function Z axis coordinates के अनुसार element को rotate करता है।
>) skew(x-angle,y-angle) – यह function pass किये जा रहे x और y axis coordinate angles के अनुसार element का skew transformation करता है।
>) skewX(angle) – यह function X axis के angle अनुसार elements का skew transformation करता है।
>) skewY(angle) – यह function Y axis के angle अनुसार elements का skew transformation करता है।
>) perspective(n) – यह function किसी 3D में transform किये गए element का perspective view define करता है।
