فایل ارائه impress.js نیازی به فایل جداگانه CSS ندارد و میتوان تمام تنظیمات دلخواهتان را به صورت Inline در فایل HTML قرار دهید.اما بهتر است همه این تنظیمات را در یک فایل جداگانه جمع آوری کنید. این کار فایل های شما را کوچک تر می‌کند و اصلاحات بعدی را آسان‌تر می‌نماید.
در اینجا یک نمونه فایل CSS را که درست کرده‌ام به شما نشان می‌دهم.
این فایل شامل ۴ بخش است:
بخش اول: تنظیمات اولیه مرورگر: همه مرورگرها تنظیمات اولیه یکسان ندارند و ممکن است یک فایل HTML واحد را به چند گونه نمایش بدهند برای یکسان سازی این تنظیمات همیشه در ابتدا تنظیمات اولیه خود را تعیین کنید. برای این کار فایل‌های مختلفی تحت عنوان normalize.css وجود دارد که می‌توانید از آنها استفاده کنید. البته من برای تهیه این قسمت از تنظیمات bootstrap استفاده کردم. این بخش نزدیک ۴۰۰ خط شده است.
بخش دوم: تنظیمات اولیه impress.js: در این بخش کلاس ها و تگ هایی که در کتابخانه impress.js استفاده شده تعریف شده و تنظیمات اولیه آن انجام می‌گیرد. این قسمت کمتر از ۱۰۰ خط است.
بخش سوم: تعریف فونت: حتما هر کسی در ارائه خود می‌خواهد از فونت‌های دلخواه خود استفاده کند تعریف و ارائه این فونت‌ها در این بخش صورت می‌گیرد من چند فونت را اینجا معرفی کردم شما می‌توانید از آن الگو بگیرید و فونت‌های دلخواه خود را به آن بیافزایید.
بخش چهارم: تنظیمات مربوط به ارائه: در این قسمت class و id های به کار رفته در ارائه خود را تعریف کرده و تنظیمات آن را مشخص می‌کنیم. این بخش بر خلاف بخش‌های قبل در هر ارائه تغییر می‌کند.
فایل CSS فوق را می توانید از اینجا دانلود کنید.
در مثال زیر از فایل فوق استفاده شده و چند اسلاید با چیدمان‌های متفاوت ارائه شده است.
کلاس slide : یک کادر مستطیل رسم می‌کند و محتوا را در آن نمایش می‌دهد. (همه اسلایدها)
کلاس slide-header : نوار بالای اسلاید برای نمایش عنوان آن اسلاید. (اسلاید دوم به بعد)
کلاس slide-footer : نوار پایین اسلاید برای نمایش زیرنویس آن اسلاید. (اسلاید دوم)
کلاس slide-center : محتوای این کلاس در مرکز اسلاید نمایش داده می‌شود. (اسلاید اول و دوم)
کلاس slide-body : بدنه اصلی اسلاید است که محتوای اصلی در آن قرار می گیرد. (اسلاید سوم به بعد)
کلاس full-panel : داخل کلاس slide-body استفاده می‌شود و کل بدنه اسلاید را به یک ستون با فاصله های مناسب از اطراف تقسیم می‌کند. (اسلاید سوم و پنجم)
کلاس half-panel : داخل کلاس slide-body استفاده می‌شود و کل بدنه اسلاید را به دو ستون مساوی با فاصله های مناسب از اطراف تقسیم می‌کند. (اسلاید چهارم)
متن HTML فایل فوق را اینجا ببینید.
