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

This entry is part 12 of 13 in the series সিএসএস

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

Font weight:

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

[html]<html>

<head>

#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=”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>

#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) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…