چنانچه بخواهیم صفحاتی از وب که با زبان اچ تی ام ال نوشته می شوند را با مثالی از دنیای واقعی مقایسه کنیم به نظر می رسد که بهترین مثال یک ساختمان است. در واقع زمانی که یک ساختمان می سازیم، چارچوب اصلی ساختمان جایگاه در، پنجره ها، اتاق ها و ... را مشخص می سازد اما این در حالی است که اگر صرفاً به سازه ساختمان اکتفا کنیم ساختمانی خواهیم داشت که از هرگونه زیبایی ظاهری عاری است:
به عبارت دیگر وقتی وارد اتاقی شویم آجرهای سازنده ساختمان را مشاهده خواهیم کرد. در و پنجره ها اگرچه که از ساختمان مواقبت می کنند اما این در حالی است که رنگ نشده اند و اصلا زیبا نیستند. حال برای آنکه ساختمان ما زیبا تر به نظر برسد، نمای ساختمان را سنگ می کنیم، دیوارها را ابتدا گچ کاری کرده سپس رنگ می کنیم و در کل هر آنچه که به زیباتر شدن ساختمان کمک کند را در اختیار خواهیم گرفت:
در مورد زبان اچ تی ام ال هم قضیه به همین صورت است. در واقع با استفاده از اچ تی ام ال فقط می توانیم متون را روی یک صفحه مرورگر وب به نمایش در آوریم بدون آنکه رنگ و اندازه و شکل خاصی برای متون، جداول، فرم ها، منوها و ... بتوانیم در نظر بگیریم. چیزی که در اینجا به کمک ما می آید CSS است که مخفف واژگان Cascading Style Sheet است. الگوهای آبشاری یا همان سی اس اس ها در کنار زبان اچ تی ام ال این امکان را به برنامه نویس یا طراح وب می دهند تا بتواند چیدمان، رنگ، اندازه، نوع فونت و بسیاری از امکانات دیگر را در مورد عناصر اچ تی ام ال اعمال کند و بالتبع صفحات به مراتب زیباتری نسبت به صفحاتی که صرفاً با زبان اچ تی ام ال طراحی می شوند را ایجاد کند. برای آنکه به اهمیت سی اس اس در طراحی وب بیشتر پی ببریم در ادامه یک صفحه اچ تی ام ال ساده را خواهیم دید که به هیچ وجه سی اس اس در آن استفاده نشده است:
می بینیم که متون به خوبی نمایش داده شده اند اما اصلا زیبا به نظر نمی رسند. حال با استفاده از کمی کدهای سی اس اس سعی می کنیم که صفحه را کمی زیباتر جلوه دهیم:
می بینیم که فقط با استفاده از 5 دستور ساده سی اس اس صفحه وب ما چقدر زیباتر به نظر می رسد.
لازم به ذکر است که در این دوره آموزشی تکنیک های کاربردی سی اس اس نیز به منظور بهینه کردن ظاهر صفحات وب نیز مورد بررسی دقیق قرار خواهند گرفت.