اردو میں جدید کوڈنگ زبان ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا یہ آٹھواں لیچکچر ہے ۔ یہ لیکچر انتہائی آسان زبان اور آسانی سے سمجھ میں آنے والی کوڈنگ میں لکھا گیا ہے ۔ اس زبان کو ایک نو دس سال کا بچہ بھی آسانی سے سمجھ سکتا ہے ۔۔ تو آئیے شروع کرتے ہیں آج کا آٹھواں لیکچر ۔CSS رنگ ! پس منظر اور باکس ماڈل
ٹائپوگرافی کی خصوصیات
CSS آپ کو متن کی ظاہری شکل کو کنٹرول کرنے کے لیے بہت سی خصوصیات فراہم کرتا ہے۔
font-family: متن کے لیے فونٹ کی قسم متعین کرتا ہے۔font-size: متن کا سائز متعین کرتا ہے۔font-weight: متن کی موٹائی متعین کرتا ہے (مثلاً, bold)۔text-align: متن کی افقی ترتیب متعین کرتا ہے (مثلاً, center)۔line-height: لائنوں کے درمیان فاصلہ متعین کرتا ہے۔text-transform: حروف کو بڑا یا چھوٹا کرنے کے لیے استعمال ہوتا ہے۔
element.style {
}
.custom-text {
font-size: 20px;
font-weight: bold;
line-height: 1.6;
text-transform: uppercase;
}
user agent stylesheet
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
}
body {
font-family: 'Georgia', serif;
}<p class="custom-text">یہ ایک اپنی مرضی کے مطابق اسٹائل شدہ متن ہے۔ اس کا فونٹ سائز بڑا، وزن بولڈ، اور حروف بڑے ہیں۔</p>
CSS لنکس اور بٹن
لنکس کو اسٹائل کرنا
لنکس کو ان کی حالت کی بنیاد پر اسٹائل کیا جا سکتا ہے:
:link– ایک عام، غیر وزٹ شدہ لنک:visited– ایک لنک جسے صارف نے وزٹ کیا ہے:hover– جب صارف اس پر ماؤس لاتا ہے:active– جس لمحے لنک پر کلک کیا جاتا ہے
element.style {
}
a:visited {
color: purple;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}<a href="#">یہ ایک اسٹائل شدہ لنک ہے</a>بٹن کو اسٹائل کرنا
آپ کسی بھی عنصر کو بٹن کی طرح دکھا سکتے ہیں، لیکن عام طور پر <button> یا <a> ٹیگ استعمال ہوتا ہے۔
.custom-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s;
}<button class="custom-button">یہ ایک بٹن ہے</button>