سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف تعیین کنید. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری رنگ دیده شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.
برای تعیین CSS صفحه در حالت عادی که همان نمایش صفحه در مرورگر است ، بصورت زیر فایل CSS را در فایل HTML خود لینک میکنیم :
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
فایل فوق به ازای کلیه دستگاه ها لود میشود. اما اگر میخواهید به هر دستگاه (مرورگر، پرینتر، موبایل) یک فایل CSS جدا نسبت دهید، از کدهای جدایی بصورت زیر باید استفاده کنید:
برای نمایش توسط مرورگر : <link href="styles1.css" rel="stylesheet" type="text/css" media="screen" /> برای نمایش هنگام پرینت کردن صفحه : <link href="styles2.css" rel="stylesheet" type="text/css" media="print" /> برای نمایش صفحه در انواع PDA : <link href="styles3.css" rel="stylesheet" type="text/css" media="handheld" />
شما میتوانید هر3 خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند.