CSS چیست؟

CSS مخفف شده Cascading Style Sheet، به معنی شیوه نامه های آبشاری است. در اصل CSS یک توسعه برای زبان HTML است که به ما این امکان را می دهد محتوای صفحات وب را سبک دهی کنیم؛ به عبارت دیگر CSS تکمیل کننده زبان اچ تی ام ال است.
مثلا فرض کنیم که یک متن را می خواهیم به صورت برجسته (Bold) بنویسیم، یعنی سبک نمایش آن را تغییر دهیم. در برنامه نویسی استاندارد به زبان HTML برای این کار متن مورد نظر خود را بین تگ های <b> و </b> قرار می دهیم. این تگهای آغازین و پایانی باعث می شوند متنی که دربین آنها قرار گرفته است، در مرورگر به صورت برجسته نمایش داده شود:

<b>
این متن به صورت برجسته (Bold) نمایش داده می شود.
</b>

این روش به خوبی جواب می دهد و شما می توانید در هر قسمت از متن صفحه مورد نظر خود با استفاده از این تگهای آغازین و پایانی، متن را به صورت برجسته نمایش دهید. اما تصور کنید که بنا به هر دلیلی می خواهید همه متنهایی که به صورت برجسته نوشته شده اند را به صورت زیرخط دار تبدیل کنید! اگر از تگ های اچ تی ام ال استفاده کرده باشید، باید به سراغ تک تک کدهای خود بروید و آنها را جداگانه تغییر دهید – که البته این فرایند خیلی وقت گیر خواهد بود. اما مشکل فقط به همین جا ختم نمی شود؛ مثلا فرض کنید که می خواهید تغییرات دیگری در همان متن برجسته شده (بلد شده) اعمال کنید، مثلا فونت آن را تغییر دهید، اندازه فونت را افزایش یا کاهش دهید، رنگ متن را تغییر دهید و چیزهایی شبیه به این، همه این کارها را می توان با استفاده از تگ های اچ تی ام ال انجام داد، اما ناچارید برای هر قسمتی از متن که می خواهید این سبک را به آن اعمال کنید همان کدهای طولانی را تکرار کنید و کدهای قبلی را تک به تک ویرایش کنید، که البته اگر بعدا تصمیم بگیرید که این سبک ها را تغییر دهید، کارتان چندین برابر خواهد شد.
در اصل زبان اچ تی ام ال برای این ایجاد نشده است که شامل تگهایی برای ساختاردهی محتوای صفحات وب باشد. از زبان اچ تی ام ال برای توصیف هر قسمت از محتوای صفحه استفاده می شود. یعنی مشخص می کنیم که مثلا قسمتی از محتوا به صورت پاراگراف باشد، قسمتی به صورت سرتیتر، قسمتی به صورت جدول و ... . تگهایی مثل <font> و یا ویژگی هایی مثل color که از نسخه 3.2 به بعد اچ تی ام ال اضافه شدند، در حقیقت دردسرهای بزرگی را برای طراحان وب ایجاد کردند! چون اگر قرار باشد همیشه از چنین تگها یا ویژگی هایی در داخل صفحات وب طراحی شده استفاده کنیم، همانطور که پیشتر نیز اشاره شد، در هنگام ویرایش محتوای صفحات، مجبوریم تک تک این تگها یا ویژگی ها را جداگانه اصلاح کنیم. CSS نیز در اصل برای حل این مشکل بوجود آمد:

<fontcolor="#FF0000"face="Verdana, Arial,  Helvetica, sans-serif">
<strong>متن مورد نظر</strong></font>

کد نویسی به سبک بالا بسیار طولانی و وقت گیر است و از طرف دیگر ظاهر کدهای ما را بسیار آشفته و پیچیده خواهد کرد و در آینده، در هنگام ویرایش کدها، با مشکل مواجه خواهیم شد. اما با استفاده از CSS می توانیم در هر جایی که دوست داشتیم سبک مورد نظر خود را ایجاد کنید (به صورت فایلی جدا از فایل اچ تی ام ال) و تمام ویژگی های مورد نظر خود را تعریف کرده و یک نام منحصر به فرد، مطابق نظر خودمان به آن بدهیم و سپس تگ یا تگ های اچ تی ام ال مورد نظر خود را با سبکی که ایجاد کرده ایم برچسب دهی کنیم تا ویژگی های مورد نظرمان به آن قسمت از محتوا اعمال شود (روش انجام این کار در مباحث بعدی آموزش داده خواهد شد):

<pclass="myNewStyle">کلاس تعریف شده در قسمت css به این متن اعمال می شود text</p>

در پروژه های کوچک و صفحات کوچک که محتوای زیادی ندارند می توانید کدهای CSS خود را در قسمت بالای صفحه قرار دهید (در داخل فایل اچ تی ام ال)، اما در پروژه های بزرگ و در وب سایتهایی که تعداد زیادی صفحات مختلف دارند، می توانید – و البته بهتر است – کدهای CSS را به صورت جداگانه درون فایلهایی با پسوند .css ایجاد کنید و در قسمت بالای صفحه اچ تی ام ال خود مانند مثال زیر، فایل مورد نظر خود را وارد کنید تا از محتوای آن(ها) برای سبک دهی صفحات مورد نظر خود استفاده نمایید:

<linkhref="myFirstStyleSheet.css"rel="stylesheet"type="text/css">

بنابر این به طور خلاصه باید گفت با استفاده از CSS سبک نمایش محتوای صفحات اچ تی ام ال را تعیین می کنیم؛ و مشخص می کنیم که عناصر اچ تی ام ال در داخل صفحه ما به چه صورت نمایش داده شوند. در حقیقت با استفاده از CSS می توانیم ساختار صفحه بندی چندین صفحه را در یک مرحله انجام دهیم و فرایند شکل دهی ظاهری محتوای صفحات وب را به صورت سازمان یافته و متمرکز انجام دهیم. یکی از مهم ترین ویژگی های CSS این است که به ما کمک می کند فرایند طراحی ظاهری صفحات سایت را از محتوا جدا کنیم. این کار باعث می شود فرایند نگهداری صفحات سایت و تغییر ظاهری محتوا از پیچیدگی بسیار کمتری برخوردار باشد و از طرف دیگر استفاده از CSS به ما کمک می کند یکپارچگی ظاهری صفحات وب سایتمان را (این صفحات می توانند صدها یا هزارها صفحه باشند) به راحتی حفظ کنیم؛ چرا که برای این کار فقط باید محتوای یک فایل CSS (یا تعداد محدودی از فایل های CSS) را دستکاری کنیم.