Showing posts with label सी एस एस सीखें. Show all posts
Showing posts with label सी एस एस सीखें. Show all posts

Friday, 28 March 2014

CSS How To... - सी एस एस सीखें

Posted by Unknown at 09:46


जब एक browser किसी style sheet को reads करता है,तो यह पेज को style sheet के अनुसार format कर देता है ।

CSS को Insert करने के 3 तरीके है:

किसी style sheet को Insert करने के निम्न 3 तरीके है:
  • External style sheet
  • Internal style sheet
  • inline style

External Style Sheet

जब एक ही style कई पेजों पर लगानी हो तो external style sheet सबसे उपयुक्त विकल्प है। external style sheet के द्वारा, आप पूरी Web site का look सिर्फ़ एक file में बदलाव करके कर सकते हैं। बस हर पेज <link> tag  द्वारा style sheet को प्रयोग करते हुए लिंक होना चाहिए। <link> tag  को <head> section के अंदर डाला जाता है :

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

एक external style sheet किसी भी text editor (जैसे- नोटपेड) में लिखी जा सकती है। फ़ाइल मे किसी html tag का प्रयोग नही होता है। आपकी style sheet हमेशा .css extension मे ही सेव होनी चाहिए।  style sheet फ़ाइल का एक उदाहरण निम्न है:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

property value और unit के बीच रिक्त स्थान (space) ना रखें (जैसे कि- margin-left:20 px इसमें सही तरीका है- margin-left:20px)

Internal Style Sheet

internal style sheet का प्रयोग एक पूरे पेज में unique style देने के लिये किया जाता है। Internal styles को HTML page के <head> section में <style> tag का प्रयोग करकें लिखा जाता है, इस तरह:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles

inline style के द्वारा हम style sheets के कई फ़ायदें खो सकते है क्योकि यह का content को presentation के साथ मिक्स कर देती है ।
                    inline styles को प्रयोग करने के लिये हमें  style attribute को relevant tag के साथ प्रयोग करना होगा । style attribute को कोई भी CSS property दी जा सकती है।
जैसे किसी paragraph का left margin और text color कैसे बदला जाये :
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets

यदि कुछ properties एक ही selector के लिये अलग-अलग style sheets मे अलग-अलग सेट की जाती है, तो अधिक निर्दिष्ट style sheet से values प्राप्त की जाती है ।
उदाहरण के लिए, external style sheet मे h3 selector के लिए यह properties है:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
और internal style sheet मे h3 selector के लिए यह properties है:
h3
{
text-align:right;
font-size:20pt;
}
यदि internal style sheet के साथ पेज external style sheet के साथ भी लिंक है तो h3 के लिए prperties होंगी :
color:red;
text-align:right;
font-size:20pt;
यहाँ color external style sheet से लिया जायेगा और text-alignment और font-size internal style sheet के निर्देशानुसार बदली जायेगी।

Labels: , , 1 comments

CSS Id and Class - सी एस एस सीखें

Posted by Unknown at 09:43


id और class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

The id Selector

id selector का प्रयोग एक single, unique element के लिए style को specify करने के लिए किया जाता है।
                           id selector के लिए style को specify करने के लिए HTML element के id attribute का प्रयोग किया जाता है। इसके लिए  "#" का प्रयोग किया जाता है।
style rule को नीचे id="para1" के नाम से element पर लागु किया जा रहा है :

Example

#para1
{
text-align:center;
color:red;
}

किसी ID name की शुरुआत किसी number से ना करें क्योंकि यह Mozilla/Firefox मे काम नही करेगा !
The class Selector
class selector का प्रयोग elements के group के लिए style को specify करने के लिए किया जाता है। id selector के उलट, class selector को अधिकतर कई elements पर प्रयोग किया जाता है।
                  यह आपको कई HTML elements पर same class का प्रयोग करके particular style सेट करने की सुविधा देता है।
                class selector के लिए HTML class attribute का प्रयोग किया जाता है। इसके लिए "." का प्रयोग किया जाता है।
  नीचे उदाहरण में, class="center" के द्वारा सभी HTML elements को center-aligned किया जा रहा है :

Example

.center {text-align:center;}

आप यह भी निर्धारित कर सकते है कि किसी class के द्वारा सिर्फ़ निर्दिष्ठ HTML elements ही प्रभावित हों ।
  नीचे उदाहरण में, class="center" के द्वारा सभी p elements को center-aligned किया जा रहा है :

Example

p.center {text-align:center;}

किसी class name की शुरुआत किसी number से ना करें क्योंकि यह Internet Explorer मे काम नही करेगा !

Labels: , , , 0 comments

CSS Syntax

Posted by Unknown at 09:40

CSS के नियम


CSS कोड को हमेशा html के <head> मे <style> मे डाला जाता है तथा कोड डालने के बाद </style> और </head> से बंद किया जाता है। इसमें हम id Selectors (#) और class Selectors (.) का प्रयोग करके CSS कोड डालते है।
 अब CSS कोड डालने के बाद उसे पेज पर प्रयोग करने के लिए <body> मे
<div class=" Selectors name"> तथा प्रयोग करके </div> से बंद किया जाता है।

CSS Syntax (CSS के नियम)

CSS के नियम के दो भाग होते है – एक selector और एक या अधिक declarations:


selector सामान्यत: HTML element होता है जिसकी आप style बदलना चाहते हैं ।
हर declaration में एक property और एक value होती है
property वह style attribute होता है जिसमें आप selector को बदलना चाहते हैं। हर property की एक value होती है।

CSS Example

हर CSS declaration का अंत हमेशा एक semicolon (;) के साथ होता है और declaration groups दोनो और से curly brackets ({……}) से बंधे होते है ।
p {color:red;text-align:center;}
CSS को ज्यादा पढने लायक बनाने के लिए आप एक लाइन मे एक declaration ही डालें। जैसे:

Example

p
{
color:red;
text-align:center;
}


CSS Comments

Comments का प्रयोग आपके code के बारे मे विस्तारपूर्वक जानकारी देने के लिए होता है, जो काफ़ी दिनो बाद आपको source code मे बदलाव करने के समय मदद करेंगे । Comments browsers मे प्रदर्शित नही होते है।
A CSS comment हमेशा "/*" से शुरु होकर "*/" पर खत्म होते है , जैसे :

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}



Labels: , , , 1 comments

CSS Introduction

Posted by Unknown at 09:34

Introduction परिचय


Cascading Style Sheets (CSS) को कभी गंभीरता से नही लिया गया है। शायद ऐसा इसलिए हैं क्योंकि वेब डिजाइनर यह सोचते हैं कि यह जो है उसकी तुलना में कठिन है पर सच तो यह है, CSS अविश्वसनीय रूप से आसान है !
                 CSS के साथ, आप एक external Style Sheet में अपनी सभी common styles को define कर सकते हैं। इस तरह,  आप अपनी पूरी साइट में एक style की हर occurence को बदलना चाहते हैं, तो  आपको केवल एक ही स्थान पर update करने की जरूरत है.
यह ट्यूटोरियल आपको  सिखायेगा कि कैसे अपनी वेबसाइट में का इस्तेमाल किया जायें। यह ट्यूटोरियल यह भी सिखायेगा कि कैसे एक external style sheet बनाई जायें और इसे अपने HTMLपेजसे कैसे लिंक कियाजाये।
                 CSS शब्द " Cascading Style Sheets " के लिए एक संक्षिप्त नाम है| CSS के द्वारा ,एक वेब पेज उसकी content और behaiviour से किस तरह दिखाई देगा, इसको पुर्व प्रचलित शैली से अलग तरीके से करने के लिए सबसे पहले 1997 में विकसित किया गया था . CSS, मार्कअप में रखा गया content और जिसे स्टाइल शीट में संग्रहीत किया जाता है, कैसे प्रदर्शित होगी इसे परिभाषित करता है। External Style Sheet अपने वेब पेजों पर CSS styles को डालने के लिए सबसे अच्छा तरीका है।

What is CSS?

  • CSS का पूरा नाम है- Style Sheets
  • Styles से यह निर्धारित होता है कि HTML elements  ब्राउजर मे कैसे प्रदर्शित होंगे
  • Styles को समस्या  के समाधान के रुप HTML 4.0  मे जोडा जा सकता है।
  • External Style Sheets  में बहुत सा कार्य सेव किया जा सकता है।
  • External Style Sheets को CSS files के रुप मे सेव करके भी काम में लिया जा सकत है।
Cascade क्या है:

CSS में cascade, एक झरने की तरह है। जैसे ही user agent शैली नियमों  का आमना-सामना कराता है यह उन्हें एक के बाद एक लागू कर देता है। शैलियों का क्रम इस प्रकार है:

    browser defaults
    external style sheets
    internal style sheets
    inline styles
    more specific style selector  को प्रधानता (precedence) दी जायेगी।
         h2 - universal selector की तुलना में अधिक विशिष्ट है
         h2.class - h2 से अधिक विशिष्ट है
         h2.id -  h2.class तुलना में अधिक विशिष्ट है
 

Styles Solved a Big Problem (Styles ने एक बडी समस्या हल की)

HTML को ऐसा कभी नही बनाया गया था कि उसमें पूरे वेब-पेज की निर्माण (formatting) हो सकें, बल्कि HTML को तो वेब-पेज की विषयवस्तु (content) के निर्माण के लिए बनाया गया था,जैसे :
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
जब <font> जैसे tags और color attributes को HTML 3.2 की विशेषताओं में जोडा गया था, it started a nightmare for तो यह web developers के लिए एक दु:स्वप्न की तरह था । बडी वेब-साइटों के Development के समय, जहाँ fonts और color की जानकारी हर एक पेज मे जोडनी पडती थी, जो एक बहुत लंबा और थका देने वाला काम था ।
इस समस्या के समाधान मे,World Wide Web Consortium (W3C) ने CSS की रचना की।
In HTML 4.0 में सारी formatting HTML पेज से हटाई जा सकती थी और अलग से CSS file में सेव की जा सकती थी।
आजकल सभी browsers CSS को support करते है।

CSS Saves a Lot of Work! (CSS बहुत समय और मेहनत बचाता है !)

CSS यह निर्धारित करता है कि HTML elements किस प्रकार प्रदर्शित होंगे।
Styles को सामान्यत: बाहरी (external) .css फ़ाइल के रुप में सेव किया जाता है । यानि हम एक नोटपेड मे सभी कोड लिख कर उस फ़ाइल को .css (जैसे- फ़ाइलकानाम.css) लगाकर सेव कर देंगे तो वो CSS फ़ाइल हो जायेगी। External style sheets आपको सिर्फ़ एक file मे बदलाव करके किसी Web site के सभी पेजों के appearance और layout को  उस फ़ाइल के अनुरुप बदलने की सुविधा देती


Labels: , , , 0 comments

CSS Tutorial हिन्दी में

Posted by Unknown at 09:31

सी एस एस सीखें - हिन्दी में
CSS के द्वारा आप विभिन्न  Web pages की style और layout को एक साथ कंट्रोल कर सकते है। जिससे आप अपना बहुत सा समय बचा सकते है।

CSS Example

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

What You Should Already Know

CSS सीखने से पहले आपको HTML / XHTML का ज्ञान होना आवश्यक है।
  • HTML / XHTML

Labels: , , , , 0 comments
Subscribe to: Posts (Atom)