CSS میں بیک گراؤنڈ امیج کیسے سیٹ کریں

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

سی ایس ایس کیا ہے؟

CSS کا مطلب ہے Cascading Style Sheet۔ یہ ایک پروگرامنگ لینگویج ہے جو آپ کو مارک اپ لینگویجز کو سٹائل کرنے دیتی ہے۔ ایسی ہی ایک مارک اپ لینگویج ایچ ٹی ایم ایل یا ہائپر ٹیکسٹ مارک اپ لینگویج ہے۔ HTML ویب سائٹس بنانے کے لیے استعمال ہوتا ہے۔ اگرچہ آپ HTML کا استعمال کرتے ہوئے ویب سائٹ کے کچھ انداز کو کنٹرول کر سکتے ہیں ، CSS بہت زیادہ کنٹرول اور ڈیزائن کے اختیارات پیش کرتا ہے۔

HTML کے ساتھ ایک بنیادی ویب سائٹ بنانا۔

چونکہ سی ایس ایس صرف ایک سٹائل کی زبان ہے ، اس کو استعمال کرنے کے لیے ، ہمیں سب سے پہلے سٹائل کے لیے کچھ چاہیے۔ CSS کے ساتھ کھیلنا شروع کرنے کے لیے ایک بہت ہی بنیادی ویب سائٹ ہمارے لیے کافی ہوگی۔ ہمارا صفحہ 'ہیلو ورلڈ' دکھائے گا۔

  
  
  
  
 Hello World

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

ہماری مثال میں ، ہمارے پاس چار ٹیگ ہیں۔ کی html ٹیگ بتاتا ہے کہ کون سے عناصر ویب سائٹ کا حصہ ہیں۔ کی سر ٹیگ میں ہیڈر کی معلومات ہوتی ہے جو صفحے پر ظاہر نہیں ہوتی لیکن صفحہ بنانے کے لیے درکار ہوتی ہے۔ دکھائے گئے تمام عناصر کے درمیان ہیں۔ جسم ٹیگز. ہمارے پاس صرف ایک ڈسپلے عنصر ہے ، p ٹیگ. یہ ویب براؤزر کو بتاتا ہے کہ متن ایک پیراگراف ہے۔

HTML میں CSS شامل کرنا۔

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

  
  
  
  
 Hello World

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

  
  
  
  
 Hello World

ہماری ویب سائٹ بہتر نظر آتی ہے ، لیکن ہمارا HTML پیراگراف ٹیگ میں ان تمام وضاحتوں کے ساتھ گندا نظر آنے لگا ہے۔ ہم اس معلومات کو اپنے ہیڈر میں منتقل کر سکتے ہیں۔ ہمارا ہیڈر ان معلومات کے لیے ہے جو ہمیں ویب سائٹ کو صحیح طریقے سے دکھانے کی ضرورت ہے۔

  
  
  
 p {  
 text-align: center  
 }  
 #ourParagraph {  
 border-style: solid;  
 padding: 30px;  
 }  
  
  
  
 Hello World

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

اگر آپ بور ہیں تو کیا کریں

اپنی ویب سائٹ پر CSS فائل درآمد کرنا۔

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

اس کے بجائے ، ہم سی ایس ایس کی معلومات کو ایک علیحدہ فائل میں رکھنے جا رہے ہیں اور پیج کو اسٹائل کرنے کے لیے فائل درآمد کریں گے۔ سٹائل ٹیگز کے درمیان معلومات کو ایک نئی سی ایس ایس فائل میں کاپی اور پیسٹ کریں۔ ourCSSfile.css .

p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

پھر ، فائل کو HTML فائل میں درآمد کریں۔

  
  
  
  
  
 Hello World

CSS کے ساتھ پس منظر کی تصویر شامل کرنا۔

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

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

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

میں گوگل سرچ ہسٹری کو کیسے حذف کروں؟

وصف کے بعد ، اس بات کی نشاندہی کرنے کے لیے بڑی آنت کا استعمال کریں کہ آپ وصف کو کیسے تبدیل کریں گے۔ تصویر امپورٹ کرنے کے لیے استعمال کریں۔ url () . یہ اشارہ کرتا ہے کہ آپ تصویر کی طرف اشارہ کرنے کے لیے ایک لنک استعمال کر رہے ہیں۔ کوٹیشن مارکس کے درمیان بریکٹ میں فائل کا مقام رکھیں۔ آخر میں ، سیمیکولن کے ساتھ لائن ختم کریں۔ اگرچہ سی ایس ایس میں وائٹ اسپیس کا کوئی معنی نہیں ہے ، سی ایس ایس کو پڑھنے میں آسانی کے لیے انڈینٹیشن استعمال کریں۔

ہماری مثال اس طرح نظر آتی ہے:

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

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

پس منظر کا رنگ تبدیل کرنا۔

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

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 background-color: white;  
 border-style: solid;  
 padding: 30px;  
}

کافی بہتر.

سی ایس ایس کے ساتھ اپنی ویب سائٹ کو ڈیزائن کرنا جاری رکھیں۔

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

بانٹیں بانٹیں ٹویٹ ای میل۔ کوالٹی ایچ ٹی ایم ایل کوڈنگ کی 8 مثالیں۔

اپنی ویب سائٹس اور ایپس کوڈ کرنے کے لیے HTML سیکھنا چاہتے ہیں؟ اپنے آپ کو HTML اور CSS سکھانے کے لیے ان ویب پیج مثالوں اور سورس کوڈ کا استعمال کریں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

پروگرامنگ۔
ایچ ٹی ایم ایل
ویب ڈیزائن
سی ایس ایس

مصنف کے بارے میں جینیفر سیٹن۔(21 مضامین شائع ہوئے)

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

جینیفر سیٹن سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

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

سبسکرائب کرنے کے لیے یہاں کلک کریں۔