সিএসএস টিউটোরিয়ালঃ ৯ম পর্ব(ফন্ট ওয়েট এবং ফন্ট স্টাইল)

0
463 বার দেখা হয়েছে।

সিএসএস ফন্ট এর এই পর্বে আলোচনা করবো ফন্ট ওয়েট এবং ফন্ট স্টাইল নিয়ে। তো চলুন…

Font weight:

কোন ইলিমেন্টে এর ফন্টের ব্যাসার্ধ/প্রস্থ দিতে font-weight প্রোপার্টি এবং ভ্যালুই হিসেবে normal/bold/bolder/lighter/100-900 অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট ওয়েট অ্যাপ্লাই করতে নিচের মত কোড লিখুনঃ

[html]<html>

<head>

<style type=”text/css”>

#normal{

font-weight: normal;

}

#bold{

font-weight: bold;

}

#bolder{

font-weight: bolder;

}

</style>

</head>

<body>

<div>

<h2> Welcome to RangpurSource’s CSS Class! </h2>

</div>

<p id=”normal”> This is CSS NORMAL Font</p>

<p id=”bold”> This is CSS BOLD Font </p>

<p id=”bolder”> This is CSS BOLDER Font </p>

</body>

</html>[/html]

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন cssfontsize বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

Font Style:

কোন ইলিমেন্টে ফন্টের স্টাইল দিতে font-style প্রোপার্টি এবং ভ্যালুই হিসেবে normal/ italic/ oblique অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট স্টাইল অ্যাপ্লাই করতে নিচের মত কোড লিখুনঃ

[html]<html>

<head>

<style type=”text/css”>

#normal{

font-style: normal;

}

#italic {

font-style: italic;

}

#oblique {

font-style: oblique;

}

</style>

</head>

<body>

<div>

<h2> Welcome to RangpurSource’s CSS Class! </h2>

</div>

<p id=”normal”> This is CSS NORMAL Font</p>

<p id=”italic”> This is CSS ITALIC Font </p>

<p id=”oblique”> This is CSS OBLIQUE Font </p>

</body>

</html> [/html]

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন fontstyle বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপেপেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন।  🙂

Series Navigation<< সিএসএস টিউটোরিয়ালঃ ৪র্থ পর্ব(সিলেক্টরস পার্ট-১)সিএসএস টিউটোরিয়ালঃ ১০ম পর্ব(ফন্ট ভেরিয়েন্ট এবং ফন্ট কালার) >>
Print Friendly, PDF & Email

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.