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

  Explain Text Properties in CSS

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

 1- Font-Family :-

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