What is CSS?

CSS نمایش اختصاری عبارت Cascading Style Sheet می‌باشد که عموما از آن به‌عنوان زبان اصلی قالب‌بندی و استایل‌دهی صفحات وب و همچنین اسناد HTML، XML و ... استفاده می‌شود.

طراحی زبان HTML در ابتدا به‌گونه‌ای بود که به تنهایی تمامی اطلاعات مرتبط با پیکربندی و استایل‌دهی را شامل می‌شد، که البته خیلی زود منطق استفاده از فایل جداگانه برای هریک در دو لایه: 1. محتویات سند (لایه پیکربندی) 2. خصوصیات بصری (لایه استایل‌دهی، که پیاده‌سازی آن به‌وسیله CSS می‌باشد) جایگزین شد؛ وجود تگ‌های منسوخ شده‌ مانند تگ font در اسناد HTML که کاربرد آن صرفا تغییر فونت، رنگ و اندازه متون می‌باشد (چنین مواردی امروزه به‌وسیله CSS اعمال می‌شود)، بیانگر همین موضوع است. تفکیک لایه قالب‌بندی از استایل‌دهی سبب می‌شود تا طراح یا توسعه‌دهنده قابلیت استفاده مجدد از الگوها (قوانین) CSS را در سرتاسر سند مربوطه و حتی مابین چندین فایل جداگانه داشته باشد. در ادامه قطعه‌کدی برای درک کامل‌تر موارد گفته‌شده آورده شده، اگر از نتیجه اعمال این قطعه‌کد مطمئن نیستید جای هیچ نگرانی نیست چراکه تمامی جوانب زبان CSS در این مقالات توضیح داده‌شده است.

استایل‌دهی متون به شیوه منسوخ، استفاده از HTML به تنهایی:

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

رویکردی مدرن به کمک CSS:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Notice how I simply re-use the same set of rules across several HTML tags. This is already an advantage when using it three times, like we do in the example, but it doesn't end there - put the CSS in an external stylesheet file (more on that later) and you can use the same rules across your ENTIRE website. And how about when you decide that highlighted text should be red instead of blue? With the first approach, you would have to manually edit the tags everywhere you used it - with CSS, just change the single ".highlight" rule!

Summary

CSS allows you to easily apply rules about formatting and layout to your HTML elements and then re-use those rules across multiple elements and even pages. In this introduction, we looked at some CSS code, but we did not talk about how it works and why it looks the way it does - this will be the subject for the next couple of chapters, where we start from scratch and explain it all in details.