بنیادی سی ایس ایس: تعارف اور نحو

CSS(Cascading Style Sheets) ویب ڈویلپمنٹ کا ایک بنیادی جزو ہے جو آپ کی ویب سائٹ پر HTML عناصر کی بصری ظاہری شکل کو کنٹرول کرنے میں ایک اہم کردار ادا کرتا ہے۔ یہ اصولوں اور خصوصیات کا ایک طاقتور سیٹ فراہم کرتا ہے جو اس بات کی وضاحت کرتا ہے کہ عناصر کو کس طرح ڈسپلے، فارمیٹ اور پوزیشن میں رکھا جاتا ہے، جس سے آپ اپنے ویب صفحات کی شکل و صورت کو اپنی مرضی کے مطابق بنا سکتے ہیں۔

 

آئیے سلیکٹرز کے تصور کو سمجھ کر شروع کریں۔

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

مثال کے طور پر، درج ذیل CSS اصول دستاویز کے تمام پیراگراف کو نشانہ بناتا ہے:

p {  
  color: blue;  
}  

اس مثال میں، p سلیکٹر تمام <p> عناصر کو منتخب کرتا ہے اور ان کے متن کا رنگ نیلے پر سیٹ کرتا ہے۔

 

ایک اور عام سلیکٹر کلاس سلیکٹر ہے۔

کلاسز کا استعمال اسی طرح کی خصوصیات والے عناصر کو گروپ کرنے کے لیے کیا جاتا ہے۔ HTML عناصر کو کلاس تفویض کر کے، آپ انہیں اجتماعی طور پر ہدف اور طرز بنا سکتے ہیں۔

یہاں ایک مثال ہے:

.blue-text {  
  color: blue;  
}  

n اس صورت میں، .blue-text سلیکٹر کلاس کے ساتھ تمام عناصر کو نشانہ بناتا ہے blue-text اور ان کے متن پر نیلے رنگ کا اطلاق کرتا ہے۔

مزید برآں، ID سلیکٹر آپ کو ایک مخصوص عنصر کو اس کے منفرد شناخت کنندہ کے ذریعے نشانہ بنانے کی اجازت دیتا ہے۔ ID عام طور پر ایک صفحہ پر انفرادی عناصر کو تفویض کیا جاتا ہے۔

یہاں ایک مثال ہے:

#header {  
  background-color: gray;  
}  

اس مثال میں، #header سلیکٹر عنصر کو کے ساتھ منتخب کرتا ہے ID header  اور اس پر سرمئی پس منظر کا رنگ لگاتا ہے۔

 

سی ایس ایس کے نحو کی طرف بڑھتے ہوئے، ہر سی ایس ایس اصول سلیکٹر اور ڈیکلریشن بلاک پر مشتمل ہوتا ہے۔

ڈیکلریشن بلاک گھوبگھرالی منحنی خطوط وحدانی میں بند ہے {} اور اس میں ایک یا زیادہ اعلانات شامل ہیں۔ اعلانات ایک پراپرٹی اور اس کی متعلقہ قیمت پر مشتمل ہوتے ہیں۔

یہاں ایک مثال ہے:

h1 {  
  font-size: 24px;  
  color: #333;  
}  

اس کوڈ کے ٹکڑوں میں، h1 سلیکٹر تمام <h1> عناصر کو منتخب کرتا ہے اور ان کے فونٹ کا سائز 24 پکسلز اور متن کا رنگ گہرے سرمئی(#333) پر سیٹ کرتا ہے۔

 

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