Scribd
Upload
3K views1 page

Introduction To CSS - Computer Hindi Notes

Uploaded by

Akshay Bohra
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3K views1 page

Introduction To CSS - Computer Hindi Notes

Uploaded by

Akshay Bohra
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

 

CSS

Introduction to CSS
 October 2, 2018  8,393 Views  9 Min Read

 CSS (Cascading Style Sheet)


CSS एक language ह जससे हम कसी HTML Document को एक आकषक प दे सकते ह। जहाँ
HTML से हम कसी वेबपेज को आकार दे ते ह, वह CSS से हम उस पेज को एक आकषक प दे ते ह। HTML
क तरह CSS को लखने के लए भी हम एक text editor (जैसे notepad, या notepad ++) क ज रत
होती ह और पेज म जो बदलाव होते ह वो बेब ाउजर पर दखते ह।

CSS के ारा हम HTML Elements को व भ न Properties दे सकते ह जनके बारे म हम आगे चचा करगे।

CSS लखने के तीन अलग-अलग तरीके ह, हम इनम से कोई भी एक तरीका उपयोग कर सकते ह –

1. Inline CSS.

2. Internal CSS.

3. External CSS.

1. Inline CSS
जब हम कसी HTML tag के अंदर ही CSS लखते ह तो उसे Inline CSS बोलते ह। इस तरीके म CSS क
Properties “style” attribute के अंदर लखी जाती ह। उदाहरण के लए
<div style = “color:red;height:50px;width:50px;background-color:blue;”>Test</div>

ऊपर दए e.g. म हमने div element क CSS उसके अंदर ही लखी ह। इस CSS से हम एक बा स मलेगा
जसक height और width दोन 50px होग , background color blue होगा और text का color red
होगा।

[Link] CSS
इस तरीके म CSS कसी HTML पेज म ही लखते ह जसका effect भी केवल उसी पेज पर पड़ता ह। इस तरीके
म CSS style tags के अंदर लखते ह तथा style tags head tags के अंदर रहते ह।

नोट :- यहाँ हमने #box का use कया ह। हमने div को एक id द ह “box”, और हम उस div को उसक id
के आधार पर ही Properties दे रहे ह। जब हम कसी element को उसक id के आधार पर Select करते ह
तो id के पहले # का use करते ह। इसे id selector बोलते ह (जैसे यहाँ #box)।

अगर हम दो या दो से यादा elements पर एक जैसी Properties apply करनी ह , तो हम Class


Selector का use करते ह।

For e.g.

<html>
<head>
<title></title>
<style>
.myboxes
{
color:red;
height:50px;
width:50px;
background–color:blue;
}
</style>
</head>
<body>
<div class = “myboxes”>Test 1</div>
<div class = “myboxes”>Test 2</div>
</body>
</html>

यहाँ हमने दोन ही div को एक जैसी class द ह और उनक class के आधार पर CSS लखी ह। यह CSS इन
दोन पर apply होगी। अगर हमारे पास दो से यादा div ह जन सभी क class “myboxes” ह तो यह CSS
उन सभी पर apply होगी। यहाँ हमने element क class के पहले .(डॉट) लगाया ह। .myboxes को हम
class selector कहगे।

हम कसी एक element को उसके नाम के आधार पर भी CSS दे सकते ह।

For e.g.
<html>
<head>
<style>
p{ color: red; }
</style>
<body>
<p> This is a test </p>
</body>
</html>

यहाँ हमने p element को उसके नाम के आधार पर select करके CSS द ह। इसे element selector कहते
ह।

External CSS
इस तरीके म हम एक अलग CSS file बनाते ह। और उसे html file म link करते ह। उदाहरण के लए
अगर हमारे पास [Link] नाम क फाईल ह और उसक CSS क एक अलग [Link] नाम क फाइल ह।

[Link]
<html>
<head>
<title></title>
<link rel =“stylesheet” href =“[Link]” type = “text/css”>
</head>
<body>
<p>This is a test<p>
</body>
</html>

[Link]

p{ color: red; }

हमने हमारी stylesheet को html पेज म link tag के ारा include कया ह।

CSS क कुछ बे सक ापट ज


1. height :- कसी element को एक न त हाईट दे ने के लए यह ापट use करते ह।

2. width :- कसी element को एक न त width (चौड़ाई) दे ने के लए इस ापट को use करते ह।

3. color :- कसी element के text को color दे ने के लए यह ापट use करते ह।

4. background-color :- कसी element के background का color change करने के लए यह


ापट use करते ह।

5. border :- कसी element क बाडर बनाने के लए इसे use करते ह।

6. इसम हम तीन चीजे define करते ह। बाडर क मोटाई, उसक टाइल और उसका रंग।

For e.g. हमारे पास एक div ह जनक id “mybox” ह। इसम हम समझते ह क कतने तरीके से हम बाडर दे
सकते ह।

<div id = “mybox”>This is a test</div>

इस div पर हम internal CSS apply कर रहे ह।

<style>
#mybox
{
border: 1px solid black;
}
</style>

इस caseम 1px border क मोटाई होगी, solid उसक टाइल होगा और रंग black होगा। हम बाडर क
मोटाई को pixels (px) के ारा बढ़ा या घटा सकते ह। जैसे 1px, 5px, 2px, 10px, etc. और बाडर क
टाईल व रंग भी व भ न दे सकते ह। जैसे –

2px solid blue;


5px dotted red;
4px dotted green;
10px double gray;

“border” property से हम एक बार म बाडर क मोटाई, टाईल व रंग दे सकते ह। पर तु य द हम चाह तो


बाडर क अलग-अलग ापट भी दे सकते ह –

border–width:– बाडर क मोटाई दे ने के लए।

border–style:– बाडर क टाइल दे ने के लए।

border–color:– बाडर का रंग दे ने के लए।

For e.g.

#mybox
{
border -width : 2px;
border–style : solid;
border–color : red;
}

हम कसी element को चार तरफ अलग-अलग border भी दे सकते ह। उदाहरण के लए य द हम हमारी div
को सफ top border दे नो हो तो हम लखगे।

#mybox
{
border–top : 2px solid black;
}

हम चारो तरफ अलग-अलग बाडर भी दे सकते ह।

For e.g.

#mybox
{
border-top: 1px solid red;
border-left: 2px dotted green;
border-bottom: 2px double blue;
border-right: 4px solid black;
}

6. margin:- इस property का उपयोग elements के चार तरफ space create करने के लए होता ह।

कसी भी element क margin adjust करने के लए व भ न ाप ज होती ह।

margin–top

margin–right

margin–bottom

margin–left

margin ाप ज क न न वै यूज हो सकती ह –

auto:- य द हम कसी element क margin auto दे ते ह तो वह margin ाऊजर कै कुलेट करता ह।

length:- कसी element क margin, px, pt, या cm के form म भी दे सकते ह।

%:- कसी element क margin % form म भी दे सकते जो क उस element के parent


element क height/width के हसाब से कै कुलेट होती ह।

Inherit:- इसके ारा कोई element अपने parent element क margin वंय पर apply कर सकता
ह।

न न ल खत उदाहरण म हम एक <div> element के चार तरफ क margin अलग-अलग सेट कर रहे ह –

div{
margin–top: 100px;
margin–bottom: 100px;
margin–right: 150px;
margin–left: 80px;
}

margin–short hand property :

हम कसी element क चार तरफ क margin एक ही ॉपट से भी दे सकते ह। top, bottom, left,
right के लए अलग-अलग margin ॉपट दे ने क बजाए हम एक सगल margin property म चार तरफ
क margin का उ लेख कर सकते ह। दे खते ह कैसे –

अगर margin ॉपट म चार वै यूज ह –

margin: 20px 34px 50px 70px;

तो,

top margin 20px होगी।


right margin 34px होगी।
bottom margin 50px होगी।
left margin 70px होगी।

div{
margin: 20px 34px 50px 70px;
}

* अगर margin ापट म तीन वै यूज ह –

जैस, margin: 10px 15px 25px;

तो, top margin 10px होगी, right margin और left margin, दोन 15px होगी, bottom margin
25px होगी।

* अगर margin ापट म दो वै यूज ह –

जैसे margin: 10px 20px;

तो,

top और bottom margin 10px होग और left और right margin 20px होगी।

* अगर margin ापट म केवल एक वै यू हो,

जैसे margin: 45px;

तो, चार तरफ क margin 45px होगी।

* margin auto value:- कसी element को उसके container के अंदर horizontally center म
करने के लए इस property को use कया जाता ह। ऐसा करने से element को जो width और height
specify क गई है वह वो occupy करेगा और बचा आ space left और right margins म equally
distribute हो जाएगा।

Padding:-

Padding को हम कसी element के border के अंदर के space के प म define कर सकते ह। यान


रखने वाली बात ह क हर एक html element क border होती ह जसे हम उसक border property के
ारा show कर सकते ह। कसी element क padding set करने के लए CSS क चार ापट ज होती ह
जनसे आप हर एक side क padding वतं प से दे सकते ह। ये चार ापट ज ह –

padding–top, padding–right, padding–bottom, padding–left.

य द हम चार तरफ एक जैसी padding दे ना चाहते तो वो हम एक सगल property ‘padding’ से दे सकते


ह।

Padding क वै यू pixels म define क जाती ह और हम padding क negative वै यू नह दे सकते।

* padding–left property :- यह ापट कसी element क left side क padding define करती
ह।

For e.g.

p{
padding–left : 25px;
}

इस e.g. म p element के left side 25px का extra space create हो जाएगा।

* padding–right property :- यह property कसी element क right side क padding


define करती ह।

For e.g.
p{
padding-right: 20px;
}

इस e.g. म p element के right side 20px का extra space create हो जाएगा।

नोट :- कसी भी padding property म जो space create होता ह वह उस element के border के


अंदर ही होता ह।

* padding-top :- यह property कसी element के border के अंदर ही ऊपर क तरफ space


create करती ह।

For e.g.

p{
Padding-top: 50px;
}

इस e.g. म p element के border के अंदर ऊपर क तरफ 50px का extra space create हो जाएगा।

* padding-bottom :- यह property कसी element के border के अंदर ही नीचे क तरफ space


create करती ह।

For e.g.

p{
padding-bottom: 40px;
}

इस e.g. म p element के border के अंदर नीचे क तरफ 40px का extra space create हो जाएगा।

*‘padding’-shorthand property :- हम कसी element के चार तरफ क padding एक सगल


property ‘padding’ से भी adjust कर सकते ह।

अगर padding क चार values ह

div{
padding: 20px 25px 30px 35px;
}

तो –

top-padding 20px ह।
right-padding 25px ह।
bottom-padding 30px ह।
left-padding 35px;

* य द padding क तीन value ह –

div {
padding: 20px 30px 40px;
}

तो –

top padding 20px होगी।


right और left paddings 30px होगी।
bottom padding 40px होगी।

* य द padding क दो values ह –

div {
padding: 10px 20px;
}

तो,

top और bottom paddings 10px होगी


right और left paddings 20px होगी।

* य द padding क एक value हो –

div{
padding:40px;
}

तो चार तरफ क padding 40px होगी।

*Height और Width:- कसी element क height और width set करने के लए ‘height’ और


‘width’ properties का use करते ह।

height और width क value हम px, cm, या % म दे सकते ह।

For e.g.

div{
height: 200px;
width: 50%;
}

ऊपर दए गए उदाहरण म width:50% का मतलब ह div के parent element क width का 50% होगी|

Tags css css definition css examples css kya hai css kya hota hai

css kya hoti hai css syntax css tutorial introduction of css introduction to css

what is css

Related Notes

Pseudo Classes in CSS

Tables in CSS

Float Property in CSS

Positioning in CSS

Text in CSS

Z Index in CSS

Overflow property in CSS

Box Model in CSS

Layout in CSS

Alignment in CSS

Recent Notes in Hindi

[Link] म ListBox Control

कं यूटर े के कुछ स

[Link] म Radio button control

जावा म Data Type और इनके कार

[Link] म checkbox control

मेटाडाटा (Metadata) और उनके कार

Subject Wise Notes

Computer Fundamentals

हर यू नव सट के सलेबस के अनुसार कं यूटर


फंडामटल के नोट् स

MS Office 2013

Operating System

Desktop Publishing

Internet & Web page Designing

IT Trends and Technology

Programming

Multimedia

सलेबस के अनुसार कं ूटर नोट् स Recent Computer Notes in Hindi Connect with Us

DCA के नोट् स और सपल पेपर [Link] म ListBox Control Facebook

PGDCA के नोट् स कं यूटर े के कुछ स Youtube

DOEACC CCC [Link] म Radio button control Instagram

ओ लेवल के नोट् स जावा म Data Type और इनके कार Twitter

इनफामशन अ स टट के लए नोट् स [Link] म checkbox control Telegram

RSCIT के नोट् स मेटाडाटा (Metadata) और उनके कार

ADCA के नोट् स हद म जावा वे रएबल, कार और उदाहरण

डाटा एं ऑपरेटर के नोट् स Button Control in ASP. Net Properties

Copyright © 2018-21.

You might also like