সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো সিএসএস এর গঠন এবং কোডিং এর পদ্ধতি নিয়ে। তো চলুন…

সিএসএস সিনট্যাক্সঃ

সিএসএস সিনট্যাক্স বা পদবিন্যাস হচ্ছে সিএসএস কোড লিখার পদ্ধতি। নিচের ইমেজটি দিয়ে দেখানো হল সিএসএস কোড সিনট্যাক্স লিখতে হয়। প্রথমে সিলেক্টর, সিলেক্টর দিয়ে আমরা এইচটিএমএল এর বিভিন্ন ইলিমেন্টকে টার্গেট করে স্টাইল আপ্লাই করবো। সিএসএসে  সিলেক্টর হল আপনার এইচটিএমএল ট্যাগ গুলো অথবা সিএসএস ID এবং Class.  ID এবং Class নিয়ে বিস্তারিত আরও জানবো পরের পর্বগুলোতে। দ্বিতীয়ত {} কার্লি ব্র্যাকেট (যেটাকে আমরা গাণিতিক ভাষায় দ্বিতীয় বন্ধনী বা second bracket বলে জানি), এরপর কার্লি ব্র্যাকেট এর ভিতরে আপনার সিএসএস প্রোপার্টি তারপর ক্লোন (:) সাইন দিতে হবে, এরপর প্রোপার্টি এর ভাল্যু দিয়ে সিএসএস ডিক্লারেশন শেষ করতে হবে। একাধিক ডিক্লারেশন থাকলে, একটি শেষ করে আরেকটি শুরু করার আগে সেমিক্লোন (;) দিতে হবে। শেষ ডিক্লারেশনের শেষে সেমিক্লোন দেয়া বাদ্ধতামূলক না। তবে দেয়াটা গুড প্র্যাকটিস! 🙂

CSS কোডিং ফরম্যাটঃ

সিএসএস কোডিং আমরা ২ভাবে লিখতে পারি। নিচের হরিজন্টাল কোডিং ফরমেটটি সাধারণতও যারা একদম প্রাইমারি লেভেলের সিএসএস কোডিং শিখে তাঁদেরকে করতে দেখা যায়। আমি বলছি না যে এটা খারাপ তবে, একটা কথা মনে রাখতে হবে আপনি যখন কোন কাজের কোডিং করবেন সেটা হোক ওয়েবসাইটের জন্য এইচটিএমএল, সিএসএস, পিএইচপি অথবা অন্যকোনো কাজের কোডিং। সবসময় সিন্টেক্সট (পদ বিন্যাস) এবং ভার্টিকাল ফরমেট মেনে করাটাই উত্তম। এতে আপনার কাজ পরিচ্ছন্ন এবং কোডিং এর নান্দনিকতা প্রকাশ পাবে। আর মনে রাখবেন, আপনি যখন ভাল মানের কোডার হতে পারবেন, আপনার কাজের মান বাড়বে এবং কাজের মূল্য বেশি ধরতে পারবেন। এতে আপনার কাজের রেপুটেশনতো বাড়বেই, সাথে বায়ার সন্তুষ্টি অর্জন করতে পারবেন।

Horizontal Format

[html]body{background-color: green; font-family: Tahoma; font-size: 12px;}[/html]

Vartical Format

[html]body{
background-color: green;
font-family: Tahoma;
font-size: 12px;
}[/html]

Note: মনে রাখবেন, সিএসএস এর property এর নাম যদি এক শব্দের বেশি হয় তাহলে শব্দ দুটির মাঝে কোন ফাঁকা রাখলে সেই প্রপার্টি এর কোন ফলাফল আসবে না। সেজন্য দুই বা তাঁর বেশি শব্দের property এর নাম লিখতে হলে সব্দ গুলোর মাঝে হাইফেন(-) দিয়ে লিখতে হবে। সিএসএস এ আমরা যে selector নিয়ে কাজ করবো সেটি এইচটিএমএল এর একটি TAG, যেমনঃ body, h1, p, span, div ইত্যাদি। তেমনিভাবে, value এর মান যদি দু’ধরনের ডাটা টাইপ এর সমন্বয়ে হয় যেমনঃ 12px, তাহলে ডাটা টাইপ দু’টিকে একসাথে 12px লিখতে হবে। নিচের কোডটি লক্ষ করুনঃ

সঠিক কোডিং পদ্ধতিঃ font-size: 12px
ভুল কোডিং পদ্ধতিঃ font size: 12 px

পরবর্তি পর্বে আসছে CSS টাইপস নিয়ে। সেই পর্যন্ত সবাই ভাল থাকুন সুস্থ থাকুন!

আর হ্যাঁ,  বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন। 🙂