সিএসএস টিউটোরিয়ালঃ ১০ম পর্ব(ফন্ট ভেরিয়েন্ট এবং ফন্ট কালার)

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

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

Font Variant:

কোন ইলিমেন্টে ফন্ট স্টাইলের ভেরিয়েশন দিতে font-variant প্রোপার্টি এবং ভ্যালুই হিসেবে normal/ small-caps অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট স্টাইলের ভেরিয়েশন অ্যাপ্লাই করতে নিচের মত কোড লিখুন।

[html]<html>

<head>

#normal{

font-variant: normal;

}

#small {

font-variant: small-caps;

}

</style>

</head>

<body>

<div>

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

</div>

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

<p id=”small”> This is CSS SMALL Font </p>

</body>

</html>[/html]

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

Font/Text Color:

ফন্টের/টেক্সটের কালার দিতে font-color প্রোপার্টি এবং ভ্যালুই হিসেবে Hexadecimal value(#aahh00), RGB(235, 125, 200), ColorName(red, green etc) অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট/টেক্সট এর কালার অ্যাপ্লাই করতে নিচের মত কোড লিখুন।

[html]<html>

<head>

#colorname{

color: red;

}

#rgbcolor {

color:rgb(235, 125, 200);

}

#hexcolor {

color: #aaff00;

}

</style>

</head>

<body>

<div>

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

</div>

<p id=”colorname”> This is CSS COLOR name RED</p>

<p id=”rgbcolor”> This is CSS RGB COLOR value rgb(235, 125, 200)</p>

<p id=”hexcolor”> This is CSS Hexadecimal COLOR value #aaff00</p>

</body>

</html>[/html]

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