Creative IT Blog Just another WordPress site
Related Articles
Fonts:
কোন ওয়েব সাইটে তথ্য প্রদর্শনের ক্ষেত্রে প্রধান ভূমিকা পালন করে Text। HTML এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে CSS গুরত্বপূর্ন। Text এর স্টাইল তৈরির জন্য বেশ কয়েকটি Properties উল্লেখ করতে হয়। এগুলো হচ্ছে-
- Font family
- Font size
- Font variant
- font-weight
Font Family
font-family প্রোপার্টিজ দিয়ে এলিমেন্টের font কি হবে সেটা ঠিক করা যায়। টেক্সট সমূহের জন্য Arial ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Arial; একসাথে একাধিক ফন্ট কমা (,) দিয়ে দেয়া যায়। যখন ব্রাউজার প্রথম ফন্ট সাপোর্ট করবে না তখন টেক্সট সমূহ ২য় বা ৩য় ফন্টে প্রদর্শিত হবে।
font-family: Verdana, SolaimanLipi;
Font Size
font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের Text এর সাইজ বা আকার কত বড় হবে। px বা em ইউনিট দিয়ে যেকোন মান দিতে পারেন যেমন-
font-size: 20px;
/*or*/
font-size: 2em;
font-weight কোন ওয়েব পেজে ব্যবহৃত টেক্সট সমূহ কতটা মোটা হবে বা চিকন হবে তা নির্ধারণ করার জন্য font-weight ব্যবহার করা হয়। এর মান হতে পারে “normal”, “bold”, “bolder”, “lighter”, “inherit” এবং 100, 200, 300 …900 পর্যন্ত। বেশিরভাগ সময়ে লেখা একটু বোল্ড করতে bold মানটি ব্যবহৃত হয়।
font-style সাধারনত ইটালিক করার জন্য ব্যবহৃত হয় তবে এর আরো ৩টি মান দেয়া যায়।
font-style: italic;
font-style: oblique;
font-style: normal;
font-style: inherit;
Project:
এই খানে internal css দিয়ে project দেখান হল । External css এর জন্য css টুকু style.css নিয়ে গেলেই হবে আর html file a link করে দিতে হবে-
<!DOCTYPE html >
<html>
<head>
<title> background </title>
<style>
# demo {
font-size: 20px;
font-family: Verdana, SolaimanLipi;
font-weight: bold;
}
h1{
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body >
<h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h1>
<p id=”demo “>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
</p>
</body>
</html>
