वेबसाईट स्टाईलशीट

आपण वेबपेजमधील टॅगना गुणविशेष (attributes) कसे द्यायचे ते पाहिले. html 4 या html च्या सुधारित आवृत्तीप्रमाणे हेच गुणविशेष आता स्टाईल (style) या एकाच पद्धतीने दिले जातात. उदाहरणार्थ

body style="background-color:yellow"

h2 style="text-align:center"

p style="font-family:courier new; color:blue; font-size:20px"

भविष्यकाळात attributes चा वापर न करता स्टाईल पद्धतच वापरावी लागणार आहे. html प्रोग्रॅममध्ये टॅगबरोबर attributes दिले तर प्रोग्रॅम वाचण्यात अडचण येते. तसेच त्याचप्रकारचे अनेक टॅग असले तर प्रत्येक ठिकाणी असे
attributes द्यावे लागतात. यावर उपाय म्हणून स्टाईल हेड(head) टॅगमध्येच लिहून ठेवायची व body टॅगमध्ये attributes न देता केवळ साधॆ टॅग वापरायचे अशी सुधारणा करण्यात आली. त्याचे उदाहरण खाली दिले आहे.
या प्रोग्रॅमचे वेबपेज खाली दाखविले आहे.
वरिल उदाहरणात body style चा रंग वेबपेजला आला आहे. h2 आणि p या टॅगच्या स्टाईल हेडमध्ये दिल्यामुळे प्रोग्रॅममध्ये त्याची पुनरावृत्ती टळली असून सर्व ठिकाणी त्याचा योग्य वापर झाला आहे. स्टाईल टॅगमुळे प्रोग्रॅम व प्रेझेंटेशन एकमेकापासून वेगळे झाल्याने प्रोग्रॅम अधिक सुलभतेने वाचणे शक्य झाले आहे.

याच्या पुढची पायरी म्हणजे हेड टॅगमधील स्टाईलचा कोड वेगळ्या फाईलमध्ये (style.css) सेव्ह करायचा व हेड टॅगमध्ये खालीलप्रमाणे त्याची लिंक द्यायची.

link rel="stylesheet" type="text/css" href="style.css"

आता style.htm व style.css दोन वेगळ्या फाईल झाल्यामुळे प्रोग्रॅमपासून स्टाईलशीट पूर्णपणे वेगळा झाला. ज्यावेळी style.htm हे वेबपेज ब्राउजरमध्ये उघडले जाते त्यावेळी style.css हा स्टाईलशीट प्रोग्रॅमला जोडला जातो व त्या स्टाईलचा उपयोग करून वर दाखविल्याप्रमाणेच वेबपेज दिसते.