در اینجا با اشاره به یک موضوع کلی ، دلیل استفاده از CSS را بیان می کنیم :

همانطور که می دانید صفحات HTML ، از عناصر مختلفی مثل پاراگراف ، جداول ، عنوان ها و … غیره تشکیل شده اند . امروزه صفحات وب از حالت ساده و یکنواخت خارج شده و طراحان سعی می کنند تا با استفاده از جلوه های تصویری مثل استفاده از رنگ های مختلف ، حالت های نمایش گوناگون و … به جذابیت و زیبایی صفحات بیافزایند .
فرض کنید که ما در صفحات یک وب سایت ، یکسری عنوان ها ، پارگراف ها و جداول داریم که این عناصر در بیشتر صفحات تکرار شده و دارای ویژگی های یکسانی هستند . به طور مثال برخی از عنوان ها رنگ سبز داشته ، یا بعضی از پاراگراف ها دارای نوع و اندازه خاصی از Font هستند و یا جداول دارای پس زمینه رنگی هستند . در اینجا ۲ راه حل جهت تعیین خواص برای این عناصر وجود دارد :

  1. در درون هر صفحه ، خواص مشترک را در تمام صفحات و در درون تگ های مورد نظر به صورت تکی تعیین کنیم ، که این مسئله چند اشکال دارد :
    • باعث تکرار شدن خواص مشترک عناصر در تمام صفحات و تگ های مورد نظر می شود .
    • حجم کد نویسی بالا رفته و احتمال خطا افزایش می یابد .
    • سرعت طراحی صفحات بسیار کاهش می یابد .
    • اعمال تغییرات به عناصر بسیار وقت گیر بوده و کار زیادی را می طلبد .
  2. ما ابتدا عناصر با خواص مشابه را بر حسب id و class آنها ، در گروه های یکسان قرار می دهیم . سپس در یک فایل Style بیرونی و یا در تگ Style در بخش Head صفحه ، خواص و ویژگی های مشترک را در یکجا برای همه آن گروه ها تعریف کرده و سپس هر یک از عناصر را به گروه مورد نظر ارتباط می دهیم . برای آشنایی با روش دسته بندی و ارتباط عناصر در CSS ، به بخش آموزش تگ < style > در HTML بروید .
    انجام روش دوم ، اشکالات روش اول را برطرف کرده و باعث می شود تا :

    • خواص مشابه در عناصر و تگ ها تکرار نشود .
    • حجم کد نویسی کاهش یافته و احتمال خطا کمتر می شود .
    • سرعت طراحی صفحات افزایش می یابد .
    • اعمال تغییرات به صفحات بسیار سریع و راحت صورت می گیرد .