کلاس‌های HTML

HTML کو زمرہ بندی کرسکتا ہے (کلاس سیٹ کرتا ہے)، تاکہ ہم عناصر کی کلاس کیلئے CSS سٹائل کا تعریف کرسکیں.

ایک ہی کلاس کیلئے ایک ہی سٹائل سیٹ کرسکتا ہے، یا مختلف کلاسوں کیلئے مختلف سٹائل سیٹ کرسکتا ہے.

مثال

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    پس منظر رنگ:سیاہ;
    رنگ:سفید;
    مارگن:20پیکسلس;
    پیدائش:20پیکسلس;
} 
</style>
</head>
<body>
<div class="cities">
<h2>لندن</h2>
<p>
لندن انگلستان کی راجدشهر ہے. 
این بزرگترین شهر در بریتانیا است, 
13 ملین سے زیادہ آبادی کے شہری علاقے کے ساتھ.
</p>
</div> 
</body>
</html>

آزمایش کنید

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

HTML <div> عنصربلاک یونٹ۔ یہ دیگر HTML عناصر کا کانٹینر کے طور پر استعمال کیا جاسکتا ہے。

ما کلاس کو <div> عناصر کی کلاس میں سیٹ کرتا ہے، تاکہ ہم ایک سے ایک <div> عناصر کی کلاس کو سیٹ کرسکیں:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    پس منظر رنگ:سیاہ;
    رنگ:سفید;
    مارگن:20پیکسلس;
    پیدائش:20پیکسلس;
} 
</style>
</head>
<body>
<div class="cities">
<h2>لندن</h2>
<p>لندن پریسٹون انگلستان کی راجدشهر ہے. 
این بزرگترین شهر در بریتانیا است, 
با یک ناحیه شهری بیش از ۱۳ میلیون جمعیت.</p>
</div>
<div class="cities">
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="cities">
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن و مرکز ناحیه بزرگ توکیو است,</p>
و بزرگترین ناحیه شهری در جهان.</p>
</div>
</body>
</html>

آزمایش کنید

عناصر خطی دسته‌بندی شده

عنصر <span> HTML یک عنصر خطی است و می‌تواند به عنوان یک قالب برای متن استفاده شود.

تنظیم کلاس <span> عناصر، امکان تنظیم استایل مشابه برای عناصر <span> مشابه را فراهم می‌کند.

مثال

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

آزمایش کنید