সিএসএস (CSS) বাংলা টিউটোরিয়াল (পার্ট-৪)

“ফ্রী বাংলা টিউটোরিয়াল” এর CSS সম্পর্কিত এখন আমরা CSS fonts এবং border এর properties গুলো নিয়ে সংক্ষিপ্ত আলোচনা করবো। আশা করি, বাংলা ভিডিও টিউটোরিয়াল গুলো দেখে এবং এইসব আলোচনায় আপনারা উপকৃত হচ্ছেন।
CSS এর font’s properties গুলো আপনাকে একটি টেক্সট এর ফন্ট ফ্যামিলি, সাইজ ছোট-বড় এমনকি স্টাইল নির্ধারণে সাহায্য করে। এক নজরে কিছু property গুলো দেখে নেয়া যাকঃ font, font-family, font-size, font-style ও font-weight ইত্যাদি। অবশ্য font property টি হল সব ফন্ট সেটিং এর একটি কম্পোজিশন মানে এর মাধ্যমে আপনি একবারে অনেকগুলো property value অ্যাসাইন করতে পারেন। যাই হোক একটি কোড দেখিঃ

p{ font-family:"Times New Roman", Times, serif; [এই ফন্ট ফ্যামিলির নাম সেট করতে দেয়] font-size:16px; font-style:italic; [এটি ফন্ট স্টাইল যেমন italic, normal ও oblique সেট করতে ব্যবহার হয়] font-weight:bold; font-variant: small-caps;[ফন্টের বিভিন্নতা কেমন হবে এর ভালু normal বা small-caps হয়] }

1 2 3 4 5 6 7

p{ font-family:"Times New Roman", Times, serif;  [এই ফন্ট ফ্যামিলির নাম সেট করতে দেয়] font-size:16px; font-style:italic; [এটি ফন্ট স্টাইল যেমন italic, normal ও oblique সেট করতে ব্যবহার হয়] font-weight:bold; font-variant: small-caps;[ফন্টের বিভিন্নতা কেমন হবে এর ভালু normal বা small-caps হয়] }

উপরে কোড এ font-variant বিষয় বুঝতে আপনার সমস্যা হতে পারে শুধু নিচের পার্থক্য দেখে বোঝার চেষ্টা করুন অবশ্যই বুঝবেন।

<p> Will the god again pay attention on it? </p> |p {font-family: Courier New; font-variant: normal ;} output: Will the god again pay attention on it? <p> Will the god again pay attention on it? </p> |p {font-family: Courier New; font-variant: small-caps ;} Output: WILL THE GOD AGAIN PAY ATTENTION ON IT?

1 2 3 4

<p>Will the god again pay attention on it? </p>|p {font-family: Courier New; font-variant: normal ;} output: Will the god again pay attention on it? <p>Will the god again pay attention on it? </p>|p {font-family: Courier New; font-variant: small-caps ;} Output: WILL THE GOD AGAIN PAY ATTENTION ON IT?

নিজে একবার চেষ্টা করলেই বুঝতে পারবেন ইনশাল্লাহ।

CSS এর border properties গুলো দিয়ে শুধু HTML এর বিভিন্ন উপাদানের border নয়। border এর কালার, স্টাইল পৃথকভাবে যেকোনো উপাদানের সাথে যোগ করা যায়। আপনার যারা HTML এর টেবিল তৈরি করেছেন তারা আশা করি খুব সহজেই বুঝবেন। নিচে একটি কোড যা প্যারাগ্রাফের solid বর্ডার দেবে তা দেওয়া হলঃ

p{ | কিংবা একবারে p{border: 3px solid #3333CC;} border:thick; border-color:#3333CC; border-style:solid; }

1 2 3 4 5

p{                                       | কিংবা একবারে          p{border: 3px solid #3333CC;} border:thick; border-color:#3333CC; border-style:solid; }

আপনি border-bottom, border-top, border-bottom-color, border-top-color, border-left-style ইত্যাদি property বিচক্ষণতার সাথে ব্যবহার করে unique সব design করতে পারেন। আবারও বেশী বেশী practice করার পরামর্শ দিয়ে আজকের আয়োজন এখানেই শেষ করছি ধন্যবাদ বন্ধুরা।