What is CSS Property & How dose it work? Bangla Tutorials Part-2

আসসালামু আলাইকুম, আশাকরি সবাই ভালো আছেন, আজকে আমি আলোচনা করব সিএসএস এর বিভিন্ন বৈশিষ্ঠ্য নিয়ে সব কিছু না কিছু বৈশিষ্ঠ্য থাকে যেমন- এইচটি এম এল এর কোড গুলোর কাজ হচ্ছে শুধু ওয়েবসাইট কে গঠন বা বিত্তিপ্রস্তর স্থাপন করা, তদরুপ সিএসএস এর কোড গুলোর কাজ হচ্ছে ওয়েবসাইট এর গঠন বা বিত্তিপ্রস্তর কে বিভিন্ন ভাবে সাজানো – রং করা, লেখা বড় ছোট করা, স্থান নির্দিষ্ঠ্য করা আরো বিভিন্ন ধরনরে সাজ-সজ্জার কাজ রয়েছে, আমার ভিডিও গুলো যদি দেখেন তাহলে সিএসএস এর বিভিন্ন বৈশিষ্ঠ্য আরো অনেক ধারনা পাবেন।

সিএসএস এর বিভিন্ন বৈশিষ্ঠ্য নিয়ে নিন্মে আলোচনা করা হলোঃ

মন্তব্য যোগ করাঃ

মন্তব্য যোগ করা যে কোন ভাষারই একটি সাধারন বিষয়- সিএসএস এর মন্তব্য -/* এটি শুরু */ এবং এভাবে শেষ করতে হয়। যেমন-

*/ this is test Commets */

p { text-align:centre; color:red; }

1. CSS Text Propertyঃ

সিএসএস এর বেশ কিছু Property সরাসরি ওয়েবসাইট এর টেক্সট কে নিয়ন্ত্রন করে থাকে। ওয়েবসাইট এর সৈান্দর্য বৃদ্ধির জন্য টেক্সট প্রপারটির গুরুত্ব অপরিহার্য । নিচে টেক্সট প্রপারটি গুলো দেওয়া হলো-

প্রপাটি (Property)বর্নণা (Description)মান (Value)
1. colorলেখার রং নির্ধারন করেp{color:blue;}
2. directionলেখার দিক নিরদেশ করে@keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: y
3. letter-spacingএর মাধ্যমে লেখার বর্ন এর Space কমানো বাড়ানো যায় h1 {
  letter-spacing: 3px;
}
4. line-heightলাইন এর উচ্চতা প্রকাশ করে div.a {
  line-height: normal;
}
5. text-alignলেখার আনুভুমিক এলাইন মেন্ট নিরদেশ করে h1 {
    text-align: center;
}
6. text-decorationলেখাকে বিভিন্ন ভাবে প্রকাশ করতে পারে h3 {
  text-decoration: underline;
}
7. text-indentলেখাটি বাম দিক থেকে কতটুকু ছার দিয়ে শুরু হবে div.a {
  text-indent: 50px;
}

div.b {
  text-indent: -2em;
}
8. text-shadowলেখাটিকে শ্যাডো ইফেক্ট দেওয়ার জন্য h1 {
  text-shadow: 2px 2px #ff0000;
}
9. text-transformলেখাটির ক্যাপিটালাইজেশন নিয়ন্ত্রন করে।
p {
  text-transform: lowercase;
}
10. vertical-alignলেখাটির উলম্ব এলাইমেন্ট নিরদেশ করে img.b {
  vertical-align: text-top;
}

2. CSS Text Color Propertyঃ

একটি ওয়েবসাইটের লেখার বিভিন্ন রং আনার জন্য এই প্রপারটি ব্যবহার করা হয়।

<!DOCTYPE html>
<html>

<head>
<style> h1 {font-size:20px; color:blue;} </style>
</head>

<body>
<h1> This is Test Page </h1>
</body>

</html>

অথবা সিএসএস পেইজ এ হবে-
.social h1{font-size:20px; color:red;}

Leave a Reply

Your email address will not be published. Required fields are marked *

COVID-19

Leave News