Cascading Style Sheets، یا CSS، ایک ایسی زبان ہے جو ویب پیج کو بتاتی ہے کہ کس طرح دیکھنا ہے۔ CSS ویب سائٹ کے سادہ ڈھانچے میں رنگ، انداز اور ترتیب شامل کرتا ہے۔ جس طرح آپ اچھے لگنے اور صاف ستھرا نظر آنے کے لیے اپنے کپڑے چنتے ہیں، اسی طرح CSS ویب پیج کو تیار کرنے اور پرکشش نظر آنے میں مدد کرتا ہے۔ ویب ڈویلپمنٹ میں، ہم صفحہ پر متن اور بکس کا رنگ، سائز، اور پوزیشن تبدیل کرنے کے لیے CSS کا استعمال کرتے ہیں۔ یہ سبق آپ کو سادہ زبان میں CSS کی بنیادی باتوں سے متعارف کرائے گا۔ ہم سیکھیں گے کہ CSS کیا ہے، یہ کیوں ضروری ہے، اور یہ HTML کے ساتھ کیسے کام کرتا ہے۔
CSS کا مطلب ہے Cascading Style Sheets۔ یہ ایک خاص زبان ہے جو ویب صفحات کو اسٹائل کرنے کے لیے استعمال ہوتی ہے۔ CSS کو کسی عمارت کی پینٹ اور سجاوٹ کے طور پر سمجھیں۔ عمارت HTML سے بنی ہے، اور CSS اسے خوبصورت بناتی ہے۔ CSS کا استعمال کرتے ہوئے، آپ اپنے ویب پیج پر پس منظر کا رنگ، فونٹ کے انداز، اور عناصر کے ارد گرد جگہ تبدیل کر سکتے ہیں۔ CSS ایک ایسا ٹول ہے جو ویب ڈیزائنرز کو ویب سائٹس کو بہتر اور زیادہ پرلطف بنانے میں مدد کرتا ہے۔
تصور کریں کہ آپ کسی ڈرائنگ کو رنگین کر رہے ہیں۔ ڈرائنگ کی لکیریں ویب سائٹ کے بنیادی ڈھانچے کی طرح ہیں۔ سی ایس ایس کریون اور مارکر کی طرح ہے جو ڈرائنگ میں جان ڈالتے ہیں۔ چند آسان اصولوں کے ساتھ، آپ اپنی پوری ڈرائنگ کو سادہ سے رنگین میں تبدیل کر سکتے ہیں!
CSS کا استعمال ویب سائٹس کو پرکشش اور استعمال میں آسان بنانے کے لیے کیا جاتا ہے۔ یہ انداز کو مواد سے الگ رکھتا ہے۔ اس کا مطلب یہ ہے کہ صفحہ پر الفاظ اور تصاویر (HTML کے ذریعے فراہم کردہ) وہی رہیں، جبکہ CSS کنٹرول کرتا ہے کہ وہ کیسے نظر آتے ہیں۔ جب آپ سٹائل کو اپ ڈیٹ کرتے ہیں، تو آپ کو مواد کو تبدیل کرنے کی ضرورت نہیں ہوتی ہے۔ یہ علیحدگی ویب ڈویلپرز کو تیزی سے کام کرنے میں مدد کرتی ہے اور سائٹس کو دیکھنے کے لیے بہتر بناتی ہے۔
سی ایس ایس کے بارے میں سوچیں جیسے آپ نے جو لباس منتخب کیا ہے۔ اگر آپ مختلف لباس پہنتے ہیں، تو آپ مختلف نظر آتے ہیں، لیکن آپ اب بھی ایک ہی شخص ہیں۔ سی ایس ایس کسی ویب سائٹ پر موجود معلومات کو تبدیل کیے بغیر اس کی شکل بدل دیتا ہے۔ اس سے صرف ایک CSS فائل میں ترمیم کرکے پوری ویب سائٹ کے ڈیزائن کو اپ ڈیٹ کرنا آسان ہوجاتا ہے۔
CSS HTML کے ساتھ مل کر کام کرتا ہے۔ ایچ ٹی ایم ایل وہ بنیاد ہے جو یہ بتاتی ہے کہ ویب پیج پر چیزیں کہاں جاتی ہیں۔ CSS پھر رنگ، فونٹ اور سٹائل شامل کرنے کے لیے آتا ہے۔ جب کوئی براؤزر ویب پیج لوڈ کرتا ہے، تو وہ پہلے HTML کے ساتھ ڈھانچہ بناتا ہے اور پھر CSS میں بیان کردہ طرزوں کو لاگو کرتا ہے۔
سی ایس ایس کو قواعد کے ایک سیٹ کے طور پر لکھا جاتا ہے۔ ہر اصول کے دو حصے ہوتے ہیں: ایک سلیکٹر اور ایک ڈیکلریشن بلاک۔ سلیکٹر براؤزر کو بتاتا ہے کہ کس HTML عنصر کو اسٹائل کرنا ہے۔ ڈیکلریشن بلاک میں ایک یا زیادہ ڈیکلریشن ہوتے ہیں۔ ہر اعلان کی ایک خاصیت اور ایک قدر ہوتی ہے۔ پراپرٹی وہی ہے جسے آپ تبدیل کرنا چاہتے ہیں، اور قدر بتاتی ہے کہ اسے کیسے تبدیل کیا جائے۔
مثال کے طور پر، صفحہ کے پس منظر کا رنگ ہلکے نیلے پر سیٹ کرنے کے لیے، آپ ایک اصول لکھ سکتے ہیں جو اس طرح نظر آتا ہے:
<code>باڈی {
پس منظر کا رنگ: ہلکا نیلا؛
</code>یہ سادہ اصول پورے صفحے کا پس منظر بدل دیتا ہے۔
سی ایس ایس کا ایک بنیادی اصول ایک سادہ پیٹرن کی پیروی کرتا ہے۔ یہ سلیکٹر اور خصوصیات اور اقدار کا ایک بلاک دکھاتا ہے۔ پیٹرن اس طرح لگتا ہے:
<code>سلیکٹر {
پراپرٹی: قدر
</code>یہاں، سلیکٹر منتخب کرتا ہے کہ کس HTML عنصر کو ہدف بنانا ہے۔ پراپرٹی وہ ہے جسے آپ تبدیل کرنا چاہتے ہیں، اور قدر یہ ہے کہ آپ اسے کس طرح تبدیل کرنا چاہتے ہیں۔
مثال کے طور پر، اگر آپ چاہتے ہیں کہ پیراگراف کا تمام متن نیلا ہو، تو آپ لکھتے ہیں:
<code>p {
رنگ: نیلا؛
</code>یہ اصول ویب براؤزر کو بتاتا ہے کہ ہر <p> (پیراگراف) عنصر میں نیلے رنگ کا متن ہونا چاہیے۔
CSS سلیکٹرز آپ کو یہ منتخب کرنے دیتے ہیں کہ آپ کے ویب پیج پر کون سے عناصر طرز کے اصولوں سے متاثر ہوں گے۔ سلیکٹرز کی کئی قسمیں ہیں، اور ہر ایک قدرے مختلف طریقے سے کام کرتا ہے۔
یہ مختلف سلیکٹرز آپ کو اپنے ویب پیج کے مخصوص حصوں کو اسٹائل کرنے کے لیے کافی طاقت دیتے ہیں۔ وہ آپ کو عناصر کو ٹھیک ٹھیک نشانہ بنانے اور فیصلہ کرنے کی اجازت دیتے ہیں کہ انہیں کیسا نظر آنا چاہیے۔
CSS بہت سی مختلف خصوصیات فراہم کرتا ہے جنہیں آپ اپنے ویب پیج کو اسٹائل کرنے کے لیے استعمال کر سکتے ہیں۔ ہر خاصیت آپ کو عنصر کی ظاہری شکل کا ایک خاص پہلو تبدیل کرنے دیتی ہے۔ کچھ عام خصوصیات یہ ہیں:
ہر سی ایس ایس پراپرٹی کے بعد ایک قدر ہوتی ہے۔ مثال کے طور پر، متن کو سرخ رنگ دینے کے لیے، آپ لکھ سکتے ہیں:
<code>p {
رنگ: سرخ؛
</code>یہ سادہ اصول تمام پیراگراف کو سرخ متن والا بناتا ہے۔ پراپرٹی کا رنگ کنٹرول کرتا ہے کہ متن کیسے ظاہر ہوتا ہے اور سرخ قدر بتاتی ہے کہ کون سا رنگ ہونا چاہیے۔
CSS میں لفظ "cascading" کا مطلب ہے کہ طرزیں ایک اصول سے دوسرے اصول میں بہہ سکتی ہیں۔ اگر ایک ہی عنصر پر دو اصول لاگو ہو سکتے ہیں، تو آرڈر فیصلہ کر سکتا ہے کہ کون جیتا ہے۔ یہ اسٹیکنگ بلاکس کی طرح ہے جہاں ایک بلاک بعض اوقات دوسرے کے حصے کا احاطہ کرتا ہے۔
ایک عام اصول یہ ہے کہ HTML عنصر کے اندر براہ راست لکھی گئی طرزیں (جسے ان لائن اسٹائل کہتے ہیں) آپ کی CSS فائل میں اسٹائل کو اوور رائڈ کر دیں گے۔ ایک اور قاعدہ یہ ہے کہ اگر والدین کے عنصر کو اسٹائل کیا جاتا ہے، تو اس کے بچے عناصر اس انداز کے وارث ہوسکتے ہیں جب تک کہ انہیں دوسری صورت میں نہ بتایا جائے۔
مثال کے طور پر، اگر آپ <div> کے متن کا رنگ سبز پر سیٹ کرتے ہیں، تو <div> کے اندر کا متن اکثر وراثت کی وجہ سے سبز نظر آئے گا۔ یہ ویب پیج پر ایک مستقل ڈیزائن کو برقرار رکھنے میں مدد کرتا ہے۔
CSS کے ساتھ، آپ کئی طریقوں سے رنگ تبدیل کر سکتے ہیں۔ آپ عام رنگوں کے نام استعمال کر سکتے ہیں جیسے سرخ ، نیلا اور سبز ۔ آپ ہیکساڈیسیمل کوڈز بھی استعمال کر سکتے ہیں جیسے کہ <code>#FF0000</code> سرخ کے لیے، یا RGB قدریں جیسے <code>rgb(255, 0, 0)</code>۔
فونٹس سی ایس ایس کا ایک اور اہم حصہ ہیں۔ ایک فونٹ ہینڈ رائٹنگ کے انداز کی طرح ہے جسے آپ نوٹ بک میں منتخب کرتے ہیں۔ CSS میں، آپ فونٹ کی فیملی، سائز، وزن اور انداز کو تبدیل کر سکتے ہیں۔ مثال کے طور پر، اگر آپ چاہتے ہیں کہ آپ کے پیراگراف ایریل میں ظاہر ہوں، تو آپ استعمال کر سکتے ہیں:
<code>p {
فونٹ فیملی: ایریل، سینز سیرف؛
</code>یہ قاعدہ براؤزر سے کہتا ہے کہ متن کو ایریل فونٹ میں ظاہر کرے اگر یہ دستیاب ہو اور اگر نہیں ہے تو اسی طرح کا دوسرا فونٹ استعمال کرے۔
CSS کے ساتھ رنگوں اور فونٹس کو تبدیل کرنا متن کو پڑھنے میں آسان بناتا ہے اور آپ کے ویب پیج کو دیکھنے میں زیادہ دلچسپ ہوتا ہے۔
سی ایس ایس باکس ماڈل یہ سمجھنے کا ایک طریقہ ہے کہ کسی صفحہ پر عنصر کے مختلف حصوں کو کس طرح ترتیب دیا جاتا ہے۔ ہر عنصر ایک باکس کی طرح ہے. باکس ماڈل کے چار حصے ہیں:
ایک تصویر کا تصور کریں۔ تصویر خود مواد ہے. تصویر کے چاروں طرف چٹائی پیڈنگ کی طرح ہے۔ فریم جو یہ سب ایک ساتھ رکھتا ہے وہ سرحد ہے۔ اور فریم کے ارد گرد کی جگہ مارجن ہے۔ اس ماڈل کا استعمال کرتے ہوئے، آپ اس بات کو یقینی بنا سکتے ہیں کہ آپ کے ڈیزائن کے تمام حصوں میں مناسب جگہ اور توازن موجود ہے۔
CSS صرف رنگوں اور فونٹس کے بارے میں نہیں ہے۔ یہ آپ کو ویب پیج پر عناصر کو ترتیب دینے میں بھی مدد کرتا ہے۔ اسے ترتیب اور پوزیشننگ کہا جاتا ہے۔ CSS کے ساتھ، آپ فیصلہ کر سکتے ہیں کہ صفحہ پر ہر عنصر کہاں ظاہر ہوتا ہے۔
ویب پیج کے لے آؤٹ کو کنٹرول کرنے کے کئی طریقے ہیں، بشمول:
ان ترتیب کی تکنیکوں کا استعمال شیلف پر کھلونوں کو ترتیب دینے کے مترادف ہے۔ آپ فیصلہ کریں کہ ہر کھلونا کہاں جاتا ہے تاکہ ان سب کے پاس کافی جگہ ہو اور وہ صاف ستھرا نظر آئے۔ یہ آپ کے ویب صفحہ کو زیادہ منظم اور مدعو کرتا ہے۔
یہاں ایک مثال ہے کہ HTML اور CSS ایک ساتھ کیسے کام کرتے ہیں۔ یہ نمونہ کوڈ کچھ اسٹائل کے ساتھ ایک سادہ ویب صفحہ دکھاتا ہے:
<code><!DOCTYPE html>
<html>
<head>
<style>
جسم {
پس منظر کا رنگ: ہلکا نیلا؛
}
h1 {
رنگ: بحریہ؛
فونٹ سائز: 24px؛
}
p {
رنگ: سبز؛
فونٹ سائز: 18px؛
}
</style>
</head>
<body>
<h1>میرا پہلا ویب صفحہ</h1>
<p>یہ ایک سادہ ویب صفحہ ہے جسے CSS کا استعمال کرتے ہوئے اسٹائل کیا گیا ہے۔</p>
</body>
</html></code>یہ کوڈ ہلکے نیلے رنگ کے پس منظر کے رنگ کے ساتھ ایک ویب صفحہ بناتا ہے۔ ہیڈر کا متن بحریہ ہے اور پیراگراف کا متن سبز ہے۔ <code><style></code> ٹیگ کے اندر موجود CSS دکھاتا ہے کہ قواعد کیسے لکھے اور لاگو ہوتے ہیں۔
آپ اپنے HTML میں CSS کو تین اہم طریقوں سے شامل کر سکتے ہیں۔ صورت حال پر منحصر ہر طریقہ کا اپنا استعمال ہے:
پیشہ ورانہ ویب ڈویلپمنٹ میں بیرونی طریقہ سب سے زیادہ عام ہے کیونکہ یہ HTML کو صاف ستھرا رکھتا ہے اور آپ کو ایک ساتھ کئی صفحات پر سٹائل کو اپ ڈیٹ کرنے دیتا ہے۔
سی ایس ایس بہت سے طریقوں سے بہت مددگار ہے۔ ویب ڈویلپمنٹ میں سی ایس ایس کے استعمال کے کچھ فوائد یہ ہیں:
سی ایس ایس کا استعمال ایک خاص ٹول باکس رکھنے جیسا ہے۔ ٹول باکس میں موجود ہر ٹول آپ کو اپنے ویب پیج کی ظاہری شکل کو آسانی سے بہتر بنانے میں مدد کرتا ہے۔ جیسا کہ آپ مشق کرتے ہیں، آپ دیکھیں گے کہ ویب سائٹس کو خوبصورت اور صارف دوست بنانے میں CSS کتنا طاقتور ہو سکتا ہے۔
آپ جو بھی ویب سائٹ دیکھتے ہیں وہ کسی نہ کسی طریقے سے CSS کا استعمال کرتی ہے۔ آپ کی پسندیدہ کارٹون سائٹس سے لے کر اسکول کے پروجیکٹ کے صفحات تک، CSS ایک تفریحی اور پڑھنے میں آسان لے آؤٹ بنانے میں مدد کرتا ہے۔ جب آپ صاف فاصلہ اور واضح متن کے ساتھ رنگین ویب صفحہ دیکھتے ہیں، تو یہ کام پر CSS ہے۔
گیمز، کارٹونز یا آن لائن کہانیوں کے لیے مشہور ویب سائٹس کے ڈیزائن پر غور کریں۔ رنگوں، فونٹس اور لے آؤٹ کا سوچ سمجھ کر استعمال ان ویب سائٹس کو دلچسپ اور دلکش بنانے میں مدد کرتا ہے۔ سی ایس ایس کو ایپس اور موبائل سائٹس میں بھی استعمال کیا جاتا ہے، اس بات کو یقینی بناتے ہوئے کہ مواد بڑی اسکرینوں اور چھوٹے فونز دونوں پر اچھا لگتا ہے۔
روزمرہ کی زندگی میں، CSS ایک کمرے کو سجانے کے مترادف ہے۔ آپ اپنے کمرے کے لیے تھیم کا انتخاب کر سکتے ہیں، رنگین تصویریں لٹکا سکتے ہیں، اور اپنے فرنیچر کو صاف ستھرا ترتیب دے سکتے ہیں۔ CSS ویب سائٹس کے لیے بھی ایسا ہی کرتا ہے۔ یہ ڈیجیٹل جگہ میں ترتیب اور خوبصورتی لاتا ہے، اسے دیکھنے والوں کے لیے خوشگوار بناتا ہے۔
سی ایس ایس کے بارے میں ہم نے سیکھے اہم نکات یہ ہیں:
CSS ویب ڈویلپمنٹ کا ایک اہم حصہ ہے، جو سائٹس کو خوبصورت اور آسانی سے نیویگیٹ کرتا ہے۔ جیسا کہ آپ مزید دریافت کرتے ہیں اور اپنے ویب صفحات بنانے کی کوشش کرتے ہیں، یاد رکھیں کہ CSS تخلیقی صلاحیتوں کے اظہار کے لیے آپ کا آلہ ہے۔ رنگوں، فونٹس اور لے آؤٹ کے ساتھ تجربہ کرنے میں مزہ کریں، کیونکہ ہر چھوٹی تبدیلی اچھی طرح سے ڈیزائن کی گئی ویب سائٹ کے جادو میں اضافہ کرتی ہے۔
اپنی پسندیدہ ویب سائٹس کی مشق اور مشاہدہ کرتے رہیں۔ غور کریں کہ آپ کی توجہ حاصل کرنے اور ایک خوشگوار تجربہ بنانے کے لیے کس طرح مختلف انداز استعمال کیے جاتے ہیں۔ وقت کے ساتھ، آپ دیکھیں گے کہ سی ایس ایس سادہ HTML ڈھانچے کو بصری طور پر مشغول ویب صفحات میں تبدیل کرنے میں کتنا طاقتور ہو سکتا ہے۔