INTRODUCTION TO CSS In HTML :- By G. yadav
Download Here ---> :- Complete CSS
INTRODUCTION TO CSS In HTML
CSS क्या है ?
CSS का पूरा नाम Cascading Style Sheet होता है इसका प्रयोग Html Document के Layout या Formatting को Handle करने के लिया Use किया जाता है
CSS वेब डॉकयुमेंट को स्टाइल
करने की भाषा है जिसे W3C – World Wide Web
Consortium द्वारा विकसित किया गया है .इसका पहला
संस्कारण 1996
मे
प्रकाशित किया गया था . CSS 3 इसका नवीनतम संस्कारण है . इसका
उपयोग एक वेबपेज को सजाने के लिए होता है . और HTMLके साथ साथ ही
इस्तेमाल होती है |
CSS का जनक श्री Hakon Wium Lie है . इनहोने ही
सबसे पहले 1994 मे CSS Rules को बनाया था और इसके बाद W3C – World Wide Web Consortium द्वारा CSS Level 1 को दिसेम्बर 1996 मे प्रकाशित किया गया था .यह CSS का पहला Version कहलाया |
CSS Version 1 से अब तक CSS के तीन और Versionsको प्रकाशित कराया जा चुका
है . जो क्रमशः CSS Level 2, CSS Level 2.1 और CSS Level 3 है . CSS3 इसका नवीनतम (Latest Version) संस्कारण है
ADVANTAGES OF CSS :-
1- SAVE TIME
2- INCREASE PAGE SPEED
3- EASY TO MANTENANCE
4- PLATFORM
INDEPENDENT
1- Color – इस CSS Command के द्वारा हम किसी भी Text को Color कर सकते है
Syntax :- Color:Green ;
2- Text-Align –इस CSS Command के द्वारा हम किसी भी Text को Webpage पर Adjust कर सकते है इसमे निम्न Properties Available होती है
Left/Right/Centre /Justify
Syntax :- Text-Align:Justify;
3- Text-Decoration –इस CSS Command के द्वारा हम किसी भी Text के Layout को Change कर सकते है इसमे निम्न Properties Available होती है
Underline/Overline /Line Through
Syntax :- Text-Decoration:Overline;
4- Text-Transform –इस CSS Command के द्वारा हम किसी भी Text के Sentence Case को Set कर सकते है इसमे निम्न Properties Available होती है
Capitalize/Uppercase /Lowercase
Syntax :- Text-Transform:Uppercase;
5- Text-Indent –इस CSS Command के द्वारा हम Text के Sentence मे First Line के Para को Adjust कर सकते है
Syntax :- Text-Indent:3em;
6- Text-Shadow-इस CSS Command के द्वारा हम किसी भी Text मे Shadow Define कर सकते है
Syntax
:- Syntax:- Text-Shadow:5px 4px yellow;
7- Word-Spacing –इस CSS Command के द्वारा हम किसी भी Text के Word मे Space देने के लिए उपयोग करते है
Syntax :- Word-spacing :1em;
8- Letter-Spacing –इस CSS Command के द्वारा हम किसी भी Text मे letter मे Space देने के लिए उपयोग करते है
Syntax
:- Letter-spacing :0.5em;
9- Line-height –इस CSS Command के द्वारा हम किसी दो Para के बीच मे Space देने के लिए उपयोग करते है
Syntax :- Line-height :2px;
Explain Font Properties in CSS
1- Font-Family
2- Font-Style
3- Font-Variant
4- Font –Weight
5- Font-Size
6-
Font-size-adjust
Css
के
द्वारा हम Font के Size , Style ,Weight आदि को Change कर सकते है
Syntax
:- Font-Family:Arial ;
2- Font –Style
:-
Css
के
द्वारा हम Font के Style को Change कर सकते है
Normal/Italic/Oblique
Syntax
:- Font-Style:Oblique;
3-
Font–Variant :-
Css
के
द्वारा हम Font के Variant
को
Define कर सकते है
Normal/Small-caps
Syntax
:- Font-Variant:Small-caps;
4- Font-
Weight–
Css के द्वारा हम Font के Weight को Define
कर
सकते है
Normal
/ Bold
Syntax
:- Font-Weigth:Bold;
5- Font-Size
:-
Css
के
द्वारा हम Font ke Size को Define
कर
सकते है
Syntax
:- Font-Size:10px;
6-
Font-Size-Adjust :-
Css
के
द्वारा हम Font की Size को Adjust
कर
सकते है
Syntax
:- Font-Size-Adjust :0.56;
How
to set background color by CSS
Syntax
:- body{ background-color: pink;
Syntax :-body {background-color:#0154d2;}
How to set any image in
background by CSS
Attribute :-
1-
Background-image
2-
Background-size
3-
Background-Repeat
4-
Background-Position
5- Background-Attachment
1- Background-Image:- इस Command के द्वारा हम image को background
के
रूप मे Set कर सकते है Image को URL के अनर्गत Define किया जा सकता है
Syntax :-
Background-image:url(“Path”);
2- Background-Size:- इस Command के द्वारा हम image की Size
Define कर
सकते है
Syntax :-
Background-Size:15px;
3- Background-Repeat:- इस Command के द्वारा image की Size को यदि छोटी है तो उसे पूरे Page मे Fill करना हो तो इस Option का प्रयोग कर सकते है
Syntax :-
Background-Repeat:No-Repeat/Repeat;
4- Background-Position:- इस Command के द्वारा image के Position
को
Set किया जा सकता है Left/Right/Centre
Syntax :-
Background-Position:Left;
5- Background-Attachment:- इस Command के द्वारा image को Fixed
या
Scroll किया जा सकता है Fixed/Scroll
Syntax :-
Background-Attachment:Fixed;
How to using image border properties in CSS Attribute
:-
1-
Image-border
2-
Image-height
3-
Image-width
4- Image-opacity
1- Image-border:- इस Command के द्वारा हम image मे Border
Define कर
सकते है तथा उसमे चौड़ाई उसका Type
(Dottes/Dashed/) व उसका Color Define कर सकते है
Syntax :- Border:
width(10px) type (dotted.dashed,Solid,Double) red ;
2- Image-height :- इस Command के द्वारा हम image की Height
के
Size को adjust कर सकते है
Syntax :-Image-height:15px;
3- Image-width:- इस Command के द्वारा हम image के Width
की
Size को Adjust कर सकते है
Syntax :-Image-width:500px;
4- Image-opacity:- इस Command के द्वारा हम images के Sharpness
और
Clarity Define कर सकते है जैसे जैसे
हम Value को बढ़ाते जाते है Image उतनी ही Clear
Visible होती
जाती है 0.1 value मे सबसे धुंधली और 1 Value से Images
सबसे
Clear show होता है
Syntax :-Image-opacity:0.8;
All Coding :-Complete CSS