CSS رنگ ! پس منظر اور باکس ماڈل ۔ لیکچر 7

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

Table of Contents

متن کا رنگ (Text Color)

color پراپرٹی کا استعمال متن کا رنگ متعین کرنے کے لیے کیا جاتا ہے۔

پس منظر کا رنگ (Background Color)

background-color پراپرٹی کا استعمال کسی عنصر کے پس منظر کا رنگ متعین کرنے کے لیے کیا جاتا ہے۔

}
.highlight-box
Specificity: (0,1,0)
 {
    background-color: lightblue;
    color: darkslategray;
    padding: 20px;
    border: 1px solid blue;
}

user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

<div class="highlight-box">
        <p>اس باکس کا پس منظر ہلکا نیلا ہے اور متن گہرا سلیٹ گرے ہے۔</p>
    </div>

پس منظر کی تصویر (Background Image)

background-image پراپرٹی کا استعمال کسی عنصر کے لیے پس منظر کی تصویر متعین کرنے کے لیے کیا جاتا ہے۔

.image-background {
    background-image: url(https://via.placeholder.com/300/CCCCCC/808080?text=پس+منظر);
    color: white;
    padding: 30px;
    text-align: center;
}

<div class="image-background">
        <p>اس حصے میں پس منظر کی تصویر ہے۔</p>
    </div>

CSS باکس ماڈل

باکس ماڈل کیا ہے؟

CSS میں تمام HTML عناصر کو باکس کے طور پر سمجھا جا سکتا ہے۔ باکس ماڈل اس بات کی وضاحت کرتا ہے کہ یہ باکس کیسے بنائے جاتے ہیں۔ یہ چار حصوں پر مشتمل ہے:

مواد (Content): باکس کا مواد، جہاں متن اور تصاویر ظاہر ہوتی ہیں۔
پیڈنگ (Padding): مواد کے ارد گرد ایک شفاف علاقہ۔
بارڈر (Border): پیڈنگ اور مواد کے ارد گرد ایک بارڈر۔
مارجن (Margin): بارڈر کے باہر ایک شفاف علاقہ۔

باکس ماڈل کی ایک مثال

.box-model-example {
    width: 300px; /* مواد کی چوڑائی */
    background-color: lightgreen;
    border: 15px solid navy; /* بارڈر */
    padding: 50px; /* پیڈنگ */
    margin: 20px; /* مارجن */
}

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

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