CSS سیوڈو کلاسز اور لیکچرز کا جائزہ ۔ لیکچر 10

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

Table of Contents

سیوڈو کلاس کیا ہے؟

ایک سیوڈو کلاس کا استعمال کسی عنصر کی ایک خاص حالت کی وضاحت کے لیے کیا جاتا ہے۔

مثال کے طور پر، یہ ہو سکتا ہے:

 <style>
        /* ماؤس ہوور پر لنک کا رنگ تبدیل کریں */
        a:hover {
            color: hotpink;
        }

        /* پہلے پیراگراف کا فونٹ سائز تبدیل کریں */
        p:first-child {
            font-size: 1.2em;
            font-weight: bold;
        }

        /* ہر دوسرے فہرست آئٹم کا پس منظر تبدیل کریں */
        li:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>

<ul>
        <li>جب صارف اس پر ماؤس لاتا ہے تو عنصر کو اسٹائل کریں۔</li>
        <li>وزٹ شدہ اور غیر وزٹ شدہ لنکس کو مختلف طریقے سے اسٹائل کریں۔</li>
        <li>جب عنصر فوکس حاصل کرتا ہے تو اسے اسٹائل کریں۔</li>
    </ul>

مثالیں

<a href="#">اس لنک پر ماؤس لائیں</a>

<div>
        <p>یہ پہلا پیراگراف ہے۔</p>
        <p>یہ دوسرا پیراگراف ہے۔</p>
    </div>

<ul>
        <li>پہلا آئٹم</li>
        <li>دوسرا آئٹم</li>
        <li>تیسرا آئٹم</li>
        <li>چوتھا آئٹم</li>
    </ul>

پچھلے لیکچرز کا جائزہ

اب تک ہم نے کیا سیکھا؟

CSS کا تعارف (ان لائن، اندرونی، بیرونی)
سلیکٹرز (عنصر، کلاس، آئی ڈی)
رنگ اور پس منظر
باکس ماڈل (مارجن، بارڈر، پیڈنگ)
ٹائپوگرافی (فونٹ، متن)
لنکس اور بٹن
ڈسپلے پراپرٹی
پوزیشن پراپرٹی
سیوڈو کلاسز

مشق: اپنے پورٹ فولیو پیج کو اسٹائل کریں

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

اردو میں تمام لیکچرز کی فہرست

انگلش زبان میں لیکچر پی کے بلاگ پر دیکھیں