সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস ফন্ট


টেক্সটের জন্য ফন্ট ফ্যামিলি, গাঢ়ত্ব, সাইজ এবং স্টাইল নির্ধারণ করতে সিএসএস font প্রোপার্টি ব্যবহার করা হয়।


Serif এবং Sans-serif ফন্টের মধ্যে পার্থক্যঃ

Serif vs Sans-serif

এক নজরে সিএসএস ফন্ট প্রোপার্টিসমূহ

font

একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো ফন্ট প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।

font-size

টেক্সটের ফন্ট সাইজ সেট করার জন্য ব্যবহার করা হয়।

font-family

টেক্সটের ফন্ট ফ্যামিলি সেট করার জন্য ব্যবহার করা হয়।

font-style

টেক্সটের ফন্ট স্টাইল সেট করার জন্য ব্যবহার করা হয়।

font-variant

টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা তা নির্ধারণ করে।

font-weight

ফন্টকে গাঢ় বা হালকাভাবে উপস্থাপন করে।



সিএসএস ফন্ট ফ্যামিলি

সিএসএসের মধ্যে দুই ধরনের ফন্ট ফ্যামিলি রয়েছেঃ

  • generic family - দেখতে প্রায় একইরকম ফন্ট ফ্যামিলির একটি গ্রুপ। যেমন-"Serif", "Monospace" ইত্যাদি।
  • font family - একটি নির্দিষ্ট ফন্ট ফ্যামিলি যেমনঃ "Times New Roman", "Arial" ইত্যাদি।

বিঃদ্রঃ কম্পিঊটারের স্ক্রিনে serif ফন্টের চেয়ে sans-serif ফন্ট খুব সহজে পড়া যায়


ফন্ট ফ্যামিলি

font-family প্রোপার্টির মাধ্যমে টেক্সটের ফন্ট ফ্যামিলি সেট করা হয়।

font-family প্রোপার্টিতে "fallback" সিস্টেম হিসাবে বিভিন্ন ফন্ট এর নাম রাখা উচিত। যদি কোন ব্রাউজারে প্রথম ফন্টটি সাপোর্ট না করে, তাহলে তা পরবর্তী ফন্টের জন্য চেষ্টা করে এবং এভাবে চলতে থাকে।

আপনার পছন্দ অনুযায়ী ফন্টের নাম দিয়ে শুরু করুন এবং generic family দ্বারা শেষ করুন। কারণ যদি অন্য কোন ফন্ট না কাজ করে তাহলে ব্রাউজার তার মত করে generic family'র মধ্য থেকে একই ধরণের ফন্ট বাছাই করে নিবে।

বিঃদ্রঃ যদি কোনো ফন্ট ফ্যামিলির নাম এক শব্দের চেয়ে বেশি হয় তাহলে এটাকে অবশ্যই কোটেশন মার্ক(" ") এর মধ্যে রাখতে হবে। যেমনঃ "Times New Roman"

একের অধিক ফন্ট ফ্যামিলি থাকলে কমা(,) দ্বারা সেগুলোকে আলাদা করতে হবেঃ



উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.paragraph1 {
    font-family: "Times New Roman", Times, serif;
  }
  p.paragraph2 {
    font-family: Arial, Helvetica, sans-serif;
  }
  </style>
</head>
<body>

  <h1>CSS font familly</h1>
  <p class="paragraph1">We sets "Times New Roman" font for this paragraph.</p>
  <p class="paragraph2">We sets "Arial" font for this paragraph.</p>

</body>
</html>

ফলাফল





সচরাচর ব্যবহৃত ফন্টসমূহ সম্বন্ধে জানতে আমাদের ওয়েব সেফ ফন্টের সমাহার পেজটি ভিজিট করুন।


font-style প্রোপার্টি

অধিকাংশ ক্ষেত্রেই ফন্টসমূহকে হালকা বাঁকাভাবে(italic) উপস্থাপন করার জন্য font-style প্রোপার্টিটি ব্যবহার করা হয়।

এই প্রোপার্টিতে ৩টি ভ্যালু ব্যবহার করা যায়ঃ

  • normal - টেক্সটকে সাধারণভাবে দেখানো হয়।
  • italic - টেক্সটকে ইটালিক স্টাইলে দেখানো হয়।
  • oblique - এটি italic এর মত টেক্সটকে বাঁকা করে। কিনতু ইটালিকের তুলনায় ইহা কম সমর্থিত।


উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.normal {
    font-style: normal;
  }
  p.italic {
    font-style: italic;
  }
  p.oblique {
    font-style: oblique;
  }
  </style>
</head>
<body>

  <h1>font-style প্রোপার্টির ব্যবহার</h1>
  <p class="normal">এই প্যারাগ্রাফটিতে নরমাল স্টাইল সেট করা হয়েছে।</p>
  <p class="italic">এই প্যারাগ্রাফটিতে ইটালিক্ স্টাইল সেট করা হয়েছে।</p>
  <p class="oblique">এই প্যারাগ্রাফটিতে oblique স্টাইল সেট করা হয়েছে।</p>

</body>
</html>

ফলাফল





font-size প্রোপার্টি

টেক্সটের সাইজ নির্ধারণ করার জন্য font-size প্রোপার্টি ব্যবহার করা হয়।

ওয়েব ডিজাইনিং এর ক্ষেত্রে টেক্সটের আকার(size) নির্ধারণ করা খুবই গুরুত্বপূর্ণ। যাইহোক, font-size প্রোপার্টি ব্যবহার করে প্যারাগ্রাফকে হেডিং এর সাইজে অথবা হেডিং কে প্যারাগ্রাফের সাইজে করা মোটেও উচিত হবে না।

সবসময় প্রয়োজন অনুযায়ী উপযুক্ত এইচটিএমএল ট্যাগ ব্যবহার করা উচিত। যেমন- হেডিং এর জন্য <h1> থেকে <h6> ট্যাগ এবং প্যারাগ্রাফ এর জন্য <p> ট্যাগ ব্যবহার করা উচিত।

font-size প্রোপার্টির ভ্যালু absolute অথবা relative হতে পারে।

বিঃদ্রঃ আপনি যদি ফন্টের সাইজ না সেট করে দেন, তাহলে ব্রাউজার থেকে ডিফল্টভাবে সাইজ নিয়ে নিবে।
       যেমন- প্যারাগ্রাফ এর জন্য ডিফল্ট সাইজ হলো 16px (16px = 1em)।



Px এককে ফন্ট সাইজ নির্ধারণ

Px একক ব্যবহার করে আপনি আপনার ইচ্ছা মত টেক্সট এর আকার নির্ধারণ করতে পারেনঃ



উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  h4 {
    font-size: 30px;
    color: green;
  }
  p.first {
    font-size: 20px;
  }
  p.last {
    font-size: 10px;
  }
  </style>
</head>
<body>

  <h4>font-size প্রোপার্টির মাধ্যমে এই শিরোনামটির টেক্সটের সাইজ 30px নির্ধারণ করা হয়েছে।</h4>
  <p class="first">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 20px নির্ধারণ করা হয়েছে।</p>
  <p class="last">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 10px নির্ধারণ করা হয়েছে।</p>

</body>
</html>

ফলাফল





Em এককে ফন্ট সাইজ নির্ধারণ

একজন ইউজারকে ব্রাউজার মেনু থেকে টেক্সট রিসাইজ(resize) করতে দেওয়ার জন্য অনেক ডেভেলপারই px এর পরিবর্তে em একক ব্যবহার করেন।

ফন্টের সাইজ নির্ধারণে em একক W3C সমর্থিত।

একটি ব্রাউজারের চলমান ফন্ট সাইজ হলো 1em এর সমান এবং ব্রাউজারের ডিফল্ট টেক্সট সাইজ হল 16px। সুতরাং 1em এর ডিফল্ট সাইজ = 16px।

পিক্সেলকে em এ কনভার্টের জন্য pixels/16 =em ফর্মূলা ব্যবহার করা হয়।



উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  h4 {
    font-size: 2em;
    color: green;
  }
  p.first {
    font-size: 1.5em;
  }
  p.last {
    font-size: .875em;
  }
  </style>
</head>
<body>

  <h4>font-size প্রোপার্টির মাধ্যমে এই শিরোনামটির টেক্সটের সাইজ 2em নির্ধারণ করা হয়েছে।</h4>
  <p class="first">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ 1.5em নির্ধারণ করা হয়েছে।</p>
  <p class="last">font-size প্রোপার্টির মাধ্যমে এই প্যারাগ্রাফটির টেক্সটের সাইজ .875em নির্ধারণ করা হয়েছে।</p>

</body>
</html>

ফলাফল





font-weight প্রোপার্টি

ফন্ট গাঢ় বা হালকা করার জন্য font-weight প্রোপার্টি ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>;
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.normal {
    font-weight: normal;
  }
  p.lighter {
    font-weight: lighter;
  }
  p.thick {
    font-weight: bold;
  }
  p.thicker {
    font-weight: 900;
  }
  </style>
</head>
<body>

  <h2>font-weight প্রোপার্টির ব্যবহার</h2>
  <p class="normal">font-weight(normal) প্রোপার্টির ব্যবহার</p>
  <p class="lighter">font-weight(lighter) প্রোপার্টির ব্যবহার</p>
  <p class="thick">font-weight(thick) প্রোপার্টির ব্যবহার</p>
  <p class="thicker">font-weight(thicker) প্রোপার্টির ব্যবহার</p>

</body>
</html>

ফলাফল





font-variant প্রোপার্টি

টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা font-variant প্রোপার্টির মাধ্যমে তা নির্ধারণ করা হয়।

small-caps ফন্টে সকল ছোট অক্ষরের বর্ণ গুলো বড় অক্ষরের বর্ণে রুপান্তরিত হয়। রুপান্তরিত বড় অক্ষরের বর্ণগুলো প্রকৃত সাইজের চেয়ে ছোট হয়ে বড় অক্ষর হিসাবে ব্রাউজারে প্রদর্শিত হয়।



উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.paragraph1 {
    font-variant: normal;
  }
  p.paragraph2 {
    font-variant: small-caps;
  }
  </style>
</head>
<body>

  <p class="paragraph1">This is a paragraph with normal font variant.</p>
  <p class="paragraph2">This is a paragraph with small-caps font variant.</p>

</body>
</html>

ফলাফল