There is no item in the cart. If you want to buy, Please click here.
সিএসএস(CSS) টিউটোরিয়াল
সিএসএস সিনট্যাক্স
যে পদ্ধতি বা নিয়ম অনুসরণ করে সিএসএস এর স্টাইল কোড গুলো এইচটিএমএল এলিমেন্টে প্রয়োগ করা হয়, তাকেই সিএসএস সিনট্যাক্স বলে। একটি সিএসএস সিনট্যাক্স, যা ২ টি অংশ নিয়ে গঠিত হয়, এর একটি হল সিএসএস selector এবং অন্যটি হল declaration.
এখানে, সিএসএস selector অংশটি হল, যে এইচটিএমএল এলিমেন্টে স্টাইল কোড প্রয়োগ করা হবে, তার নাম, এটা হতে পারে, এক বা একাধিক ID বা Class এর নাম, বা সাধারণ ভাবে কোন এইচটিএমএল এলিমেন্ট, যেমন -h1,p ইত্যাদি। অর্থাৎ seclector হল এইচটিএমএল এলিমেন্ট বা এইচটিএমএল ট্যাগ, যার স্টাইল সিএসএস এর মাধ্যমে নির্ধারণ করা হবে।declaration অংশটি হল, যেখানে এইচটিএমএল এলিমেন্ট বা ট্যাগের জন্য স্টাইল কোড গুলো লেখা হবে। এই অংশে একটি এইচটিএমএল এলিমেন্টের জন্য এক বা একাধিক স্টাইল কোড লেখা যায়।
প্রতিটি declaration এর আবার ২ টি অংশ আছে, একটি স্টাইল প্রপার্টি এবং অন্যটি তার মান বা value.প্রপার্টি হল style attribute, যার সাহায্যে স্টাইল এর ধরন নির্বাচন করা হয় এবং value হল সেই style attribute এর মান যার দ্বারা স্টাইলের পরিমান নির্ধারণ করা হয়।
কিভাবে লিখবেন?
h1 {
color: teal;
text-align: right;
}
এইচটিএমএল ডকুমেন্টের বিভিন্ন এলিমেন্টকে সুনির্দিষ্ট ভাবে স্টাইলিং করার জন্য সিএসএস এর id আত্ত্রিবুতে ব্যবহার করা হয়।
ওয়েব পেজের কোন সুনির্দিষ্ট একটি এইচটিএমএল এলিমেন্টের স্টাইল প্রকাশ করার জন্যid সিলেক্টর ব্যবহার করা হয়। সাধারনভাবে i আত্ত্রিবুতে ব্যবহার করার নিয়মটি হল প্রথমে হ্যাঁস বা # " চিহ্ন দিয়ে পরে আইডির নাম লিখতে হবে এবং তারপরে তৃতীয় বন্ধনীর মধ্যে স্টাইলের জন্য সিএসএস কোড লিখতে হযনিচে একটি উদাহরণ দেখুন, যেখানে paragraph নামক একটি আইডি যুক্ত p ট্যাগের জন্য সিএসএস স্টাইল কোড দেয়া হল।
p#paragraph {
color :red;
text-align:center;
}
কোন একটি এইচটিএমএল এলিমেন্টে একাধিক id ব্যবহার করা যায়। প্রতিটিid এর নাম আলাদা করার জন্য id নাম গুলোর মাঝে একটি ফাঁকা স্থান বা space দেয়া হয়নিচে একটি উদাহরণ দেখুন, যেখানে একটি এইচটিএমএল p ট্যাগে one এবং two নামে দুইটি ভিন্ন নামের আইডি যুক্ত স্টাইল কোড প্রযোজ্য হয়েছে।
<head>
<style>
#one {
color : red;
text-align: center;
}
#two {
font-size : 16px;
text-decoration: bold;
}
</style>
</head>
<body>
<p id="one two">This is a paragraph working with two diffrent style code.</p>
</body>
উদাহরণ:
P.paragraph{
color :red;
text-align:center;
}
<head>
<style>
.one {
color : red;
text-align: center;
}
.two {
font-size : 16px;
text-decoration: bold;
}
</style>
</head>
<body>
<p class="one two">This is a paragraph working with two diffrent style code.</p>
</body>
