سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف تعیین کنید. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری رنگ دیده شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.

برای تعیین CSS صفحه در حالت عادی که همان نمایش صفحه در مرورگر است ، بصورت زیر فایل CSS را در فایل HTML خود لینک میکنیم :

<link href=”styles.css” rel=”stylesheet” type=”text/css” media=”all” />

همانطور که شما در کد بالا تعیین کرده اید، این فایل CSS به ازای تمامی رسانه هایی که صفحه ی شما را ببینند ، لود میشود. اما اگر بخواهید به ازای هر رسانه (مانند مرورگر ، دستگاه های PDA و پرینترها) فایل های استایل متفاوتی استفاده شوند باید از کدهای زیر استفاده کنید

برای نمایش توسط مرورگر :<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” />شما میتوانید هر۳ خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند.

کاربرد کوچکی از این موضوع : مثلا شما میتوانید class مربوط به ستون تبلیغات را در فایلهای css پرینت و css کامپیوترهای جیبی ، بصورت Display:none تعریف کنید تا در هنگام پرینت از روی مقالات سایت شما ، تبلیغات دیگه پرینت نشه.