ব্লগার: আপনার ব্লগে কোডের জন্য CSS শৈলী
একজন বন্ধু আমাকে জিজ্ঞাসা করেছিল কিভাবে আমি ব্লগার এন্ট্রিতে কোড অঞ্চল তৈরি করেছি। আমি আমার ব্লগার টেমপ্লেটে CSS এর জন্য একটি স্টাইল ট্যাগ ব্যবহার করে এটি করেছি। আমি যা যোগ করেছি তা এখানে:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: এটি একটি CSS নিয়ম যা HTML কে লক্ষ্য করে<p>
ক্লাস নাম "কোড" সহ উপাদান। এর মানে হল যে এই শ্রেণীর সাথে যেকোনো অনুচ্ছেদ নিম্নলিখিত বৈশিষ্ট্য অনুযায়ী স্টাইল করা হবে।font-family: Courier New;
: এই প্রপার্টি ফন্ট ফ্যামিলিকে "কুরিয়ার নিউ" এ সেট করে। এটি লক্ষ্যযুক্ত উপাদানগুলির মধ্যে পাঠ্যের জন্য ব্যবহৃত ফন্টটি নির্দিষ্ট করে।font-size: 8pt;
: এই বৈশিষ্ট্যটি ফন্টের আকার 8 পয়েন্টে সেট করে। লক্ষ্যযুক্ত উপাদানগুলির মধ্যে পাঠ্য এই ফন্ট আকারে প্রদর্শিত হবে।border-style: inset;
: এই বৈশিষ্ট্যটি সীমানা শৈলীকে "ইনসেট" এ সেট করে। এটি লক্ষ্যযুক্ত উপাদানগুলির চারপাশে সীমান্তের জন্য একটি ডুবে যাওয়া বা চাপা চেহারা তৈরি করে।border-width: 3px;
: এই বৈশিষ্ট্যটি সীমানা প্রস্থ 3 পিক্সেল সেট করে। উপাদানগুলির চারপাশে সীমানা 3 পিক্সেল পুরু হবে।padding: 5px;
: এই প্রপার্টি টার্গেট করা উপাদানের ভিতরে কন্টেন্টের চারপাশে 5 পিক্সেল প্যাডিং যোগ করে। এটি পাঠ্য এবং সীমানার মধ্যে ব্যবধান প্রদান করে।background-color: #FFFFFF;
: এই বৈশিষ্ট্যটি ব্যাকগ্রাউন্ডের রঙ সাদাতে সেট করে (#FFFFFF)। লক্ষ্যবস্তু উপাদানগুলির মধ্যে একটি সাদা পটভূমি থাকবে৷line-height: 100%;
: এই বৈশিষ্ট্যটি লাইনের উচ্চতা ফন্টের আকারের 100% নির্ধারণ করে। এটি নিশ্চিত করে যে পাঠ্য লাইনগুলি ফন্টের আকার অনুসারে ব্যবধান করা হয়েছে।margin: 10px;
: এই বৈশিষ্ট্যটি সমগ্র উপাদানের চারপাশে 10 পিক্সেলের মার্জিন যোগ করে। এটি এই উপাদান এবং পৃষ্ঠার অন্যান্য উপাদানগুলির মধ্যে ব্যবধান প্রদান করে।
প্রদত্ত CSS কোড ক্লাস "কোড" সহ HTML অনুচ্ছেদের জন্য একটি শৈলী সংজ্ঞায়িত করে। এটি এই অনুচ্ছেদের জন্য ফন্ট, ফন্টের আকার, সীমানা শৈলী, সীমানা প্রস্থ, প্যাডিং, পটভূমির রঙ, লাইনের উচ্চতা এবং মার্জিন সেট করে। এই স্টাইলটি একটি ব্লগার পোস্টে কোড স্নিপেট বা প্রিফরম্যাট করা পাঠ্যগুলিতে প্রয়োগ করা যেতে পারে যাতে তাদের একটি নির্দিষ্ট চেহারা দেওয়া যায়।
এটি দেখতে কেমন হবে তা এখানে:
p.code {
font-family: কুরিয়ার নিউ;
ফন্ট সাইজ: 8pt;
বর্ডার-স্টাইল: ইনসেট;
সীমানা-প্রস্থ: 3px;
প্যাডিং: 5px;
ব্যাকগ্রাউন্ড-রঙ: #FFFFFF;
লাইন-উচ্চতা: 100%;
মার্জিন: 10 পিএক্স;
}
শুভ কোডিং!