CSS Typography | Css Color & Css Text Property
Post No:13
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
CSS Typography
CSS কালার :
সিএসএস-এ কালার চার ভাবে করা যায়
- কালার নাম
যেমন- হোয়াইট, গ্রীন, রেড, বুলু
- RGB কালার,
RGB মিন R=রেড, G=গ্রীন, B=বুলু। রেড গ্রীন, বুলু দিয়ে সব ধরণের কালার তৈরী করা যায়।
- HEX কোড কালার
কোড-এ ৬ ডিজিট-এর নাম্বার থাকে রেড-এর ২টা, গ্রীন-এর ২টা, বুলু-এর ২টা মোট ৬টা সংখ্যা দিয়ে ১টি কালার কোড হয়।
- HSL (hue, saturation, lightness)
হিউ হল 0 থেকে 360 পর্যন্ত রঙের চাকার একটি ডিগ্রী। 0 হল লাল, 120 হল সবুজ এবং 240 হল নীল। স্যাচুরেশন হল একটি শতাংশ মান, 0% মানে ধূসর শেড, এবং 100% হল সম্পূর্ণ রঙ। হালকাতাও একটি শতাংশ, 0% কালো, 50% আলো বা অন্ধকার নয়, 100% সাদা।
এখানে এইচটিএমএল ফাইল ⇓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post no:11</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class=''first-heading'>This is heating tag</h1>
<h2>this is heating tag</h2>
<h3>this is heating tag/h3>
<h4>this is heating tag</h4>
<h5>this is heating tag</h5>
<h6>this is heating tag</h6>
</body>
</html>
<link rel=”stylesheet” href=”style.css”>
rel-এ স্টাইলশীট মানে সিএসএসকে বোঝাচ্ছে href-এর ভিতর আপনি সিএসএস ফাইল-এর যে নাম দিবেন ওই নাম টাই দিতে হবে।
এখানে আউটপুট রেজাল্ট ⇓
আউটপুট-এ আমাদের তেমন কোনো পরিবর্তন আহসেনি। আসবেও না কারণ আমরা এখন কোনো সিএসএস প্রপার্টি ব্যবহার করিনি। চলুন আমরা সিএসএস দিয়ে কিছু ডিজাইন করি।
এখন আমরা সিএসএস দেখবো ⇓
.first-heading{
color:red;
background-color:green;
text-align:center;
font-size:50px;
}
উপরে লক্ষ করুন ফার্স্ট-হেডিং ক্লাসকে ধরে আমরা কালার দিয়েছি কালার মানে টেক্সট-এর কালার, ব্যাকগ্রাউন্ড-কালার দিয়েছি, টেক্সট-এর নিচের ব্যাকগ্রাউন্ড-কালার গ্রীন দিয়েছি। তারপর টেক্সট-এলাইন সেন্টার দিয়েছি যেন লেখাটা সেন্টার-এ থাকে। এরপর ফন্ট-সাইজ ৫০পিক্সেল দিয়েছি টেক্সট বড় করতে।
এখানে আউটপুট রেজাল্ট ⇓
এখন আমরা hsl কালার ব্যাবহার দেখবো ⇓
.first-heading{
color: hsl(136, 96%, 74%);
background-color: green;
text-align: center;
font-size: 50px;
}
এখানে আউটপুট রেজাল্ট ⇓
প্রথম হেডিং ট্যাগ-এর টেক্সট কালার কিন্তু চেঞ্জ হয়েছে। মূলত এভাবেই সিএসএস-এ কালার ব্যবহার করা হয়।
সিএসএস text ফরম্যাটিং ⇓ :
টেক্সট ফরম্যাটিং এ ৫টা প্রপার্টি আছে এই ৫টা প্রপার্টি নিয়ে আমরা ডিটেলস এ দেখবো।
text-align -এর ভ্যালু 3টা (left, right, center)
text-decoration -এর ভ্যালু 3টা (overline, line-through, underline)
text-transform -এর ভ্যালু 3টা (uppercase, lowercase, Capitalize)
text-spacing -এর ভ্যালু 3টা (letter-spacing, line-height, word-spacing)
text-shadow হচ্ছে প্রতিচ্ছবি বা ছেমা এর ভ্যালু ৩টাই প্রথম ভ্যালু টপ-বটম এ কাজ করে, সেকেন্ড ভ্যালু লেফট-রাইট এ কাজ করে, থার্ড ভ্যালু হচ্ছে আপনি কতটুকু প্রতিচ্ছবিটাকে চড়াইতে চাচ্ছেন যেমন- 10px এরপর আমরা শ্যাডোর কালার দেব যেমন- রেড।
টেক্সট-শ্যাডো দেয়ার নিয়ম text-shadow: 2px 2px 10px red;
এখানে h2 ট্যাগ-এ সিএসএস লক্ষ্য করুন ⇓ :
.first-heading{
color: hsl(136, 96%, 74%);
background-color: green;
text-align: center;
font-size: 50px;
}
h2{
text-align: right;
text-decoration: underline;
text-transform: capitalize;
letter-spacing: 10px;
word-spacing: 20px;
}
আউটপুট রেজাল্ট ⇓
এখন আমরা শ্যাডো-এর ব্যবহার দেখবো - h5 ট্যাগ-এর সিএসএস লক্ষ্য করুন ⇓
h2{
text-align: right;
text-decoration: underline;
text-transform: capitalize;
letter-spacing: 10px;
word-spacing: 20px;
}
h5{
font-size:50px;
text-shadow: 2px 2px 10px red;
}
উপরে ইমেজটি লক্ষ্য করুন, h5 ট্যাগ-এ font-size: 50px; text-shadow; 2px 2px 10px red; শ্যাডো হচ্ছে প্রতিচ্ছবি, নিচে আউটপুট রেজাল্ট লক্ষ্য করুন আইছি ৫ ট্যাগ এ রেড শ্যাডো হয়েছে।
আউটপুট রেজাল্ট ⇓
এখন আমরা text-align-এর ব্যবহার দেখবো:
উপরের ইমেজটি লক্ষ্য করুন ১. নাম্বার এইচ২, ২. নাম্বার এইচ৩, ৩.নাম্বার আইচ৪ কে আমি এখন এক্সটার্নাল সিএসএস করবো।
h2, h3, h4 লক্ষ্য করুন :
.first-heading{
color: hsl(136, 96%, 74%);
background-color: green;
text-align: center;
font-size: 50px;
}
h2{
text-align: left;
}
h3{
text-align:center ;
}
h4{
text-align: right;
}
উপরের ইমেজটি ১. নাম্বার-এ h2 ট্যাগ-এ text-align: left; করেছি টেক্সট-এলাইন-এর ডিফল্ট ভ্যালু লেফট। একইভাবে h3-তে text-align: center; h4 text-align: right;
নিচে আউটপুট দেখুন :
আউটপুট রেজাল্ট দেখুন h2-এর এলাইনমেন্ট লেফট এ আছে, h3-এর এলাইনমেন্ট সেন্টার আছে, h4-এর এলাইনমেন্ট রাইট এ আছে। আমার কোড অনুযায়ী এলাইনমেন্ট ঠিক আছে।
Text-transform:
.first-heading{
color: hsl(136, 96%, 74%);
background-color: green;
text-align: center;
font-size: 50px;
}
h2{
text-align: left;
text-transform: lowercase;
}
h3{
text-align:center ;
text-transform: uppercase;
}
h4{
text-align: right;
text-transform: capitalize;
}
Output Result দেখুন :
উপরের কোড অনুযায়ী আমাদের ১.নাম্বার সব লেটার ছোট হাতের আছে ২.নাম্বার সব লেটার বড়ো হাতের, ৩.নাম্বার-এ সব ওয়ার্ড-এর ফার্স্ট লেটার বড়ো হাতের। আউটপুট-এ তাই আছে।
আপনার এই ব্লগ-এ যতটুকু জেনেছেন সব প্রাকটিস করেন। ইনশাআল্লাহ নেক্সট ব্লগ-এ আমরা সিএসএস-এর অন্যান্য প্রপার্টি নিয়ে কাজ করবো।
ব্লগটি পড়ার জন্য ধন্যবাদ
