10 سادہ سی ایس ایس کوڈ کی مثالیں جو آپ 10 منٹ میں سیکھ سکتے ہیں۔

10 سادہ سی ایس ایس کوڈ کی مثالیں جو آپ 10 منٹ میں سیکھ سکتے ہیں۔

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





آپ کے ویب پیج پر سٹائل میں کچھ بنیادی تبدیلیاں لانے کا طریقہ دکھانے کے لیے یہاں کئی سادہ سی ایس ایس مثالیں ہیں۔



1. آسان پیراگراف فارمیٹنگ کے لیے بنیادی CSS کوڈ۔

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





ہم کہتے ہیں کہ آپ ہر پیراگراف چاہتے ہیں (

، HTML ٹیگز میں سے ایک جو ہر ایک کو معلوم ہونا چاہیے) معمول سے قدرے بڑا ہونا۔ اور سیاہ کے بجائے گہرے سرمئی متن کے ساتھ۔

متعلقہ: HTML چیٹ شیٹ۔



اس کے لیے CSS کوڈ یہ ہے:

p { font-size: 120%; color: dimgray; }

سادہ! اب ، جب بھی براؤزر کوئی پیراگراف پیش کرتا ہے ، متن متن کا سائز (عام کا 120 فیصد) اور رنگ ('ڈمگری') کا وارث ہوگا۔



اگر آپ جاننا چاہتے ہیں کہ آپ کون سے سادہ متن کے رنگ استعمال کر سکتے ہیں تو اسے چیک کریں۔ سی ایس ایس رنگ کی فہرست موزیلا سے

2. کریکٹر کیس کو تبدیل کرنے کی سی ایس ایس مثال۔

پیراگراف کے لئے ایک عہدہ بنانا چاہتے ہیں جو چھوٹے کیپس میں ہونا چاہئے؟ اس کے لیے ایک CSS نمونہ یہ ہوگا:



p.smallcaps { font-variant: small-caps; }

ایک پیراگراف بنانے کے لیے جو مکمل طور پر چھوٹی ٹوپی میں ہے ، تھوڑا مختلف HTML ٹیگ استعمال کریں۔ یہاں ایسا لگتا ہے:

Your paragraph here.

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

اگر آپ متن کے ایک سیٹ کو کسی مخصوص کیس میں تبدیل کرنا چاہتے ہیں تو یہ CSS کوڈ مثالیں استعمال کریں:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

آخری ایک ہر جملے کے پہلے حرف کو بڑا کرتا ہے۔

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

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

لنکس کے ساتھ ، ہر 'a' کے بعد بڑی آنت ہوتی ہے ، نقطہ نہیں۔

ان اعلانات میں سے ہر ایک ایک مخصوص سیاق و سباق میں ایک لنک کا رنگ بدلتا ہے۔ رنگ تبدیل کرنے کے لیے لنک کی کلاس تبدیل کرنے کی ضرورت نہیں ہے۔

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

a { text-decoration: none; }

لنک ('a') ٹیگ کے ساتھ کوئی بھی چیز غیر لکھی ہوئی رہے گی۔ جب صارف اس کے اوپر گھومتا ہے تو اسے انڈر لائن کرنا چاہتے ہیں؟ صرف شامل کریں:

a:hover { text-decoration: underline; }

آپ اس ٹیکسٹ ڈیکوریشن کو فعال لنکس میں بھی شامل کر سکتے ہیں تاکہ اس بات کو یقینی بنایا جا سکے کہ جب لنک پر کلک کیا جائے تو انڈر لائن غائب نہ ہو۔

اپنے لنک پر زیادہ توجہ مبذول کرنا چاہتے ہیں؟ ایک لنک بٹن اس کے بارے میں جانے کا ایک بہترین طریقہ ہے۔ اس کے لیے چند مزید سطور درکار ہیں:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

آئیے اس سی ایس ایس نمونہ کوڈ کی وضاحت کریں۔

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

پس منظر کا رنگ پس منظر کے رنگ کے ساتھ ، اور رنگ کے ساتھ متن کا رنگ مقرر کیا گیا ہے۔ پیڈنگ باکس کے سائز کی وضاحت کرتی ہے-

متن کی سیدھ اس بات کو یقینی بناتی ہے کہ متن بٹن کے بیچ میں دکھایا جائے ، بجائے ایک طرف۔ ٹیکسٹ ڈیکوریشن ، جیسا کہ آخری مثال میں ، انڈر لائن کو ہٹا دیتا ہے۔

آئی فون پر اپنے مقام کا اشتراک کیسے کریں

سی ایس ایس کوڈ 'ڈسپلے: ان لائن بلاک' تھوڑا زیادہ پیچیدہ ہے۔ مختصر میں ، یہ آپ کو اعتراض کی اونچائی اور چوڑائی مقرر کرنے دیتا ہے۔ یہ اس بات کو بھی یقینی بناتا ہے کہ داخل ہونے پر یہ ایک نئی لائن شروع کرتا ہے۔

6. ٹیکسٹ باکس بنانے کے لیے سی ایس ایس مثال کا کوڈ۔

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

p.important { border-style: solid; border-width: 5px; border-color: purple; }

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

Your important paragraph here.

یہ کام کرے گا قطع نظر اس کے کہ پیراگراف کتنا ہی بڑا کیوں نہ ہو۔

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

border-width: 5px 8px 3px 9px;

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

7. بنیادی سی ایس ایس کوڈ کے ساتھ عناصر کو سیدھا کریں۔

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

بلاک عنصر (عام طور پر ایک تصویر) کے لیے ، مارجن وصف استعمال کریں:

.center { display: block; margin: auto; }

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

img { margin: auto; }

یہ جاننے کے لیے کہ یہ اس طرح کیوں کام کرتا ہے ، چیک کریں W3C پر CSS باکس ماڈل کی وضاحت۔ .

لیکن اگر آپ CSS کے ساتھ متن کو مرکز بنانا چاہتے ہیں؟ یہ نمونہ سی ایس ایس استعمال کریں:

.centertext { text-align: center; }

پیراگراف میں ٹیکسٹ کو سینٹر ٹیکسٹ کلاس میں استعمال کرنا چاہتے ہیں؟ بس اس کلاس کو شامل کریں

ٹیگ:

This text will be centered.

8. پیڈنگ ایڈجسٹ کرنے کی سی ایس ایس مثالیں۔

کسی عنصر کی پیڈنگ بتاتی ہے کہ ہر طرف کتنی جگہ ہونی چاہیے۔ مثال کے طور پر ، اگر آپ کسی تصویر کے نچلے حصے میں 25 پکسلز بھرتے ہیں ، تو مندرجہ ذیل متن 25 پکسلز نیچے دھکیل دیا جائے گا۔ بہت سے عناصر میں پیڈنگ ہو سکتی ہے ، نہ کہ صرف تصاویر۔

ہم کہتے ہیں کہ آپ چاہتے ہیں کہ ہر تصویر میں بائیں اور دائیں جانب 20 پکسلز پیڈنگ ہو ، اور اوپر اور نیچے 40 پکسلز ہوں۔ اس کے لیے سب سے بنیادی CSS کوڈ پر عمل درآمد یہ ہے:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

سی ایس ایس کی ایک چھوٹی سی ہدایات ہے ، تاہم ، جو یہ ساری معلومات ایک ہی لائن میں پیش کرتی ہے۔

img { padding: 40px 25px 40px 25px; }

یہ اوپر ، دائیں ، نیچے اور بائیں پیڈنگ کو دائیں نمبر پر سیٹ کرتا ہے۔ صرف دو اقدار کے استعمال کی بدولت (40 اور 25) آپ اسے مزید چھوٹا بنا سکتے ہیں:

img { padding: 40px 25px }

جب آپ صرف دو اقدار استعمال کرتے ہیں ، پہلی قدر اوپر اور نیچے کے لیے مقرر کی جاتی ہے ، جبکہ دوسری بائیں اور دائیں ہوگی۔

9. سی ایس ایس کوڈنگ کے ساتھ ٹیبل کی قطار کو نمایاں کریں۔

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

tr:hover { background-color: #ddd; }

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

10. شفاف اور مبہم کے درمیان تصاویر کی تبدیلی کے لیے سی ایس ایس کی مثال۔

سی ایس ایس کوڈ آپ کو تصاویر کے ساتھ ٹھنڈی چیزیں کرنے میں بھی مدد کر سکتا ہے۔ مکمل دھندلاپن سے کم پر تصاویر دکھانے کے لیے یہ ایک سی ایس ایس مثال ہے ، لہذا وہ قدرے 'وائٹ آؤٹ' دکھائی دیتی ہیں۔ جب آپ تصاویر پر ماؤس کرتے ہیں ، تو وہ مکمل دھندلاپن میں لائے جاتے ہیں:

img { opacity: 0.5; filter: alpha(opacity=50); }

'فلٹر' وصف 'دھندلاپن' کی طرح کام کرتا ہے ، لیکن انٹرنیٹ ایکسپلورر 8 اور اس سے پہلے کی دھندلاپن کی پیمائش کو نہیں پہچانتا۔ پرانے براؤزرز کے لیے ، اسے شامل کرنا اچھا خیال ہے۔

اب جب کہ تصاویر قدرے شفاف ہیں ، آپ انہیں ماؤس اوور پر مکمل طور پر مبہم بنا سکتے ہیں۔

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

سورس کوڈ کے ساتھ 10 سی ایس ایس مثالیں۔

ان CSS کوڈ مثالوں کے ساتھ ، آپ کو CSS کیسے کام کرتا ہے اس کا بہتر اندازہ ہونا چاہیے۔ سی ایس ایس ٹیمپلیٹس۔ مدد کر سکتا ہے ، لیکن خام عناصر کو سمجھنا ضروری ہے۔

وہ 10 آسان سی ایس ایس کوڈ مثالیں دوبارہ حاصل کی گئیں:

  1. آسان پیراگراف فارمیٹنگ۔
  2. خط کا کیس تبدیل کریں۔
  3. لنک کا رنگ تبدیل کریں۔
  4. لنک کی لکیریں ہٹا دیں۔
  5. لنک کا بٹن بنائیں۔
  6. ایک ٹیکسٹ باکس بنائیں۔
  7. مرکز کو سیدھ میں لانے والے عناصر۔
  8. بھرتی کو ایڈجسٹ کریں۔
  9. ٹیبل کی قطاریں نمایاں کریں۔
  10. تصاویر کو مبہم بنائیں۔

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

بانٹیں بانٹیں ٹویٹ ای میل۔ ضروری CSS3 پراپرٹیز چیٹ شیٹ۔

ہماری CSS3 پراپرٹیز چیٹ شیٹ کے ساتھ ضروری CSS نحو پر عبور حاصل کریں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔
  • پروگرامنگ۔
  • ویب ڈیزائن
  • سی ایس ایس
  • اسکرپٹنگ۔
مصنف کے بارے میں کرسچن کاولی۔(1510 مضامین شائع ہوئے)

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

کرسچن کاولی سے مزید

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

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

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