بلاگر: آپ کے بلاگ پر کوڈ کے لیے CSS اسٹائل
ایک دوست نے مجھ سے پوچھا کہ میں نے بلاگر کے اندراج میں کوڈ کے علاقے کیسے بنائے۔ میں نے یہ اپنے بلاگر ٹیمپلیٹ میں سی ایس ایس کے لیے اسٹائل ٹیگ کا استعمال کرتے ہوئے کیا۔ میں نے جو شامل کیا وہ یہ ہے:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: یہ ایک CSS اصول ہے جو HTML کو نشانہ بناتا ہے۔<p>
کلاس کے نام "کوڈ" والے عناصر۔ اس کا مطلب ہے کہ اس کلاس کے ساتھ کسی بھی پیراگراف کو درج ذیل خصوصیات کے مطابق اسٹائل کیا جائے گا۔font-family: Courier New;
: یہ پراپرٹی فونٹ فیملی کو "کورئیر نیو" پر سیٹ کرتی ہے۔ یہ اس فونٹ کی وضاحت کرتا ہے جو ہدف شدہ عناصر کے اندر متن کے لیے استعمال کیا جائے گا۔font-size: 8pt;
: یہ پراپرٹی فونٹ سائز کو 8 پوائنٹس پر سیٹ کرتی ہے۔ ہدف شدہ عناصر کے اندر موجود متن کو اس فونٹ کے سائز پر ظاہر کیا جائے گا۔border-style: inset;
: یہ پراپرٹی بارڈر اسٹائل کو "انسیٹ" پر سیٹ کرتی ہے۔ یہ نشانہ بنائے گئے عناصر کے ارد گرد سرحد کے لیے دھنسی ہوئی یا دبائی ہوئی شکل پیدا کرتا ہے۔border-width: 3px;
: یہ پراپرٹی بارڈر کی چوڑائی کو 3 پکسلز پر سیٹ کرتی ہے۔ عناصر کے ارد گرد کی سرحد 3 پکسلز موٹی ہوگی۔padding: 5px;
: یہ خاصیت ھدف شدہ عناصر کے اندر موجود مواد کے ارد گرد 5 پکسلز پیڈنگ کا اضافہ کرتی ہے۔ یہ متن اور سرحد کے درمیان وقفہ فراہم کرتا ہے۔background-color: #FFFFFF;
: یہ خاصیت پس منظر کا رنگ سفید (#FFFFFF) پر سیٹ کرتی ہے۔ ھدف شدہ عناصر کے اندر موجود مواد کا پس منظر سفید ہوگا۔line-height: 100%;
: یہ پراپرٹی لائن کی اونچائی کو فونٹ سائز کے 100% پر سیٹ کرتی ہے۔ یہ یقینی بناتا ہے کہ متن کی لکیریں فونٹ کے سائز کے مطابق فاصلہ رکھتی ہیں۔margin: 10px;
: یہ پراپرٹی پورے عنصر کے ارد گرد 10 پکسلز کا مارجن شامل کرتی ہے۔ یہ اس عنصر اور صفحہ پر موجود دیگر عناصر کے درمیان وقفہ فراہم کرتا ہے۔
فراہم کردہ CSS کوڈ کلاس "کوڈ" کے ساتھ HTML پیراگراف کے لیے ایک طرز کی وضاحت کرتا ہے۔ یہ ان پیراگراف کے لیے فونٹ، فونٹ سائز، بارڈر اسٹائل، بارڈر چوڑائی، پیڈنگ، بیک گراؤنڈ کلر، لائن کی اونچائی اور مارجن سیٹ کرتا ہے۔ اس انداز کو بلاگر پوسٹ میں کوڈ کے ٹکڑوں یا پہلے سے فارمیٹ شدہ متن پر لاگو کیا جا سکتا ہے تاکہ انہیں ایک مخصوص شکل دی جا سکے۔
یہ کیسا نظر آئے گا یہاں ہے:
p.code {
font-family: Courier New;
فونٹ سائز: 8pt؛
بارڈر طرز: inset؛
سرحد کی چوڑائی: 3px؛
بھرتی: 5PX؛
پس منظر کا رنگ: #FFFFFF؛
لائن کی اونچائی: 100٪؛
مارجن: 10 px؛
}
کوڈنگ مبارک ہو!