আমরা অন্য একটি CSS ডিক্লেরেশনের ভিতরে অতিরিক্ত CSS ফাইল ইম্পোর্ট করতে পারি। এই উদ্দেশ্যে @import নিয়মটি ব্যবহৃত হয় কারণ এটি একটি ডকুমেন্টে স্টাইলশিট লিঙ্ক করে। এটি সাধারণত তখন ব্যবহৃত হয় যখন একটি স্টাইলশিট অন্যের ওপর নির্ভরশীল। এটি <head> ভিতরে @charset ডিক্লেরেশনের পর শীর্ষে নির্দিষ্ট করা হয়।
সিনট্যাক্স
@import নিয়মের সিনট্যাক্স নিম্নরূপ:
@import /*url or list-of-media-queries*/
মিডিয়া কোয়ারিজ কম্পাউন্ড স্টেটমেন্ট হতে পারে যা বিভিন্ন মিডিয়ায় ডকুমেন্টের আচরণ নির্দিষ্ট করতে পারে।
উদাহরণ
নিচের উদাহরণগুলো @import নিয়ম বাস্তবায়ন করে:
HTML ডকুমেন্ট
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(style.css); body { background-color: honeydew; } </style> </head> <body> <p>This is demo paragraph one. </p> <p class="two">This is demo paragraph two.</p> <p>This is demo paragraph three</p> </body> </html>
CSS ডকুমেন্ট: style.css
p { color: navy; font-style: italic; } .two { color: darkgreen; font-size: 24px; }
আউটপুট
এটি নিচের আউটপুট তৈরি করে:
আরেকটি উদাহরণ
HTML ডকুমেন্ট -
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div></div> </body> </html>
CSS ডকুমেন্ট
div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid blueviolet; box-shadow: 22px 12px 3px 3px lightblue; position: absolute; left: 30%; top: 20px; }
আউটপুট
এটি নিচের আউটপুট দেয়:
