সিএসএস

🌈সিএসএস কি?

📋সিএসএস হলো লেখার ফন্ট নির্দিষ্ট করার পদ্ধতি।

⚒️সিএসএস লেখার ফন্ট নির্দিষ্ট করতে ব্যবহৃত হয়।

সিএসএস সমূহ

সিএসএস এবং সেগুলোর ব্যবহারের তালিকা

➡️ font - ফন্ট বৈশিষ্ট্য নির্ধারণ করা
➡️ font-family - ফন্ট ফ্যামিলি নির্ধারণ করা
➡️ font-feature-settings - ফন্ট উন্নত বৈশিষ্ট্য নির্ধারণ করা
➡️ font-kerning - ফন্ট সমন্বয় নির্ধারণ করা
➡️ font-language-override - ফন্ট ভাষাগত অগ্রাধিকার নির্ধারণ করা
➡️ font-size - ফন্ট আকার নির্ধারণ করা
➡️ font-size-adjust - ফন্ট আকার সমন্বয় করা
➡️ font-stretch - ফন্ট প্রসার নির্ধারণ করা
➡️ font-style - ফন্ট স্টাইল নির্ধারণ করা
➡️ font-synthesis - ফন্ট সংশ্লেষণ নির্ধারণ করা
➡️ font-variant - ফন্ট রূপভেদ নির্ধারণ করা
➡️ font-variant-alternates - ফন্ট রূপভেদ পরিবর্তন করা
➡️ font-variant-caps - ফন্ট রূপভেদ বড় হাতের অক্ষর নির্ধারণ করা
➡️ font-variant-east-asian - ফন্ট রূপভেদ পূর্ব এশীয় নির্ধারণ করা
➡️ font-variant-ligatures - ফন্ট রূপভেদ বন্ধনী নির্ধারণ করা
➡️ font-variant-numeric - ফন্ট রূপভেদ সংখ্যা নির্ধারণ করা
➡️ font-variant-position - ফন্ট রূপভেদ অবস্থান নির্ধারণ করা
➡️ font-weight - ফন্ট রূপভেদ প্রভাব নির্ধারণ করা

font - ফন্ট বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font: italic bold 32px Arial, sans-serif;
}
</style>
</head>
<body>

<h1>প্রোগ্রামিং শিখুন</h1>

</body>
</html>

font-family - ফন্ট ফ্যামিলি নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-family: Georgia, serif;
}
</style>
</head>
<body>

<h1>প্রোগ্রামিং শিখুন</h1>

</body>
</html>

font-feature-settings - ফন্ট উন্নত বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-feature-settings: "liga" 1, "kern" 1;
}
</style>
</head>
<body>

<p class="text">প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-kerning - ফন্ট সমন্বয় নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-kerning: normal;
}
</style>
</head>
<body>

<h1>প্রোগ্রামিং শিখুন</h1>

</body>
</html>

font-language-override - ফন্ট ভাষাগত অগ্রাধিকার নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-language-override: "ENG";
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-size - ফন্ট আকার নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 40px;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-size-adjust - ফন্ট আকার সমন্বয় করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 24px;
  font-size-adjust: 0.5;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-stretch - ফন্ট প্রসার নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: "Arial";
  font-stretch: condensed;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-style - ফন্ট স্টাইল নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-style: italic;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-synthesis - ফন্ট সংশ্লেষণ নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-synthesis: none;
  font-weight: bold;
  font-style: italic;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-variant - ফন্ট রূপভেদ নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-variant-alternates - ফন্ট রূপভেদ পরিবর্তন করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-variant-alternates: stylistic(1);
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-variant-caps - ফন্ট রূপভেদ বড় হাতের অক্ষর নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-variant-caps: small-caps;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-variant-east-asian - ফন্ট রূপভেদ পূর্ব এশীয় নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-variant-east-asian: jis78;
}
</style>
</head>
<body>

<p>東アジア文字の表示</p>

</body>
</html>

font-variant-ligatures - ফন্ট রূপভেদ বন্ধনী নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-variant-ligatures: common-ligatures;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-variant-numeric - ফন্ট রূপভেদ সংখ্যা নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-variant-numeric: oldstyle-nums;
}
</style>
</head>
<body>

<p>1234567890</p>

</body>
</html>

font-variant-position - ফন্ট রূপভেদ অবস্থান নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-variant-position: super;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

font-weight - ফন্ট রূপভেদ প্রভাব নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-weight: 700;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

সিএসএস সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম	বিবরণ
font	ফন্ট বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।
font-family	ফন্ট ফ্যামিলি নির্ধারণ করতে ব্যবহৃত হয়।
font-feature-settings	ফন্ট উন্নত বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।
font-kerning	ফন্ট সমন্বয় নির্ধারণ করতে ব্যবহৃত হয়।
font-language-override	ফন্ট ভাষাগত অগ্রাধিকার নির্ধারণ করতে ব্যবহৃত হয়।
font-size	ফন্ট আকার নির্ধারণ করতে ব্যবহৃত হয়।
font-size-adjust	ফন্ট আকার সমন্বয় করতে ব্যবহৃত হয়।
font-stretch	ফন্ট প্রসার নির্ধারণ করতে ব্যবহৃত হয়।
font-style	ফন্ট স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
font-synthesis	ফন্ট সংশ্লেষণ নির্ধারণ করতে ব্যবহৃত হয়।
font-variant	ফন্ট রূপভেদ নির্ধারণ করতে ব্যবহৃত হয়।
font-variant-alternates	ফন্ট রূপভেদ পরিবর্তন করতে ব্যবহৃত হয়।
font-variant-caps	ফন্ট রূপভেদ বড় হাতের অক্ষর নির্ধারণ করতে ব্যবহৃত হয়।
font-variant-east-asian	ফন্ট রূপভেদ পূর্ব এশীয় নির্ধারণ করতে ব্যবহৃত হয়।
font-variant-ligatures	ফন্ট রূপভেদ বন্ধনী নির্ধারণ করতে ব্যবহৃত হয়।
font-variant-numeric	ফন্ট রূপভেদ সংখ্যা নির্ধারণ করতে ব্যবহৃত হয়।
font-variant-position	ফন্ট রূপভেদ অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
font-weight	ফন্ট রূপভেদ প্রভাব নির্ধারণ করতে ব্যবহৃত হয়।