ক্যাসকেডিং স্টাইল শীট কি এবং সিএসএস কি জন্য ব্যবহার করা হয়?

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

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

CSS দেখতে কেমন?

সিএসএস একটি বড় ভাষা style স্টাইলের জন্য বিভিন্ন জিনিস আছে! কিন্তু এর বাক্য গঠন সহজবোধ্য, শুধুমাত্র কয়েকটি নিয়ম শিখতে হবে।

এইচটিএমএল উপাদানগুলির বিভিন্ন বৈশিষ্ট্য রয়েছে যা সিএসএস স্টাইল করতে পারে। দ্য রঙ প্রপার্টি ফোরগ্রাউন্ড (যেমন টেক্সট) কালার সেট করে। ফন্ট সাইজ নির্ভর করে অক্ষরের আকার সম্পত্তি

প্রতিটি সম্পত্তি একটি সমর্থিত মান সেট করা যেতে পারে। একটি সম্পত্তির জন্য একটি মান বরাদ্দ করা হল একটি 'ঘোষণা'। সাধারণত, তারা এই মত দেখায়:

property: value

উদাহরণ স্বরূপ:

কিভাবে হোমব্রিউ চ্যানেল ইনস্টল করবেন

color: red

বিভিন্ন বৈশিষ্ট্যের মান খুব আলাদা, এমনকি একই সম্পত্তির মানও দেখতে পারে। উদাহরণস্বরূপ, পূর্ববর্তী ঘোষণা লেখার আরও দুটি উপায় এখানে দেওয়া হল:

color: #ff0000  
color: rgb(255, 0, 0)

কিভাবে এইচটিএমএল এবং স্টাইল শীট একসাথে আসে

আপনি এইচটিএমএল এবং সিএসএসকে কয়েকটি ভিন্ন উপায়ে একত্রিত করতে পারেন, প্রতিটি তার সুবিধার সাথে।

লেখার স্টাইল ইনলাইন

সবচেয়ে সহজ পদ্ধতি হল স্টাইল ডিক্লারেশন সরাসরি HTML ফাইলের একটি এলিমেন্টের সাথে সংযুক্ত করা। আপনি এটি ব্যবহার করে করতে পারেন শৈলী এর মতো বৈশিষ্ট্য:

  
 Most of this text is red …
  
 … but this isn’t!

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

মাথার মধ্যে শৈলী এম্বেড করা

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

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

যদিও আমাদের শৈলী নির্দেশাবলী আগের তুলনায় একটু বেশি বিস্তারিত প্রয়োজন। যেহেতু আমরা সেগুলিকে মাথার দিকে সরিয়ে দিয়েছি, তাই প্রতিটি নিয়ম আর একটি উপাদানের সাথে যুক্ত নয়। আমরা হয়তো ঘোষণা করেছি লাল রঙ , কিন্তু সেই রঙ কি হওয়া উচিত?

এখানেই সিএসএস নির্বাচকরা আসেন। তারা আমাদের এই বাক্য ব্যবহার করে পৃষ্ঠার নির্দিষ্ট অংশগুলিকে টার্গেট করতে এবং তাদের স্টাইলকে এক জায়গায় সংজ্ঞায়িত করতে দেয়:

কিভাবে উইন্ডোজ 10 এ র‍্যাম ব্যবহার কমানো যায়

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

উদাহরণস্বরূপ, অনুচ্ছেদের পাঠ্য নীল করার জন্য, আমরা নিম্নলিখিতগুলি নির্দিষ্ট করতে পারি:

p {  
 color: blue;  
}

এই উদাহরণে, নির্বাচক সহজভাবে পৃ , যা আমাদের নথির সমস্ত অনুচ্ছেদের উপাদানগুলির সাথে মেলে। যতক্ষণ এটি থাকবে ততক্ষণ এটি সমস্ত পাঠ্যকে নীল রঙ করবে

একটি বহিরাগত স্টাইল শীট লিঙ্ক করা

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

এই কোডটি ভিতরে আটকান আপনার বাহ্যিক স্টাইল শীট লিঙ্ক করার জন্য আপনার HTML ফাইলের ট্যাগগুলি।

CSS এর ক্ষমতা

সংযুক্ত পদ্ধতির সাথে, আমরা CSS- এর একটি মূল শক্তি ব্যবহার করছি: উদ্বেগের বিচ্ছেদ। সমস্ত শব্দার্থিক তথ্য - বিষয়বস্তুর অর্থ কী - HTML নথিতে রয়েছে। স্টাইলিং - এটি দেখতে কেমন - একটি পৃথক ফাইলে, স্টাইল শীটে।

এখানে এই বিচ্ছেদের কয়েকটি সুবিধা রয়েছে:

আপনি কেবল ফাইল রেফারেন্স পরিবর্তন করে একটি স্টাইল শীট পরিবর্তন করতে পারেন। এটি এমনকি গতিশীলভাবে ঘটতে পারে। এক ধাপে, আপনি একটি পৃষ্ঠার সম্পূর্ণ চেহারা এবং অনুভূতি পরিবর্তন করতে পারেন।

অনেক পৃষ্ঠা প্রয়োজন অনুযায়ী একই স্টাইল শীট শেয়ার করতে পারে। একটি একক ফাইল পরিবর্তন করে, আপনি একটি সম্পূর্ণ ওয়েবসাইটের চেহারা এবং অনুভূতি আপডেট করতে পারেন।

একটি পৃষ্ঠাকে 'বিষয়বস্তু' এবং 'শৈলীতে' বিভক্ত করার প্রযুক্তিগত সুবিধা রয়েছে। প্রক্সি এবং ব্রাউজার পৃথক ফাইল আলাদাভাবে ক্যাশে করতে পারে। এর মানে হল যে একটি সাইট তার স্টাইলের তথ্য একবার পাঠাতে পারে, এটি প্রতিটি একক পৃষ্ঠায় অন্তর্ভুক্ত করার পরিবর্তে।

সহযোগিতা করার সময়, বিভিন্ন দল তাদের শক্তিতে কাজ করতে পারে, একে অপরকে প্রভাবিত না করে পৃথক ফাইল তৈরি এবং সম্পাদনা করতে পারে।

ক্যাসকেড ব্যাখ্যা করা

আপনি শৈলী এবং স্টাইল শীট সম্পর্কে অনেক কিছু শিখেছেন, কিন্তু CSS এর ক্যাসকেডিং অংশ সম্পর্কে কি?

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

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

ক্যাসকেড নির্দিষ্ট করে যে ব্যবহারকারী-এজেন্ট শৈলীর পরে একটি লেখক স্টাইল শীট প্রযোজ্য। আমাদের ব্রাউজার যদি শিরোনামগুলোকে সাহসী বলে কিন্তু পৃষ্ঠার লেখক এই পৃষ্ঠার শিরোনামগুলিকে হালকা বলে ঘোষণা করে, তাহলে সেগুলি হালকা হয়ে যাবে।

আরেকটি স্টাইল শীট উৎস আছে যা পাঠকের হাতে কিছু নিয়ন্ত্রণ তুলে দেয়। যে কোনো ওয়েব ব্যবহারকারী, তত্ত্বগতভাবে, কাস্টম নিয়মের সাথে ব্যবহারকারীর স্টাইল শীট বজায় রাখতে পারেন। এইগুলি মাঝখানে বসে আছে: ব্যবহারকারীর নিয়মগুলি ডিফল্ট ব্রাউজার সেটিংসকে ওভাররাইড করবে, তবে লেখকের স্টাইলগুলি দ্বারা তারা নিজেরাই ওভাররাইড হবে। দুlyখজনকভাবে, ব্যবহারকারীর স্টাইল শীটের জন্য সমর্থন কখনও ব্যাপক নয়।

বিভিন্ন মিডিয়াকে টার্গেট করা

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

সম্পর্কিত: আপনি যদি অন্ধ বা দৃষ্টি প্রতিবন্ধী হন তাহলে কিভাবে ওয়েব ব্রাউজ করবেন
কিভাবে xbox 360 হার্ডড্রাইভ ইনস্টল করবেন

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

CSS HTML কে সুন্দর করে তোলে

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

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

প্রোগ্রামিং

ওয়েব ডেভেলপমেন্ট

সিএসএস

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

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন