এইচটিএমএল( HTML), সিএসএস( CSS ) এবং জাভাস্ক্রিপ্ট( JavaScript )… ওয়েব ফ্রন্ট-এন্ড ডেভলপমেন্টের 3 টি প্রধান ভাষা।এই আর্টিকেল এ, আমি সিএসএসের বেসিকগুলি কভার করব। সুতরাং আপনার যদি সিএসএস সম্পর্কে কোনও ধারণা না থাকে বা কীভাবে এটি ব্যবহার করতে হয় তা না জানেন তবে এই আর্টিকেল আপনার জন্য

সিএসএস কী, কীভাবে সিএসএস লিখতে হয় এবং কীভাবে সেগুলি এইচটিএমএলতে যুক্ত করা যায় সে সম্পর্কে আমাদের নজর থাকবে।

সিএসএস কি?

সিএসএস (ক্যাসকেডিং স্টাইল শীট) ওয়েবপেজগুলি স্টাইল করার জন্য একটি ভাষা। আমরা CSS ব্যবহার করে কোনও ওয়েবপেজের ডিজাইন এবং লেআউট পরিবর্তন করতে পারি। ডেস্কটপ, ট্যাবলেট এবং মোবাইল ডিভাইসগুলির মতো বিভিন্ন স্ক্রিনে কোনও ওয়েবসাইটের ভিউ কীভাবে পরিবর্তিত হয় তা আমরাও নির্ধারণ করতে পারি।

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

আসুন একটি ওয়েবসাইটে সিএসএসের ইফেক্ট প্রকাশ করার জন্য একটি উদাহরণ দিয়ে চালিয়ে দেওয়া যাক। নীচে আপনি দেখতে পাচ্ছেন যে ফেসবুকটি যথারীতি দেখতে (সিএসএস সহ):

এবং আপনি এখানে সিএসএস ছাড়াই ফেসবুকের চেহারা দেখছেন:

আমরা দেখতে পাচ্ছি, সিএসএস একটি ওয়েবসাইটের ভিজ্যুয়াল উপস্থাপনাটিকে আরও ভাল করে তোলে।

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

আসুন আমাদের প্রথম সিএসএস কোড লিখি। উদাহরণস্বরূপ, আমি <h1> ট্যাগটির রঙ পরিবর্তন করতে চাই।

I’m a Header

প্রথমত, আমাদের এইচটিএমএল এলিমেন্ট কীভাবে সন্ধান করতে হয় তা সিএসএসকে বলতে হবে । আমরা এটি “সিলেক্টর” নামে একটি বৈশিষ্ট্য দিয়ে করতে পারি । সিএসএসে একটি সিলেক্টর তাদের ট্যাগের নাম, শ্রেণীর নাম, আইডি এবং আরও অনেক কিছু দ্বারা এইচটিএমএল এলিমেন্টগুলি অনুসন্ধান করতে ব্যবহৃত হয়।

সুতরাং নীচে আমি এইচটিএমএল এলিমেন্টের জন্য একটি সিলেক্টর এর ট্যাগ নামের <h1> এর উপর ভিত্তি করে সংজ্ঞায়িত করেছি:

h1 { }  // An example of a selector 

এর পরে, আমরা সিএসএস এর নিয়মগুলি ঘোষণা করতে পারি, সিলেক্টর বন্ধনীগুলির মধ্যে, প্রত্যেকটি একটি অর্ধ-কোলন দিয়ে শেষ হয়:

h1 {   // CSS rules between brackets
  color: red;
} 

সুতরাং সিলেক্টর  (h1) এর উপর ভিত্তি করে সিএসএস এখন বুঝতে পারে নতুন রুলস কোথায় প্রয়োগ করতে হবে:

সিএসএস সিলেক্টর সংজ্ঞায়িত করার বিভিন্ন উপায় রয়েছে, নীচে আপনি সিলেক্টর এর কয়েকটি  উদাহরণ দেখতে পাবেন:

ক্লাস সিলেক্টর(Class Selector) : তাদের ক্লাসের বৈশিষ্ট্য অনুসারে এইচটিএমএল এলিমেন্টগুলি সন্ধান করে

আইডি সিলেক্টর(Id Selector): তাদের নির্দিষ্ট আইডির সাহায্যে এলিমেন্টগুলি সন্ধান করে

এলিমেন্ট সিলেক্টর (Element Selector): তাদের ট্যাগ নাম দ্বারা এলিমেন্টগুলি সন্ধান করে

সিএসএস সিলেক্টর সম্পর্কে আরও জানতে আপনি এখানে পরীক্ষা করতে পারেন।

এইচটিএমএলে সিএসএস কীভাবে যুক্ত করবেন?

সিলেক্টর  কেন এবং কীভাবে ডিফাইন করতে হবে এবং কিছু সিএসএস কোড লিখতে হবে তা এখন আপনি শিখে গেছেন।

আমরা এইচটিএমএল ফাইলে 3 টি বিভিন্ন উপায়ে সিএসএস যুক্ত করতে পারি:

১. এক্সটার্নাল সিএসএস ফাইল:

পৃথক ফাইলে সিএসএস কোড রাখা সেরা অনুশীলন। বাস্তব প্রোগ্রামিং জগতে, আমাদের এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কোড পৃথক ফাইলে রাখা এবং পরে প্রয়োজনের সাথে সেগুলি ইম্পোর্ট করা দরকার।

আমরা .css এর এক্সটেনশান সহ একটি পৃথক সিএসএস ফাইল তৈরি করতে এবং এটি HTML এ অন্তর্ভুক্ত করতে পারি।

উদাহরণস্বরূপ, আমরা এটির মতো একটি সিএসএস ফাইল তৈরি করতে পারি: index.css

ইনডেক্স কোডের (index.css) ভিতরে, আমরা আমাদের সিএসএস কোড লিখতে পারি:

p {  
  color: red;
}

তারপরে আমরা নীচের মতো <লিঙ্ক> ট্যাগ দিয়ে সূচি.এসএসটিএমএল ইম্পোর্ট করতে পারি:

সুতরাং এখন এইচটিএমএল ফাইলের সিএসএস কোড রয়েছে এবং পরিবর্তনগুলি এলিমেন্টগুলির জন্য প্রযোজ্য হবে।

2. <স্টাইল> ট্যাগ সহ ইন্টারনাল সিএসএস:

আর একটি উপায় যেখানে আপনি সিএসএস কোড লিখতে পারেন তা HTML এ <স্টাইল> ট্যাগের মধ্যে। এটি সিএসএস কোডটি পৃথক ফাইলের চেয়ে সরাসরি এইচটিএমএল ফাইলের অভ্যন্তরে রাখবে।

৩. ইনলাইন স্টাইল:

তৃতীয় উপায়টি হল সিএসএস রুলস ডাইরেক্টলি কোনও এইচটিএমএল এলিমেন্টের অভ্যন্তরে লিখা। এই পদ্ধতিতে আমরা সিএসএসের নিয়মগুলি সরাসরি ট্যাগের মধ্যেই সংজ্ঞায়িত করি এবং এর জন্য কোনও ক্লাস তৈরি করার দরকার নেই।

<p style=”color: blue; font-size: 22px;”> I’m a Simple man </p>

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

সিএসএসের বিশ্বে এক্সপ্লোর করার জন্য আরও অনেকগুলি বিধি এবং বৈশিষ্ট্য রয়েছে। আমি আমার নিম্নলিখিত আর্টিকেলে সেগুলি কভার করব।

আপনাকে অনেক ধন্যবাদ আর্টিকেলটি পড়ার জন্য । ভাল থাকবেন এবং পরিবারকে সময় দিবেন ।