একটি ক্যাসকেডিং স্টাইল শীট (সিএসএস) হল ওয়েবসাইট কোডিংয়ের একটি সিস্টেম যা ডিজাইনারদের গ্রুপে নির্দিষ্ট উপাদান বরাদ্দ করে একসাথে বেশ কয়েকটি বৈশিষ্ট্য ম্যানিপুলেট করতে দেয়। উদাহরণস্বরূপ, ওয়েবসাইটের পটভূমির জন্য একটি কোড ব্যবহার করে, ডিজাইনাররা সিএসএস ফাইলে এক পরিবর্তন সহ ওয়েবসাইটের সমস্ত পৃষ্ঠায় পটভূমির রঙ বা চিত্র পরিবর্তন করতে পারেন। মৌলিক ওয়েবসাইটের জন্য কিভাবে CSS তৈরি করা যায় তা এখানে।
ধাপ
4 এর অংশ 1: ইনলাইন CSS লেখা
ধাপ 1. নিশ্চিত করুন যে আপনার HTML ট্যাগগুলির প্রাথমিক ধারণা আছে।
ট্যাগগুলি কীভাবে এবং কীভাবে কাজ করে তা আপনার জানা উচিত
src
এবং
href
বৈশিষ্ট্য
পদক্ষেপ 2. কিছু মৌলিক CSS বৈশিষ্ট্য জানুন।
আপনি দেখতে পাবেন যে অনেকগুলি বৈশিষ্ট্য রয়েছে। যাইহোক, তাদের সব শেখার প্রয়োজন নেই।
-
কিছু ভালো বেসিক CSS প্রপার্টি জানা আছে
রঙ
এবং
ফন্ট-পরিবার
- .
ধাপ 3. প্রতিটি নিজ নিজ সম্পত্তির মান সম্পর্কে জানুন।
সমস্ত বৈশিষ্ট্যের একটি মান প্রয়োজন। জন্য
রঙ
সম্পত্তি, উদাহরণস্বরূপ, আপনি
লাল
মান
ধাপ 4. সম্পর্কে জানুন
শৈলী
HTML বৈশিষ্ট্য।
এটি যেমন একটি উপাদানের মধ্যে ব্যবহার করা হয়
href
অথবা
src
। এটি ব্যবহার করার জন্য, সমান চিহ্নের পরে উদ্ধৃতি চিহ্নের মধ্যে, CSS অ্যাট্রিবিউট, একটি কোলন এবং তারপর সম্পত্তির মান রাখুন। এটি একটি CSS নিয়ম হিসাবে পরিচিত।
ধাপ 5. বুঝে নিন যে ইনলাইন CSS সাধারণত পেশাদার ওয়েব ডেভেলপাররা ওয়েবসাইটের জন্য ব্যবহার করে না।
ইনলাইন CSS একটি HTML নথিতে অপ্রয়োজনীয় বিশৃঙ্খলা যোগ করতে পারে। যাইহোক, সিএসএস কীভাবে কাজ করে তার সাথে পরিচিত হওয়ার এটি একটি দুর্দান্ত উপায়।
4 এর মধ্যে পার্ট 2: মৌলিক CSS লেখা
ধাপ 1. আপনি যে প্রোগ্রামটি ব্যবহার করতে চান তা চালু করুন।
এটি আপনাকে HTML এবং CSS ফাইল তৈরি করার অনুমতি দেবে।
যদি আপনার কোন বিশেষ প্রোগ্রাম ইনস্টল না থাকে, আপনি নোটপ্যাড বা অন্য টেক্সট এডিটর ব্যবহার করতে পারেন। কেবল আপনার ফাইলটি একটি টেক্সট ফাইল এবং একটি CSS ফাইল হিসাবে সংরক্ষণ করুন।
পদক্ষেপ 2. আপনার ওয়েবসাইটের জন্য HTML ফাইলটি খুলুন।
আপনার যদি এটি ইনস্টল করা থাকে তবে এটি একটি এইচটিএমএল এডিটর দিয়েও খুলতে হবে।
এইচটিএমএল এডিটর আপনাকে একই সাথে এইচটিএমএল এবং সিএসএস সম্পাদনা করতে দেয়।
ধাপ 3. আপনার এইচটিএমএল হেডের মধ্যে একটি ট্যাগ তৈরি করুন।
এটি আপনাকে একটি পৃথক ফাইলের প্রয়োজন ছাড়াই CSS লিখতে দেবে।
ধাপ 4. আপনি যে উপাদানটি স্টাইলিং যোগ করতে চান তা চয়ন করুন এবং উপাদানটির নাম টাইপ করুন এবং তারপরে একটি কোঁকড়া ধনুর্বন্ধনী ({}) সেট করুন।
আপনার কোডটি আরও সুস্পষ্ট করতে, সর্বদা দ্বিতীয় কোঁকড়া ব্রেসটি তার নিজস্ব লাইনে রাখুন।
ধাপ 5. বন্ধনীগুলির মধ্যে, আপনার CSS নিয়মগুলি টাইপ করুন যেমন আপনি ব্যবহার করবেন
শৈলী
বৈশিষ্ট্য
প্রতিটি লাইন একটি সেমিকোলন (;) দিয়ে শেষ করতে হবে। আপনার কোডটি সুস্পষ্ট করার জন্য, প্রতিটি নিয়ম তার নিজস্ব লাইনে শুরু করা উচিত এবং প্রতিটি লাইন ইন্ডেন্ট করা উচিত।
এটি লক্ষ্য করা খুব গুরুত্বপূর্ণ যে এই স্টাইলিং পৃষ্ঠায় নির্বাচিত ধরণের সমস্ত উপাদানকে প্রভাবিত করবে। আরো নির্দিষ্ট স্টাইলিং পরবর্তী বিভাগে আচ্ছাদিত করা হবে।
4 এর 3 ম অংশ: আরো উন্নত CSS
ধাপ 1. একটি CSS ফাইল তৈরি করুন, HTML ফাইল নয় এবং এটি ব্যবহার করে সংরক্ষণ করুন
.css
সম্প্রসারণ
আপনার HTML ফাইলটিও খুলুন।
ধাপ 2. আপনার HTML মাথায় একটি ট্যাগ তৈরি করুন।
এটি আপনাকে আপনার HTML ডকুমেন্টের সাথে একটি পৃথক CSS ফাইল লিঙ্ক করার অনুমতি দেবে। আপনার লিঙ্ক ট্যাগের তিনটি বৈশিষ্ট্য প্রয়োজন:
rel
টাইপ
এবং
href
-
rel
মানে "সম্পর্ক" এবং ব্রাউজারকে বলে HTML ডকুমেন্টের সাথে সম্পর্ক কি। এখানে এর একটি মান থাকা উচিত
"স্টাইলশীট"
- .
-
টাইপ
কোন ধরনের মিডিয়া যুক্ত হচ্ছে তা বলে। এখানে এর একটি মান থাকা উচিত
"টেক্সট/সিএসএস"
-
href
- এখানে কিভাবে এটি একটি উপাদান ব্যবহার করা হয় অনুরূপভাবে ব্যবহার করা হয়, কিন্তু এখানে এটি একটি CSS ফাইলের সাথে লিঙ্ক করা আবশ্যক। যদি CSS ফাইলটি HTML ফাইলের মতো একই ফোল্ডারে থাকে, তবে শুধুমাত্র উদ্ধৃতি চিহ্নের মধ্যে ফাইলের নাম লিখতে হবে।
ধাপ different. বিভিন্ন ধরনের উপাদান নির্বাচন করুন যা আপনি একই স্টাইলিং যোগ করতে চান।
যুক্ত কর একটি
শ্রেণী
এই উপাদানগুলির বৈশিষ্ট্য এবং সেগুলি আপনার পছন্দের শ্রেণীর নামের সমান সেট করুন। এটি আপনার উপাদানগুলিকে একই স্টাইলিং দেবে।
ধাপ 4. একটি ক্লাস কি স্টাইলিং পাবে তা নির্ধারণ করুন।
আপনার CSS ফাইলে ক্লাসের নাম টাইপ করুন (।) এর পূর্বে (যেমন)
ক্লাস
).
ধাপ 5. একক উপাদান নির্বাচন করুন যা আপনি বিশেষ স্টাইলিং যোগ করতে চান এবং একটি যোগ করুন
আইডি
বৈশিষ্ট্য
সিডিএসে আইডি তৈরি করা হয় একটি সময়ের পরিবর্তে একটি পাউন্ড প্রতীক (#) ব্যবহার করে।
আইডি ক্লাসের চেয়ে বেশি সুনির্দিষ্ট, তাই একটি আইডি ক্লাসের স্টাইলিংকে ওভাররাইড করবে যদি এটি ক্লাসের চেয়ে ভিন্ন মানের একটি বৈশিষ্ট্য থাকে।
4 এর 4 ম অংশ: আরো শেখা
ধাপ 1. w3 বিদ্যালয় পরিদর্শন করুন।
এটি একটি ডেভেলপমেন্ট দক্ষতা শেখানোর লক্ষ্যে একটি অফিসিয়াল ওয়েবসাইট। W3 তে HTML এবং CSS এর পাশাপাশি অন্যান্য ওয়েব ভাষার জন্য প্রচুর রেফারেন্স রয়েছে।
পদক্ষেপ 2. এইচটিএমএল এবং সিএসএস শেখার এবং শেখানোর লক্ষ্যে অন্যান্য সাইটগুলি সন্ধান করুন।
CSS tricks.com এর মত সাইটগুলো বিশেষভাবে CSS এবং ওয়েব ডিজাইন দক্ষতা শেখানোর লক্ষ্যে। সম্মানিত উৎসের সন্ধান আপনাকে আপনার শিক্ষার যাত্রায় সাহায্য করবে।
ধাপ 3. ওয়েব ডিজাইনার এবং ডেভেলপারদের সাথে যোগাযোগ করুন।
তাদের অভিজ্ঞতা এবং জ্ঞান আপনাকে মূল্যবান জ্ঞান এবং দক্ষতা শেখাতে পারে।
ধাপ 4. আপনি যে ওয়েবসাইটগুলি দেখতে পান তার সোর্স কোড দেখুন।
উন্নত ওয়েবসাইটের CSS দেখা আপনাকে ওয়েবসাইটের অংশ ডিজাইন করার উপায় দেখাতে পারে। অনুশীলন হিসাবে এটি অনুলিপি করা এবং কোডের সাথে ঝগড়া করা আপনাকে বিভিন্ন CSS বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করতে হয় তা শিখতে সহায়তা করতে পারে।
