تگ‌های Inline محدودیت‌هایی در زمینه style-دهی به ما می‌دهند:
- رنگ‌ها (شامل متن و پس‌زمینه آن)
- تنظیمات مربوط به font (size، font family، و سایر تنظیمات مربوط به این دسته از جمله خط زیر متن و ... .)
این در حالی است که با در برخورد با تگ block-level دست ما بسیار بازتر خواهد بود:
- مشخص کردن عرض و ارتفاعی مشخص به block تعریف شده برای یک بخش
- قرار دادن افکت padding برای جلوگیری از برخورد متن با کناره‌های block تعریف شده
- منتقل کردن یک block به هر کجای صفحه وب که در نظر داریم، فارغ از جا و مکان مشخص شده برای آن در markup ما
در آغاز نگاهی می‌اندازیم به چگونگی تغییر حالت و اندازه یک block در بر دارنده محتوا. بهتر است بدانید به صورت پیش‌فرض یک تگِ block-level تمامی عرض و ارتفاع در دسترس را اشغال می‌کند و مهم نیست اندازه تگِ دربر دارنده آن چگونه تنظیم شده باشد. در صورت تمایل می‌توانیم این تنظیم پیش‌فرض را تغییر دهیم.
تعیین عرضِ فضای در دسترس برای محتوا
تصور کنید محتوای شما از تعداد زیادی پاراگراف تشکیل شده باشد و می‌خواهید نگاه کاربر را به بخش مهمی از آن‌ها جذب کنید. می‌توان از تغییر font و افزودن حالت bold نیز استفاده کرد اما تغییر عرض نیز گزینه‌ای دیگر برای شما خواهد بود، در این صورت شما می‌توانید حالت پیش‌فرض را تغییر دهید.
.attentiongrab {
width: 50%;
font-weight: bold;
}
در این‌جا از یک class selector استفاده کردیم، در فصل قبل به تفصیل در این رابطه صحبت کرده بودیم، اگر به خاطر داشته باشید با استفاده از آن از این تنظیمات جدید می‌توان به هر تعدادی که در نظر داریم استفاده کنیم. CSS بالا را در مثال HTML پایین به خوبی خواهید دید:
<p>We've stayed in quite a few caravan parks and camp sites over
the last couple of months, and I've started to notice a few
things that seem to suggest that there are some unwritten
rules of staying at these places. Unwritten until now, that
is.</p>
<p>Everyone else on site will be better prepared and better
equipped than you. It's a fact. No matter what extras you
might carry, someone a couple of plots down will still have
more. Utensil envy is rife.</p>
<p class="attentiongrab">When you first park, the distance
between the power supply and your van's power socket will be
precisely 2 inches longer than the inadequate power lead that
you own.</p>
<p>On the hottest evenings, you will be parked next to someone
with a very flashy van that's equipped with an air-con unit.
It will be facing you, blowing out hot air and taunting you
with its efficient hum.</p>
عکس 4.2 به خوبی نحوه نمایش کد بالا را به صورت کاهش عرض یک پاراگراف به میزان 50% نسبت به پاراگراف‌های دیگر نشان می‌دهد.
.jpg)
