HTML Styles – with CSS

CSS (Cascading Style Sheets) का प्रयोग HTML elements में style के लिये किया जाता है।

Look! Styles and colors

Manipulate Text

Colors, Boxes

आदि

Styling HTML with CSS HTML elements की style को बेहतर तरीके से उपल्ब्ध कराने के लिये CSS को HTML 4 से साथ introduce किया गया था।
HTML में CSS को निम्न तरीकों से जोडा जा सकता:

Inline - HTML elements में style attribute का प्रयोग करके
Internal - <head> section मे <style> element का प्रयोग करके
External - बाहरी CSS file का प्रयोग करके

HTML में CSS को जोडने का सबसे बढिया तरीका External CSS syntax को CSS files मे डालकर प्रयोग करना है। फ़िर भी हम आपको सभी तरीको से HTML में CSS को प्रयोग करना बतायेंगे।

Inline Styles

inline style का प्रयोग करके हम किसी एक element के लिये unique style दे सकते है ।
inline styles को प्रयोग करने के लिये हमें style attribute को relevant tag के साथ प्रयोग करना होगा । style attribute को कोई भी CSS property दी जा सकती है।
जैसे किसी paragraph का left margin और text color कैसे बदला जाये :

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Background Color

body tag में background कलर सेट करने के लिये। इससे पेज का background कलर सेट या निर्धारित करते है। The background-color property से किसी element का background color सेट या निर्धारित किया जाता है :

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

उपरोक्त उदाहरण में

<body style="background-color:yellow;">	मे पेज का background-color:yellow सेट या निर्धारित किया गया है।
<h2 style="background-color:red;">This is a heading</h2>	heading2 के लिये background-color:red निर्धारित किया गया है।
<p style="background-color:green;"> ………..</p>	इस paragraph मे लिखे text का color:green निर्धारित किया गया है।

Font, Color and Size

font-family, color, and font-size properties का प्रयोग किसी element में text के font, color, और size को define करने के लिये किया जाता है :

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

Text Alignment

text-align property का प्रयोग किसी element में text का horizontal alignment सेट करने के लिये किया जाता है। center /right /left कुछ भी सेट कर सकते है : जैसे-

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

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

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

External Style Sheet

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

HTML Style Tags

Tag	Description
<style>	Defines style information for a document
<link>	Defines the relationship between a document and an external resource

अनुपयोगी Tags और Attributes

HTML 4 के बाद, कई tags और attributes का प्रयोग अब style documents में किया जाता है। ये tags HTML के नये versions को supporte नही करते है।
इन elements का प्रयोग ना करें : <font>, <center>, and <strike>,
और attributes का प्रयोग ना करें: color और bgcolor.

ESkool

Friday 28 March 2014