کاسکیڈنگ اسٹائل شیٹس کیا ہیں اور سی ایس ایس کس کے لیے استعمال ہوتا ہے؟

سی ایس ایس کا تعلق ایچ ٹی ایم ایل اور جاوا اسکرپٹ کے ساتھ ساتھ بنیادی ویب ٹیکنالوجیز سے ہے۔ محتاط منصوبہ بندی کے ساتھ ، سی ایس ایس خدشات کو الگ کرنے میں معاون ہے۔ آزاد وسائل مواد کے ڈھانچے ، اس کی پیشکش اور اس کے رویے کو کنٹرول کرتے ہیں۔

اسٹائل شیٹس رسائی ، اسکیل ایبلٹی ، اور یہاں تک کہ ویب پرفارمنس میں بھی اہم کردار ادا کرتی ہیں۔ بطور مواد مصنف یا ویب ڈیزائنر ، وہ آپ کو کنٹرول دیتے ہیں کہ آلات کس طرح مواد پیش کرتے ہیں۔ ترتیب سے لے کر فونٹ کے سائز اور رنگ تک ، سی ایس ایس مواد کو خوبصورت نظر آنے والے صفحات میں بدل دیتا ہے۔

سی ایس ایس کیسا لگتا ہے؟

سی ایس ایس ایک بڑی زبان ہے - انداز کے لیے بہت سی مختلف چیزیں ہیں! لیکن اس کا نحو سیدھا ہے ، صرف چند اصول سیکھنے کے لیے۔

ایچ ٹی ایم ایل عناصر میں مختلف خصوصیات ہیں جو سی ایس ایس اسٹائل کر سکتی ہیں۔ کی رنگ پراپرٹی پیش منظر (مثلا text متن) کا رنگ متعین کرتی ہے۔ فونٹ سائز پر منحصر ہے حرف کا سائز جائیداد

ہر پراپرٹی کو ایک معاون قیمت پر سیٹ کیا جا سکتا ہے۔ کسی پراپرٹی کو قیمت کی تفویض ایک 'اعلان' ہے۔ عام طور پر ، وہ اس طرح نظر آتے ہیں:

property: value

مثال کے طور پر:

بطور وال پیپر ونڈوز 10 میں جی آئی ایف رکھنے کا طریقہ

color: red

مختلف پراپرٹیز کی اقدار بہت مختلف لگ سکتی ہیں ، یہاں تک کہ ایک ہی پراپرٹی کی اقدار بھی۔ مثال کے طور پر ، پچھلے اعلامیہ کو لکھنے کے دو اور طریقے یہ ہیں:

color: #ff0000  
color: rgb(255, 0, 0)

ایچ ٹی ایم ایل اور سٹائل شیٹس ایک ساتھ کیسے آتے ہیں۔

آپ HTML اور CSS کو کچھ مختلف طریقوں سے جوڑ سکتے ہیں ، ہر ایک اس کے فوائد کے ساتھ۔

طرز تحریر ان لائن۔

سب سے آسان طریقہ یہ ہے کہ سٹائل کے اعلانات کو براہ راست HTML فائل کے کسی عنصر سے منسلک کیا جائے۔ آپ یہ استعمال کر سکتے ہیں سٹائل اس طرح وصف:

  
 Most of this text is red …
  
 … but this isn’t!

اگرچہ اس طرح کے اسٹائل عناصر ان لائن آسان ہو سکتے ہیں ، اس میں کئی خرابیاں ہیں۔ شروع کے لیے ، یہ ایچ ٹی ایم ایل کو پیچیدہ بنا دیتا ہے ، جس سے ایک نظر میں پڑھنا مشکل ہو جاتا ہے۔ اسے برقرار رکھنا بھی عجیب ہے: ایک طویل دستاویز کا تصور کریں جس میں ہم ہر پیراگراف کا رنگ متعین کرنا چاہتے ہیں۔ یہ سی ایس ایس ہے ، لیکن یہ 'اسٹائل شیٹس' نہیں ہے۔

سر میں سٹائل سرایت

آپ دیکھنا شروع کر سکتے ہیں کہ سٹائل شیٹ دوسرے میکانزم کے ساتھ کیسا لگتا ہے ، سرایت کرنا . اس نقطہ نظر کا استعمال کرتے ہوئے ، ہم a کے اندر تمام طرز کے اعلانات کو اکٹھا کرتے ہیں۔ سٹائل میں عنصر سر ہماری دستاویز کا. یہ کچھ اس طرح نظر آئے گا:

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

اگرچہ ہماری طرز کی ہدایات کو پہلے سے کچھ زیادہ تفصیل کی ضرورت ہے۔ چونکہ ہم نے انہیں سر میں منتقل کر دیا ہے ، ہر اصول اب کسی عنصر سے وابستہ نہیں ہے۔ شاید ہم نے اعلان کر دیا ہو۔ رنگ: سرخ۔ ، لیکن وہ رنگ کیا ہونا چاہیے؟

یہ وہ جگہ ہے جہاں سی ایس ایس سلیکٹر آتے ہیں۔ وہ ہمیں اس صفحے کے مخصوص حصوں کو نشانہ بنانے اور ان کے انداز کو ایک جگہ پر بیان کرنے کی اجازت دیتے ہیں۔

کیا میں ہوائی جہاز کے موڈ پر وائی فائی استعمال کر سکتا ہوں؟

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

مثال کے طور پر ، پیراگراف کے متن کو بلیو کرنے کے لیے ، ہم درج ذیل کی وضاحت کر سکتے ہیں:

p {  
 color: blue;  
}

اس مثال میں ، سلیکٹر صرف ہے۔ p ، جو ہماری دستاویز کے تمام پیراگراف عناصر سے مماثل ہے۔ یہ تمام متن کو نیلے رنگ میں رنگ دے گا ، جب تک یہ اندر ہے۔

بیرونی اسٹائل شیٹ کو جوڑنا۔

کور کرنے کا آخری طریقہ لنکنگ ہے۔ یہ ، اب تک ، سب سے زیادہ مفید نقطہ نظر ہے ، اور ایک جو آپ کو زیادہ تر وقت کا انتخاب کرنا چاہئے۔ CSS قوانین کو سرایت کرنے کے بجائے سٹائل عنصر براہ راست آپ کی دستاویز میں ، آپ انہیں ایک علیحدہ فائل میں منتقل کر سکتے ہیں۔

اس کوڈ کو اندر چسپاں کریں۔ اپنی بیرونی سٹائل شیٹ کو جوڑنے کے لیے اپنی HTML فائل کے ٹیگز۔

سی ایس ایس کی طاقت۔

منسلک طریقہ کے ساتھ ، ہم سی ایس ایس کی بنیادی طاقت کو استعمال کر رہے ہیں: خدشات کو الگ کرنا۔ تمام دستاویزی معلومات - مواد کا کیا مطلب ہے - HTML دستاویز میں موجود ہے۔ اسٹائل - جو نظر آتا ہے - ایک علیحدہ فائل ، اسٹائل شیٹ میں ہے۔

اس علیحدگی کے چند فوائد یہ ہیں:

آپ صرف فائل کا حوالہ تبدیل کرکے اسٹائل شیٹ تبدیل کرسکتے ہیں۔ یہ متحرک طور پر بھی ہو سکتا ہے۔ ایک قدم میں ، آپ ایک صفحے کی پوری شکل اور احساس کو تبدیل کر سکتے ہیں۔

بہت سے صفحات ضرورت کے مطابق ایک ہی سٹائل شیٹس شیئر کر سکتے ہیں۔ ایک ہی فائل کو تبدیل کر کے ، آپ پوری ویب سائٹ کی شکل و صورت کو اپ ڈیٹ کر سکتے ہیں۔

کسی صفحے کو 'مواد' اور 'انداز' میں تقسیم کرنے کے تکنیکی فوائد ہیں۔ پراکسی اور براؤزر انفرادی فائلوں کو الگ الگ کیش کر سکتے ہیں۔ اس کا مطلب ہے کہ ایک سائٹ ہر ایک صفحے میں شامل کرنے کے بجائے ایک بار اپنی طرز کی معلومات بھیج سکتی ہے۔

تعاون کرتے وقت ، مختلف ٹیمیں اپنی طاقت کے مطابق کام کر سکتی ہیں ، ایک دوسرے کو متاثر کیے بغیر علیحدہ فائلیں بنا اور ترمیم کر سکتی ہیں۔

جھرن کی وضاحت۔

آپ نے سٹائل اور سٹائل شیٹس کے بارے میں بہت کچھ سیکھا ہے ، لیکن CSS کے بڑے حصے کے بارے میں کیا خیال ہے؟

جھرن وہی ہے جو فیصلہ کرتی ہے کہ کون سے اسٹائل استعمال کیے جائیں جب ایک سے زیادہ سٹائل کی چادریں موجود ہوں۔ آپ نے دیکھا ہے کہ مصنف اپنے مواد کے لیے سٹائل کی وضاحت کیسے کر سکتا ہے۔ لیکن سی ایس ایس کی ایک اور خصوصیت یہ ہے کہ یہ قارئین اور براؤزر مینوفیکچررز کو کچھ اس معاملے میں بھی کہتا ہے۔

آپ پہلے سے ہی پہلے سے طے شدہ انداز کے بارے میں سوچ چکے ہوں گے۔ مثال کے طور پر ، ایک کیسے کرتا ہے۔ H1۔ عنصر بڑا اور جرات مندانہ دکھائی دیتا ہے ، یہاں تک کہ کسی مصنف سٹائل شیٹ کے بغیر بھی؟ یہ خاص قوانین کے ایک سیٹ کی بدولت ہے جو صارف ایجنٹ سٹائل شیٹ بناتا ہے۔ یہ قوانین ابتدائی طور پر آپ کے ویب براؤزر کے ذریعے ہر صفحے پر لاگو ہوتے ہیں۔

جھرن اس بات کی وضاحت کرتا ہے کہ مصنف سٹائل شیٹ صارف ایجنٹ سٹائل کے بعد لاگو ہوتا ہے۔ اگر ہمارا براؤزر کہتا ہے کہ عنوانات جرات مندانہ ہیں لیکن صفحے کے مصنف نے اعلان کیا ہے کہ اس صفحے کے عنوانات ہلکے ہیں ، تو وہ روشنی ختم کردیں گے۔

سٹائل شیٹ کا ایک اور ذریعہ ہے جو کچھ کنٹرول قارئین کے حوالے کرتا ہے۔ کوئی بھی ویب صارف ، اصول میں ، اپنی مرضی کے قوانین کے ساتھ یوزر سٹائل شیٹ کو برقرار رکھ سکتا ہے۔ یہ بیچ میں بیٹھے ہیں: صارف کے قواعد ڈیفالٹ براؤزر کی ترتیبات کو اوور رائیڈ کردیں گے ، لیکن خود مصنف کے انداز کے ذریعہ اوور رائیڈ ہوجائیں گے۔ افسوس کی بات یہ ہے کہ یوزر سٹائل شیٹس کی حمایت کبھی وسیع نہیں ہوئی۔

مختلف میڈیا کو نشانہ بنانا۔

آپ اسکرین سے باہر ، مختلف سیاق و سباق میں اسٹائل شیٹ استعمال کرسکتے ہیں۔ کی نصف کی صفت لنک عنصر وضاحت کرتا ہے کہ سٹائل شیٹ کس میڈیا ٹائپ پر لاگو ہوتی ہے۔ مثال کے طور پر ، آپ a کی وضاحت کرسکتے ہیں۔ پرنٹ کے لیے سٹائل شیٹ مندرجہ ذیل کی طرح مارک اپ کا استعمال کرتے ہوئے:
آپ عام سٹائل کو ایک عالمی سٹائل شیٹ اور میڈیا مخصوص سٹائل الگ فائلوں میں جمع کر سکتے ہیں۔ یہاں تک کہ میڈیا کی اقسام بھی ہیں جو آپ کے مواد کی اورل یا بریل پریزنٹیشن کو پورا کرتی ہیں۔ رسائی کو بہتر بنانے میں سی ایس ایس ایک اہم ذریعہ ہے۔

متعلقہ: اگر آپ نابینا یا بصارت سے محروم ہیں تو ویب کو کیسے براؤز کریں۔
مزید چڑچڑے جذبات کیسے حاصل کریں۔

وکی پیڈیا جیسی سائٹس اپنے پرنٹ سٹائل کو کنٹرول کرنے ، ناپسندیدہ عناصر کو چھپانے اور لے آؤٹ کو آسان بنانے کے لیے سی ایس ایس کا استعمال کرتی ہیں۔

سی ایس ایس ایچ ٹی ایم ایل کو اچھا بناتا ہے۔

کاسکیڈنگ اسٹائل شیٹس بہت زیادہ احاطہ کرتی ہیں: جھرن ، وراثت ، سلیکٹرز ، ذرائع ، میڈیا وغیرہ لیکن ان کی طاقت جدید ویب کو قابل بناتی ہے۔ یہ ایک ایسا میڈیم ہے جو دوبارہ قابل استعمال ، لچکدار اور قابل رسائی خصوصیات مہیا کرتا ہے۔

سی ایس ایس کی مکمل طاقت اور اسے کتنا پیش کرنا ہے ، دیکھنے کے لیے ، ہماری دھوکہ دہی کی شیٹ کو چیک کریں جو تمام ضروری سی ایس ایس 3 پراپرٹیز پر محیط ہے۔
بانٹیں بانٹیں ٹویٹ ای میل۔ ضروری CSS3 پراپرٹیز چیٹ شیٹ۔
ہماری CSS3 پراپرٹیز چیٹ شیٹ کے ساتھ ضروری CSS نحو پر عبور حاصل کریں۔
اگلا پڑھیں۔ متعلقہ موضوعات۔

پروگرامنگ۔

ویب سازی

سی ایس ایس

مصنف کے بارے میں بوبی جیک۔(58 مضامین شائع ہوئے)
بوبی ایک ٹکنالوجی کا شوقین ہے جس نے دو دہائیوں تک سافٹ ویئر ڈویلپر کی حیثیت سے کام کیا۔ وہ گیمنگ کے بارے میں پرجوش ہے ، سوئچ پلیئر میگزین میں بطور ریویو ایڈیٹر کام کرتا ہے ، اور آن لائن پبلشنگ اور ویب ڈویلپمنٹ کے تمام پہلوؤں میں ڈوبا ہوا ہے۔
بوبی جیک سے مزید
ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!
سبسکرائب کرنے کے لیے یہاں کلک کریں۔