ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-১০] :: সিএসএস সিনট্যাক্স (CSS Syntax)

আসসালামু আলাইকুম । কেমন আছেন সবাই? আশা করি মহান আল্লাহ্‌ তা'আলার অশেষ রহমতে সবাই ভাল আছেন? আমিও আলহামদুলিল্লাহ্‌ ভাল আছি ।

গত পর্বে আমরা সিএসএস কি এসব নিয়ে আলোচনা করেছিলাম । আজ আমি সিএসএস এর সিনট্যাক্স সম্পর্কে আলোচনা করবো ।

সিএসএস এর গঠনকে দুটি অংশে ভাগ করা যায় । এগুলো হচ্ছে;

  • সিলেক্টর
  • ডিকলারেশন

সিলেক্টরঃ সিলেক্টর মূলত এইচটিএমএল ট্যাগ, যেমন; body, p, h1, h2, h3, h4. h5, h6 ইত্যাদি । সিলেক্টরের মাধ্যমে এইচটিএমএল ট্যাগকে সিলেক্ট করা হয় এবং পরবর্তীতে সেই সিলেক্টর নিয়ে কাজ করা হয় । পরবর্তী অধ্যায়সমূহে সিলেক্টর নিয়ে আরও বিস্তারিত আলোচনা করা হয়েছে ।

ডিকলারেশনঃ সিলেক্টরের মাধ্যমে এইচটিএমএল ট্যাগকে সিলেক্ট করার পর ডিকলারেশন এর মাধ্যমে স্টাইল নির্ধারণ করা হয় । ডিকলারেশন এর দুটি অংশ থাকেঃ এগুলো হচ্ছে,  Property এবং Value.

Property এবং Value এর মাঝে কোলন (:) চিহ্ন ব্যবহার করা হয় । একটি সিএসএস ফাইলের গঠন হবে;

Selector {Property: Value}

উদাহরণ;


p {text-align:center; color:black; font-family:arial; }

h1 {color: red; text-align: center; }


*সিএসএস ফাইল .css এক্সটেনশন দিয়ে সেভ করতে হয় । যেমন; style.css

*সিএসএস লেখার জন্য দ্বিতীয় বন্ধনী ব্যবহার করা হয় । যেমন;  h1 {font-size: 36px; }

*একাধিক ডিকলারেশন এর জন্য সেমিকোলন (;) ব্যবহার করতে হয় । যেমন;  p {color: red;  font-family: Times New Roman; }

সিএসএস কমেন্ট

কোড প্রকাশ করার জন্য কমেন্ট অত্যন্ত গুরুত্বপূর্ণ । আমরা কমেন্ট ব্যবহার করে সহজেই বুঝতে পারি যে কোন কোড কি কারনে ব্যবহার করা হয়েছে । এতে, পরিবর্তিতে কোড পরিবর্তন করতে সুবিধা হয় । কমেন্ট ব্রাউজারে প্রদর্শন হয় না । এছাড়াও আপনারা কমেন্ট সম্পর্কে এইচটিএমএল টিউটোরিয়াল এ জেনেছেন ।

সিএসএস কমেন্ট লেখার জন্য /* */  ব্যবহার করা হয় । যেমন;


/* This is Comment */ 
p {text-align:center; color:black; font-family:arial; }
h1 {color: red; text-align: center; }

 

 

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

আমাকে ফেইসবুক এ পেতে এখানে ক্লিক করুন ।

আপনার যদি কোন প্রশ্ন থাকে তাহলে নির্দ্বিধায় করতে পারেন । যদি টিউটোরিয়ালটি পড়ে আপনাদের ভাল লাগে তাহলে কমেন্ট করতে ভুলবেন না । যদি কোন ভুল থাকে আমাকে জানাবেন আমি সংশোধন করে নিব । ধন্যবাদ সবাইকে আমার আজকের টিউটোরিয়ালটি মনোযোগ দিয়ে পড়ার জন্য ।

ভাল থাকবেন সবাই । আল্লাহ্‌ হাফেজ ।

Level 0

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 12 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

এখানে উদাহরণে যা লেখা হয়েছে সবকিছুই ব্রাউজারে দেখায়।

    @আশ্রাফ: আপনার কমেন্ট পড়ে বুঝতে পারলাম যে আপনি প্র্যাকটিস করেন । খুবই ভাল লাগলো ।
    আজ আমি সিএসএস সিনট্যাক্স নিয়ে আলোচনা করেছি । কিভাবে সিএসএস ব্যবহার করবেন তা এখনো দেখানো হয়নি ।

টিউন করার জন্য ধন্যবাদ, আশা করছি শেষ পর্যন্ত চালিয়ে যাবেন …।

darun hoyeche, Apni aktu php help korben plz?

facebook link ta din

Level 2

Apnar baki porbo gulo kothay?
Proti post e jodi link diyr diten.khub valo hoto.

vai ki post deya teke biroto thakcen?

ধন্যবাদ ভাই তবে এটাই কি শেষ পোস্ট ?? 🙁

ভাই, CSS এর পর্বটা কি লেখা শেষ করে দিলেন….???

ভাই পরবর্তি টিউনের অপেক্ষায় আছি

Sometimes it is hard to figure out the right way to thank someone.
Also, Thank You, And Thank You. . .
Hope, Your Mind and Body is waiting for Allah, always good condition.