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