সিএসএসে টেক্সট ফরম্যাট করার জন্য গাইড

একটি ওয়েবসাইট ডিজাইন করার সময়, পাঠ্য বিন্যাস একটি আকর্ষণীয় এবং পাঠযোগ্য ইন্টারফেস তৈরির একটি গুরুত্বপূর্ণ দিক।

CSS বিভিন্ন বৈশিষ্ট্য প্রদান করে যা আপনাকে ফন্টের রঙ, আকার, পরিবার, প্রান্তিককরণ, ব্যবধান এবং আরও অনেক কিছু সহ পাঠ্যের বিভিন্ন উপাদান কাস্টমাইজ করতে দেয়।

নীচে প্রতিটি টেক্সট ফর্ম্যাটিং সম্পত্তির উপর একটি বিস্তারিত নির্দেশিকা রয়েছে, প্রতিটি সম্পত্তির উদাহরণ সহ।

ফন্টের রং

প্যারামিটার: একটি রঙের মান, যা একটি রঙের নাম হতে পারে(যেমন, red), হেক্স কোড(যেমন, "#FF0000"), RGB মান(যেমন, "rgb(255, 0, 0)"), বা RGBA মান(যেমন, "rgba(255, 0, 0, 0.5)")।

p {  
  color: blue;  
}  

অক্ষরের আকার

প্যারামিটার: একটি আকারের মান, যা পিক্সেলে হতে পারে(যেমন, "16px"), em ইউনিট(যেমন, "1em"), rem ইউনিট(যেমন, "1.2rem"), ভিউপোর্ট প্রস্থ ইউনিট(যেমন, "10vw"), ভিউপোর্ট উচ্চতা ইউনিট(যেমন, "5vh"), বা অন্যান্য ইউনিট।

h1 {  
  font-size: 24px;  
}  

ফন্ট পরিবার

প্যারামিটার: একটি ফন্ট ফ্যামিলি লিস্ট, পছন্দের ক্রমে নির্দিষ্ট করা হয়েছে। আপনি ফন্টের নাম(যেমন, Arial) নির্দিষ্ট করতে পারেন বা ডবল কোটে(যেমন, " Times New Roman) বিশেষ অক্ষর সম্বলিত ফন্টের নাম সংযুক্ত করতে পারেন।

body {  
  font-family: Arial, sans-serif;  
}  

ফন্ট ওজন এবং শৈলী

প্যারামিটার font-weight: normal(default), bold, bolder, lighter, বা 100 থেকে 900 পর্যন্ত সাংখ্যিক মান।

পরামিতি font-style: normal(default), italic ।

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

পাঠ্য সজ্জা

পরামিতি: "none"(default), "underline", "overline", "line-through"  অথবা শূন্যস্থান দ্বারা পৃথক করা মানগুলির সংমিশ্রণ।

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

লিখার বিন্যাস

পরামিতি "left"(default), "right", "center" or "justify":

p {  
  text-align: center;  
}  

লাইনের উচ্চতা এবং মার্জিন

প্যারামিটার লাইন-উচ্চতা: একটি সাংখ্যিক মান বা বর্তমান ফন্ট আকারের শতাংশ।

প্যারামিটার মার্জিন: একটি পরিমাপ মান, যেমন পিক্সেল(px), em ইউনিট(em), rem ইউনিট(rem) ইত্যাদি।

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

মাল্টিকলাম টেক্সট লেআউট

পরামিতি: একটি ধনাত্মক পূর্ণসংখ্যা বা "auto"(default).

.container {  
  column-count: 2;  
}  

হোভারে পাঠ্যের রঙ পরিবর্তন

কোন নির্দিষ্ট প্যারামিটার নেই, শুধুমাত্র ছদ্ম-শ্রেণী ব্যবহার করুন :hover ।

a:hover {  
  color: red;  
}  

রাজ্যে পাঠ্যের রঙ পরিবর্তন(সক্রিয়, পরিদর্শন করা)

কোন নির্দিষ্ট প্যারামিটার নেই, শুধুমাত্র ছদ্ম-শ্রেণী ব্যবহার করুন :active  এবং :visited.

a:visited {  
  color: purple;  
}  

আমরা আশা করি যে উপরের ব্যাখ্যা এবং উদাহরণগুলি আপনাকে বুঝতে সাহায্য করেছে যে কীভাবে আপনার ওয়েবসাইটে একটি দৃশ্যমান আকর্ষণীয় এবং আকর্ষক পাঠ্য ইন্টারফেস তৈরি করতে CSS-এ পাঠ্য বিন্যাস বৈশিষ্ট্যগুলি ব্যবহার এবং কাস্টমাইজ করতে হয়।