বিষয়বস্তু মার্কেটিং

ক্যাসকেডিং স্টাইল শীট (সিএসএস) কি?

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

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

CSS ভাষা কাঠামো

সার্জারির নির্বাচক আপনি স্টাইল করতে চান HTML উপাদান, এবং সম্পত্তি এবং মূল্য আপনি সেই উপাদানটিতে যে শৈলীগুলি প্রয়োগ করতে চান তা সংজ্ঞায়িত করুন:

selector {
  property: value;
}

উদাহরণস্বরূপ, নিম্নলিখিত CSS সব তৈরি করবে <h1> একটি পৃষ্ঠার উপাদানগুলির একটি লাল রঙ এবং 32px ফন্টের আকার রয়েছে:

সিএসএস

h1 {
  color: red;
  font-size: 32px;
}

আউটপুট

শিরোনাম

আপনি একটি উপাদানে একটি অনন্য আইডির জন্য CSS নির্দিষ্ট করতে পারেন:

সিএসএস

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

আউটপুট

ইন্ট্রো

অথবা একাধিক উপাদান জুড়ে একটি ক্লাস প্রয়োগ করুন:

সিএসএস

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

আউটপুট

আমি চাই লক্ষণীয় করা স্প্যান ট্যাগে একটি শব্দ।

আপনি তিনটি উপায়ে আপনার HTML নথিতে CSS অন্তর্ভুক্ত করতে পারেন:

  1. ইনলাইন CSS, ব্যবহার করে style একটি HTML উপাদানের বৈশিষ্ট্য
  2. অভ্যন্তরীণ CSS, একটি ব্যবহার করে <style> উপাদান <head> আপনার HTML নথির
  3. বাহ্যিক CSS, একটি পৃথক .css ফাইল ব্যবহার করে আপনার এইচটিএমএল ডকুমেন্টের সাথে লিঙ্ক করা <link> উপাদান <head> আপনার HTML নথির

প্রতিক্রিয়াশীল CSS

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

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS কম্প্রেশন

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

অনেক সার্ভার কনফিগারেশন এমন টুল অফার করে যা স্বয়ংক্রিয়ভাবে সিএসএসকে ফ্লাইতে কম্প্রেস করবে এবং মিনিফাইড ফাইলটিকে ক্যাশে করবে যাতে আপনাকে ম্যানুয়ালি এটি করতে না হয়।

SCSS কি?

স্যাসি সিএসএস (এসসিএসএস) হল একটি CSS প্রিপ্রসেসর যা CSS ভাষায় অতিরিক্ত কার্যকারিতা এবং সিনট্যাক্স যোগ করে। এটি ভেরিয়েবল, মিক্সিন, ফাংশন এবং স্ট্যান্ডার্ড সিএসএস-এ উপলব্ধ নয় এমন অন্যান্য বৈশিষ্ট্য ব্যবহারের অনুমতি দিয়ে CSS-এর ক্ষমতাকে প্রসারিত করে।

SCSS সুবিধা

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

SCSS অসুবিধা

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

নীচের এই উদাহরণে, SCSS কোড মান সংরক্ষণ করতে ভেরিয়েবল ব্যবহার করে ($primary-color এবং $font-size) যা স্টাইলশীট জুড়ে পুনরায় ব্যবহার করা যেতে পারে। এই SCSS কোড থেকে তৈরি করা CSS কোড সমতুল্য, কিন্তু এটি ভেরিয়েবলগুলিকে অন্তর্ভুক্ত করে না। পরিবর্তে, ভেরিয়েবলের মান সরাসরি CSS-এ ব্যবহার করা হয়।

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

SCSS এর আরেকটি বৈশিষ্ট্য যা এই উদাহরণে প্রদর্শিত হয়েছে নেস্টেড শৈলী। SCSS কোডে, h1 শৈলী মধ্যে নেস্ট করা হয় body শৈলী, যা স্ট্যান্ডার্ড CSS এ সম্ভব নয়। যখন SCSS কোড কম্পাইল করা হয়, তখন নেস্টেড স্টাইলগুলি CSS কোডে আলাদা স্টাইলে প্রসারিত হয়।

সামগ্রিকভাবে, SCSS স্ট্যান্ডার্ড CSS-এর তুলনায় অনেক সুবিধা প্রদান করে, কিন্তু ট্রেড-অফগুলি বিবেচনা করা এবং আপনার প্রয়োজন এবং সীমাবদ্ধতার উপর ভিত্তি করে আপনার প্রকল্পের জন্য সঠিক টুল বেছে নেওয়া গুরুত্বপূর্ণ।

Douglas Karr

Douglas Karr এর CMO হয় ওপেনইনসাইটস এবং এর প্রতিষ্ঠাতা Martech Zone. ডগলাস কয়েক ডজন সফল MarTech স্টার্টআপকে সাহায্য করেছে, Martech অধিগ্রহণ এবং বিনিয়োগে $5 বিলিয়নেরও বেশি যোগ্য পরিশ্রমে সহায়তা করেছে এবং কোম্পানিগুলিকে তাদের বিক্রয় ও বিপণন কৌশলগুলি বাস্তবায়ন এবং স্বয়ংক্রিয় করতে সহায়তা করে চলেছে৷ ডগলাস একজন আন্তর্জাতিকভাবে স্বীকৃত ডিজিটাল রূপান্তর এবং MarTech বিশেষজ্ঞ এবং স্পিকার। ডগলাস একজন ডামি'স গাইড এবং একটি ব্যবসায়িক নেতৃত্ব বইয়ের একজন প্রকাশিত লেখকও।

সম্পরকিত প্রবন্ধ

শীর্ষ বোতামে ফিরে যান
ঘনিষ্ঠ

অ্যাডব্লক সনাক্ত করা হয়েছে

Martech Zone আমরা বিজ্ঞাপন রাজস্ব, অনুমোদিত লিঙ্ক, এবং স্পনসরশিপ মাধ্যমে আমাদের সাইট নগদীকরণ কারণ বিনা খরচে আপনাকে এই সামগ্রী প্রদান করতে সক্ষম. আপনি যদি আমাদের সাইট দেখার সাথে সাথে আপনার বিজ্ঞাপন ব্লকারকে সরিয়ে দেন তবে আমরা কৃতজ্ঞ।