এটা ভাল যে আমি আত্ম-উন্নয়নে নিযুক্ত আছি।

আমি এক মাস বা তার কম সময়ে সিএসএস শিখতে পারি।

ধাপ 4: একটি ব্রাউজারে HTML পৃষ্ঠা দেখুন

একটি ব্রাউজারে উদাহরণটি খুলুন এবং নিশ্চিত করুন যে আমাদের উদাহরণের ফলাফল চিত্রের সাথে মেলে:

একটি বাহ্যিক স্টাইল শীট সংযোগ করা হচ্ছে

এখন আমরা একটি পৃথক ফাইল তৈরি করব যাতে একটি স্টাইল শীট থাকবে এবং এটিকে আমাদের HTML নথিতে সংযুক্ত করব।

1. Notepad++ এ, একটি নতুন খালি ফাইল তৈরি করুন এবং এটি page.css হিসাবে সংরক্ষণ করুন (আপনাকে অবশ্যই নির্বাচন করতে হবে ক্যাসকেড স্টাইল শীট *.css) একই ফোল্ডারে যেখানে আপনি HTML নথি তৈরি করেছেন।
2. আগের উদাহরণ থেকে CSS কোড সরান (ট্যাগের বিষয়বস্তু

   হ্যালো, বিশ্ব!

   এই উদাহরণ শিরোনাম শৈলী পরিবর্তন দেখায়

   .

   একটি ওয়েব পৃষ্ঠায়, আপনাকে এখন শুধুমাত্র এই ট্যাগটি নির্দিষ্ট করতে হবে এবং শৈলীগুলি এতে স্বয়ংক্রিয়ভাবে যুক্ত হবে৷

   অভ্যন্তরীণ শৈলী

   ইনলাইন শৈলী মূলত একটি ওয়েব পেজে ব্যবহৃত একটি ট্যাগের এক্সটেনশন। শৈলী বৈশিষ্ট্যটি একটি শৈলী সংজ্ঞায়িত করতে ব্যবহৃত হয় এবং এর মানগুলি একটি স্টাইল শীট ভাষা ব্যবহার করে নির্দিষ্ট করা হয় (উদাহরণ 3)।

   শৈলী

   হ্যালো, বিশ্ব!

   একক ট্যাগের জন্য অভ্যন্তরীণ স্টাইলিং ব্যবহার করা বা এটি ব্যবহার না করার পরামর্শ দেওয়া হয়, যেহেতু বেশ কয়েকটি উপাদান পরিবর্তন করা সমস্যাযুক্ত হয়ে ওঠে। অভ্যন্তরীণ শৈলীগুলি একটি কাঠামোগত নথির আদর্শের সাথে সঙ্গতিপূর্ণ নয় যখন বিষয়বস্তু এবং এর নকশা আলাদা করা হয়। সমস্ত বর্ণিত পদ্ধতি CSS ব্যবহার করে

   হয় স্বাধীনভাবে বা একে অপরের সাথে সংমিশ্রণে ব্যবহার করা যেতে পারে। এই ক্ষেত্রে, তাদের অনুক্রম মনে রাখা প্রয়োজন।

   হ্যালো, বিশ্ব!

   হ্যালো, বিশ্ব!

   অভ্যন্তরীণ শৈলী সর্বদা প্রথমে প্রয়োগ করা হয়, তারপরে বিশ্বব্যাপী স্টাইল শীট এবং সর্বশেষ যুক্ত স্টাইল শীট। উদাহরণ 4 একটি নথিতে স্টাইল শীট যোগ করার জন্য দুটি পদ্ধতি ব্যবহার করে।

   উদাহরণ 4. বিভিন্ন শৈলী সংযোগ পদ্ধতির সমন্বয়উপরের উদাহরণে, প্রথম শিরোনামটি 36px লাল এবং পরেরটি সবুজ এবং একটি ভিন্ন ফন্টে সেট করা হয়েছে৷

   সিএসএস "ক্যাসকেডিং স্টাইল শীট" (ইংরেজি থেকে। ক্যাসকেডিং স্টাইল শীট)। CSS হল প্যারামিটারগুলির একটি সেট যা একটি ওয়েব পৃষ্ঠায় একটি নির্দিষ্ট উপাদান প্রদর্শন করতে ব্যবহৃত হয়। এই প্যারামিটারগুলি একটি পৃথক ফাইলে নির্দিষ্ট করা যেতে পারে বা সরাসরি পৃষ্ঠার HTML কোডে লিখিত হতে পারে। উদাহরণস্বরূপ, আমাদের ওয়েব পৃষ্ঠায় নিম্নলিখিত উপাদানগুলি থাকতে পারে: নিবন্ধের শিরোনাম, অনুচ্ছেদ, উদ্ধৃতি, পাদটীকা, ছবি, ভিডিও, লিঙ্ক। আপনি একটি নির্দিষ্ট প্রদর্শন শৈলী সেট করতে পারেন - আকার, রঙ, ফ্রেমের বেধ ইত্যাদি।একটি ওয়েবসাইটের সাথে কাজ করার সময়, স্টাইল সেটিংসের সাথে কোড এম্বেড করার পরিবর্তে শৈলী সহ একটি পৃথক ফাইল ব্যবহার করার পরামর্শ দেওয়া হয় পৃথক পৃষ্ঠা. এটি উল্লেখযোগ্যভাবে সময় কমিয়ে দেবে - যখন আপনি স্টাইল শীটের অবস্থান জানেন, আপনি সর্বদা দ্রুত একটি নির্দিষ্ট শৈলী খুঁজে পেতে এবং এটি সম্পাদনা করতে পারেন। স্টাইল ফাইলে এক্সটেনশন আছে .css.

   , এর নাম সাধারণত

   style.css CSS সংযোগফাইল করার বিভিন্ন উপায় আছে। আমরা দুটি পদ্ধতি সম্পর্কে কথা বলব যা প্রায়শই ওয়েবসাইট তৈরি করার সময় ব্যবহৃত হয়:

   1. লিঙ্কিং।এই পদ্ধতিটি ব্যবহার করা হয় যখন আপনাকে একটি ফাইলে একটি সাইটের সমস্ত পৃষ্ঠার জন্য শৈলী সেট করতে হবে। এই পদ্ধতিএকটি ওয়েবসাইট তৈরি করার সময় প্রায়ই ব্যবহৃত হয়। স্টাইল শীট সংযোগ করতে কমান্ডটি ব্যবহার করুন , যা অবশ্যই ট্যাগের বডিতে বসাতে হবে .

   প্রথম দুটি বৈশিষ্ট্য ব্রাউজারকে নির্দেশ করে যে সাইটটি CSS ব্যবহার করে, তারপর স্টাইলশীট ফাইলের ঠিকানা নির্দেশিত হয়।

   2. নথি ট্যাগ এম্বেডিং.এই পদ্ধতিতে, একটি নির্দিষ্ট পৃষ্ঠা উপাদানের জন্য শৈলী সরাসরি HTML কোডে সেট করা হয়। যেমন:

   এখানে আমরা সেই অনুযায়ী কন্টেইনারগুলির জন্য নির্দিষ্ট শৈলী করেছি

   এবং . এই শৈলী তাদের জন্য একচেটিয়াভাবে প্রয়োগ করা হবে.

   একটি স্টাইল শীটের উদাহরণ দেওয়া যাক - একটি ফাইল তৈরি করুন .cssএবং শৈলী লিখুন:

   body ( ফন্ট-পরিবার: Arial, Verdana, Sans-serif; /* Font family */ font-size: 12pt; /* বিন্দুতে বডি ফন্টের আকার */ ব্যাকগ্রাউন্ড-রঙ: #f0f0f0; /* ওয়েব পৃষ্ঠার পটভূমির রঙ * / রঙ: #000000; /* বডি টেক্সট রঙ */ ) h1 (রঙ: #a52a2a; /* হেডারের রঙ */ ফন্ট-সাইজ: 24pt; /* ফন্ট সাইজ ইন পয়েন্ট */ ফন্ট-ফ্যামিলি: জর্জিয়া, টাইমস, সেরিফ ; /* ফন্ট পরিবার */ ফন্ট-ওজন: স্বাভাবিক; /* সাধারণ পাঠ্য শৈলী */ )

   এখানে আমরা পেজ বডির জন্য স্টাইল সেট করেছি এবং শিরোনামের জন্য

   . আপনি আপনার ওয়েবসাইটে অন্য কোনো পৃষ্ঠা উপাদানের জন্য নির্দিষ্ট শৈলী সেট করতে পারেন।

   এখন সাইটের সাথে আমাদের স্টাইল শীট সংযোগ করা যাক:

   হ্যালো ওয়ার্ল্ড!

   CSS শৈলী সহ এটি আমার প্রথম পৃষ্ঠা

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

   একটি ওয়েব পৃষ্ঠায় শৈলী যোগ করার বিভিন্ন উপায় রয়েছে, যা তাদের ক্ষমতা এবং উদ্দেশ্যের মধ্যে ভিন্ন। এর পরে আরো বিস্তারিতভাবে তাদের তাকান.

   বাহ্যিক শৈলী শীট

   স্টাইলগুলি সিএসএস এক্সটেনশন সহ একটি পৃথক ফাইলে অবস্থিত; এলিমেন্টটি এইচটিএমএল ডকুমেন্টকে সিএসএস ফাইলের সাথে লিঙ্ক করতে ব্যবহৃত হয় . এটি ভিতরে অবস্থিত , উদাহরণ 1 এ দেখানো হয়েছে।

   উদাহরণ 1. বাহ্যিক শৈলী সংযুক্ত করা

   শিরোনাম

   rel অ্যাট্রিবিউটের মান সবসময় একটি স্টাইলশীট থাকবে এবং অপরিবর্তিত থাকবে। href মান হল CSS ফাইলের পথ; পথ আপেক্ষিক বা পরম হয় নির্দিষ্ট করা যেতে পারে। মনে রাখবেন যে এইভাবে আপনি একটি স্টাইল শীট সংযোগ করতে পারেন যা অন্য সাইটে অবস্থিত। উপরের উদাহরণে, আমরা গুগল ফন্ট ওয়েবসাইট থেকে সিরিলিক ফন্ট লবস্টার সংযোগ করি।

   style.css ফাইলের বিষয়বস্তু উদাহরণ 2 এ দেখানো হয়েছে।

   উদাহরণ 2: style.css ফাইলের বিষয়বস্তু

   H1 (ফন্ট-ফ্যামিলি: "লবস্টার", কার্সিভ; রঙ: সবুজ; )

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

   অভ্যন্তরীণ শৈলী শীট

   স্টাইলগুলি উপাদানের ভিতরেই HTML নথিতে লেখা হয়।

   শিরোনাম

   এই উদাহরণে, উপাদান শৈলী সেট করা আছে

   , যা তারপর একটি প্রদত্ত ওয়েব পৃষ্ঠা জুড়ে ব্যবহার করা যেতে পারে (চিত্র 1)। দয়া করে মনে রাখবেন যে আমরা নিরাপদে একত্রিত করতে পারি সঙ্গে

   শিরোনাম 1

   শিরোনাম 2

   এই উদাহরণে, শৈলী বৈশিষ্ট্য ব্যবহার করে প্রথম শিরোনামটি লাল এবং আকার 36 পিক্সেল সেট করা হয়েছে এবং দ্বিতীয় শিরোনামটি উপাদান ব্যবহার করে সবুজে সেট করা হয়েছে

   শিরোনাম 1

   শিরোনাম 2

   এই উদাহরণটি সিরিলিক ফন্ট লবস্টার সংযোগ করতে Google ফন্ট ওয়েবসাইট থেকে একটি শৈলী ফাইল আমদানি দেখায়।