سی ایس ایس کی مدد سے ایچ ٹی ایم ایل کو خوبصورت بنائیں

صرف اور صرف HTML استعمال کرتے ہوئے بھی ایک بنیادی قسم کی ویب سائیٹ تیار کی جا سکتی ہے۔ ایسی ویب سائیٹ کے ویب پیجز میں تمام ضروری اجزاء شامل کیے جا سکتے ہیں۔ مثلاً‌ عنوانات، پیراگرافس، تصاویر، ٹیبلز، فہرستیں، اور دیگر ویب پیجز کے لنکس وغیرہ۔ لیکن ویب براؤزر میں یہ تمام اجزاء ڈیفالٹ سیٹنگ کے تحت بہت سادہ نظر آتے ہیں۔ چنانچہ HTML کی مدد سے بنائے گئے ان ویب پیجز کو خوبصورت اور منظم بنانے کے لیے CSS استعمال کی جاتی ہے۔ مثلاً‌ عنوان کا سائز اور رنگ کیا ہونا چاہیے، پیراگراف کا فونٹ کیا ہونا چاہیے اور اس کے گرد فاصلہ کتنا ہونا چاہیے، کسی تصویر کے گرد کتنی موٹائی کا اور کس رنگ کا بارڈر لگنا چاہیے، ٹیبل کے جو خانے ہیں ان کی ویلیوز کے گرد کتنا فاصلہ ہونا چاہیے، دیگر ویب پیجز کے لنکس کونسے رنگ میں ہونے چاہئیں اور ان کے نیچے لائن موجود ہونی چاہیے یا نہیں، اور یہ کہ ویب پیج کے کونسے حصوں کو بائیں کالم میں، کونسے حصوں کو درمیانی کالم میں، اور کونسے حصوں کو بائیں کالم میں موجود ہونا چاہیے وغیرہ۔ یعنی HTML ایلی منٹس پر ہر طرح کی یہ فارمیٹنگ CSS کی مدد سے کی جاتی ہے۔

HTML کوڈ میں نئے ٹیگز کا اضافہ کریں

پچھلے ٹٹوریل میں جو HTML کوڈ ہم نے استعمال کیا تھا، درج ذیل تصویر میں آپ دیکھ رہے ہیں کہ اس کوڈ میں نئے ٹیگز کا اضافہ کیا جا رہا ہے:

1. اس ویب پیج کے ساتھ link ٹیگ کی مدد سے style.css فائل منسلک کی جا رہی ہے۔ یہ اسٹائل شیٹ فائل ہے جس میں وہ اسٹائل رولز لکھے جائیں گےجو ویب پیج کے ایلی منٹس کو مختلف انداز میں دکھائیں گے۔
2. مینیو کو ایک div ٹیگ کے اندر رکھا جا رہا ہے- اس ٹیگ کا id ہم نے sidebar رکھا ہے۔ ٹیگ کو اسٹائل رولز کی مدد سے بائیں کالم کے طور پر دکھایا جائے گا۔
3. ویب پیج کا اصل متن (مضمون یا پوسٹ وغیرہ) ایک الگ div میں رکھا گیا ہے۔ اس ٹیگ کا id ہم نے content رکھا ہے۔ یہ ٹیگ ویب پیج پر دائیں کالم کے طور پر استعمال کیا جائے گا۔

ایک نئی اسٹائل شیٹ (CSS) فائل بنائیں

نوٹ پیڈ کی مدد سے ویب سائیٹ کے فولڈر میںstyle.css کے نام سے ایک نئی فائل بنائیں۔

HTML ڈاکومنٹ پر لگائے گئے CSS اسٹائل رولز کی وضاحت

درج ذیل اسکرین شاٹس میں آپ اسٹائل رولز بھی دیکھ رہے ہیں، اور براؤزر میں وہ ویب پیج بھی دیکھ رہے ہیں جس پر یہ اسٹائلز لگائے گئے ہیں۔ آئیں ترتیب وار ان تمام اسٹائل رولز کی وضاحت دیکھتے ہیں:

1. body ٹیگ پر لگائے گئے اسٹائل رولز پورے ویب پیج پر مؤثر ہوتے ہیں۔ اس لیے کہ ویب پیج کے مواد کے متعلق تمام ٹیگز body ٹیگ کے اندر رکھے جاتے ہیں۔ body ٹیگ پر لگائے گئے اسٹائل رولز کی پہلی لائن پر یہ بتایا جا رہا ہے کہ ویب پیج کے لیے Arial فونٹ استعمال کیا جائے، جبکہ دوسری لائن پر فونٹ کا سائز 11 پکسلز متعین کیا گیا ہے۔
2. h1 ٹیگ پر لگائے گئے اسٹائل رولز کے نتیجے میں آپ دیکھ رہے ہیں کہ عنوان کا فونٹ Times New Roman ہے اور اس کا رنگ سبز ہے۔
3. img ٹیگ پر اسٹائل رولز لگائے گئے ہیں۔ پہلی لائن پر تصویر کے کنارے گول کیے گئے ہیں، جبکہ دوسری لائن پر 8 پکسلز موٹائی والا بارڈر لگایا گیا ہے جس کا رنگ Pink رکھا گیا ہے۔ اگر آپ تصویر کے گرد دانے دار بارڈر لگانا چاہیں تو solid کی جگہ پر dotted استعمال کریں۔
4. div ٹیگ جس کی id کا نام sidebar ہے، اس پر اسٹائل رولز لگائے گئے ہیں۔ پہلی لائن پر چوڑائی 60 پکسلز رکھی گئی ہے۔ دوسری لائن پر float پراپرٹی کی مدد سے اس ٹیگ کو بائیں طرف دھکیلا گیا ہے جس کے نتیجے میں اس ٹیگ نے ویب پیج کے بائیں کالم کی شکل اختیار کر لی ہے۔ تیسری لائن پر اس ٹیگ کے اوپر 30 پکسلز فاصلہ مقرر کیا گیا ہے۔ چوتھی لائن پر line-height پراپرٹی کی مدد سے لائنوں کے درمیان مناسب فاصلہ مقرر کیا گیا ہے۔
5. اس کے بعد sidebar کے اندر موجود a ٹیگز کے لیے اسٹائل رولز لکھے گئے ہیں۔ پہلی لائن پر لنکس کے لیے bold فونٹ مقرر کیا گیا ہے، جبکہ دوسری لائن پر underline ختم کی گئی ہے۔
6. div ٹیگ جس کی id کا نام content ہے، اس پر اسٹائل رولز لگائے گئے ہیں۔ پہلی لائن پر 380 پکسلز چوڑائی رکھی گئی ہے۔ دوسری لائن پر float پراپرٹی کی مدد سے اس ٹیگ کو بائیں طرف دھکیلا گیا ہے۔ چونکہ sidebar بلاک پہلے سے بائیں طرف موجود ہے، اس لیے content بلاک اس کے دائیں طرف آجائے گا۔ تیسری لائن پر اس ٹیگ کے بائیں طرف 1 پکسل موٹائی کا بارڈر لگایا گیا ہے جس کا رنگ سلور رکھا گیا ہے۔ چوتھی لائن پر margin-left پراپرٹی کے ذریعے بارڈر سے باہر 30 پکسلز فاصلہ مقرر کیا گیا ہے، جس کی وجہ سے دونوں کالموں کے درمیان کچھ فاصلہ سیٹ ہوگیا ہے۔ پانچویں لائن پر padding-left پراپرٹی کے ذریعے بارڈر کے اندر 20 پکسلز فاصلہ مقرر کیا گیا ہے، جس کی وجہ سے دائیں کالم کی لکھائی اور بارڈر کے درمیان کچھ فاصلہ سیٹ ہوگیا ہے۔

نیچے زپ فائل کی شکل میں مکمل کوڈ فراہم کیا گیا ہے۔ اگر آپ نئے سیکھنے والے ہیں تو ضرور اسے ڈاؤن لوڈ کریں۔ کوڈ میں تبدیلیاں کر کے ویب براؤزر میں دیکھیں، اس سے آپ کے سیکھنے کا عمل بہتر ہوگا۔