10 টি সহজ CSS কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেন

10 টি সহজ CSS কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেন

একবার আপনি HTML এ ড্যাবলিং শুরু করলে, আপনি সম্ভবত আপনার ওয়েব পেজে আরো ভিজ্যুয়াল পাঞ্চ যোগ করতে আগ্রহী হবেন। সিএসএস এটি করার সর্বোত্তম উপায়। CSS আপনাকে ইনলাইন স্টাইলিংয়ের উপর নির্ভর না করে আপনার পুরো পৃষ্ঠা জুড়ে পরিবর্তনগুলি প্রয়োগ করতে দেয়।





আপনার ওয়েব পেজে স্টাইলিংয়ের কিছু মৌলিক পরিবর্তন কীভাবে করা যায় তা দেখানোর জন্য এখানে কয়েকটি সহজ CSS উদাহরণ দেওয়া হল।



1. সহজ অনুচ্ছেদ বিন্যাসের জন্য বেসিক CSS কোড

CSS এর সাথে স্টাইল করার অর্থ হল আপনি যখনই একটি উপাদান তৈরি করবেন তখন আপনাকে একটি শৈলী নির্দিষ্ট করতে হবে না। আপনি শুধু বলতে পারেন 'সমস্ত অনুচ্ছেদে এই বিশেষ স্টাইলিং থাকা উচিত' এবং আপনি যেতে ভাল।





ধরা যাক আপনি প্রতিটি অনুচ্ছেদ চান (

, এইচটিএমএল ট্যাগগুলির মধ্যে প্রত্যেকেরই জানা উচিত) স্বাভাবিকের চেয়ে কিছুটা বড় হতে হবে। এবং কালো পরিবর্তে গা gray় ধূসর টেক্সট সহ।

সম্পর্কিত: এইচটিএমএল চিট শীট



এর জন্য CSS কোড হল:

p { font-size: 120%; color: dimgray; }

সরল! এখন, যখনই ব্রাউজার একটি অনুচ্ছেদ রেন্ডার করবে, পাঠ্যটি উত্তরাধিকারসূত্রে আকার (120 শতাংশ স্বাভাবিক) এবং রঙ ('ডিমগ্রে') পাবে।



আপনি যদি কোন প্লেইন-টেক্সট রং ব্যবহার করতে পারেন সে বিষয়ে কৌতূহলী হন তবে এটি দেখুন CSS রঙের তালিকা মজিলা থেকে।

2. অক্ষর কেস পরিবর্তন করার জন্য CSS উদাহরণ

অনুচ্ছেদের জন্য একটি উপাধি তৈরি করতে চান যা ছোট ক্যাপে থাকা উচিত? এর জন্য একটি CSS নমুনা হবে:



p.smallcaps { font-variant: small-caps; }

একটি অনুচ্ছেদ তৈরি করতে যা সম্পূর্ণ ছোট ক্যাপগুলিতে, একটু ভিন্ন HTML ট্যাগ ব্যবহার করুন। এটি দেখতে কেমন তা এখানে:

Your paragraph here.

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

আপনি যদি একটি নির্দিষ্ট ক্ষেত্রে পাঠ্যের একটি সেট পরিবর্তন করতে চান, এই CSS কোড উদাহরণ ব্যবহার করুন:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

শেষটি প্রতিটি বাক্যের প্রথম অক্ষরকে বড় করে।

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

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

লিঙ্ক সহ, প্রতিটি 'a' একটি কোলন দ্বারা অনুসরণ করা হয়, বিন্দু নয়।

এই ঘোষণাগুলির প্রত্যেকটি একটি নির্দিষ্ট প্রসঙ্গে একটি লিঙ্কের রঙ পরিবর্তন করে। রঙ পরিবর্তন করতে একটি লিঙ্কের শ্রেণী পরিবর্তন করার দরকার নেই।

যখন আন্ডারলাইন করা টেক্সট স্পষ্টভাবে একটি লিঙ্ক নির্দেশ করে, এটি কখনও কখনও সেই আন্ডারলাইনটি স্ক্র্যাপ করতে আরও সুন্দর দেখায়। এটি 'টেক্সট-ডেকোরেশন' অ্যাট্রিবিউট দিয়ে সম্পন্ন হয়। এই CSS উদাহরণ দেখায় কিভাবে লিঙ্কের আন্ডারলাইন মুছে ফেলা যায়:

a { text-decoration: none; }

লিঙ্ক ('a') ট্যাগ সহ যেকোন কিছু অ-রেখায় থাকবে। যখন ব্যবহারকারী এটির উপর আড়াআড়ি করে তখন এটিকে আন্ডারলাইন করতে চান? সহজভাবে যোগ করুন:

a:hover { text-decoration: underline; }

আপনি লিঙ্কটি ক্লিক করার সময় আন্ডারলাইনটি অদৃশ্য না হয় তা নিশ্চিত করতে সক্রিয় লিঙ্কগুলিতে এই পাঠ্য-প্রসাধন যোগ করতে পারেন।

আপনার লিঙ্কে আরো মনোযোগ আকর্ষণ করতে চান? একটি লিঙ্ক বোতাম এটি সম্পর্কে যেতে একটি দুর্দান্ত উপায়। এটির জন্য আরও কয়েকটি লাইন প্রয়োজন:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

আসুন এই CSS নমুনা কোডটি ব্যাখ্যা করি।

সমস্ত চারটি লিংক স্টেট অন্তর্ভুক্ত করে নিশ্চিত করে যে ব্যবহারকারী যখন এটির উপর ঘুরছে বা ক্লিক করে তখন বাটনটি অদৃশ্য হয় না। আপনি হোভার এবং সক্রিয় লিঙ্কগুলির জন্য বিভিন্ন পরামিতি সেট করতে পারেন, যেমন, বোতাম বা পাঠ্যের রঙ পরিবর্তন করা।

ব্যাকগ্রাউন্ড কালার ব্যাকগ্রাউন্ড-কালার দিয়ে সেট করা হয়েছে, এবং টেক্সট কালার কালার দিয়ে। প্যাডিং বাক্সের আকার নির্ধারণ করে --- পাঠ্যটি 10px উল্লম্বভাবে এবং 25px অনুভূমিকভাবে প্যাড করা হয়।

টেক্সট-অ্যালাইন নিশ্চিত করে যে টেক্সটটি একপাশে বন্ধ করার পরিবর্তে বোতামের কেন্দ্রে প্রদর্শিত হয়। টেক্সট-ডেকোরেশন, যেমন শেষ উদাহরণ, আন্ডারলাইনটি সরিয়ে দেয়।

PS4 এ প্রোফাইল কিভাবে মুছে ফেলা যায়

CSS কোড 'display: inline-block' একটু বেশি জটিল। সংক্ষেপে, এটি আপনাকে বস্তুর উচ্চতা এবং প্রস্থ সেট করতে দেয়। এটি নিশ্চিত করে যে এটি একটি নতুন লাইন শুরু করে যখন এটি োকানো হয়।

6. একটি টেক্সট বক্স তৈরির জন্য CSS উদাহরণ কোড

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

p.important { border-style: solid; border-width: 5px; border-color: purple; }

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

Your important paragraph here.

অনুচ্ছেদ যত বড়ই হোক না কেন এটি কাজ করবে।

অনেকগুলি বর্ডার স্টাইল আছে যা আপনি প্রয়োগ করতে পারেন; 'কঠিন' এর পরিবর্তে 'ডটেড' বা 'ডাবল' চেষ্টা করুন। এদিকে, প্রস্থ 'পাতলা,' 'মাঝারি,' বা 'পুরু' হতে পারে। CSS কোড এমনকি প্রতিটি সীমানার বেধকে পৃথকভাবে সংজ্ঞায়িত করতে পারে, যেমন:

border-width: 5px 8px 3px 9px;

এর ফলে পাঁচটি পিক্সেলের উপরের সীমানা, আটটির ডান সীমানা, তিনটি নীচের এবং বাম সীমানার আকার নয় পিক্সেল।

7. মৌলিক সিএসএস কোডের সাথে উপাদানগুলিকে কেন্দ্র-সারিবদ্ধ করুন

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

একটি ব্লক উপাদান (সাধারণত একটি চিত্র) জন্য, মার্জিন বৈশিষ্ট্য ব্যবহার করুন:

.center { display: block; margin: auto; }

এটি নিশ্চিত করে যে উপাদানটি একটি ব্লক হিসাবে প্রদর্শিত হয় এবং প্রতিটি পাশে মার্জিন স্বয়ংক্রিয়ভাবে সেট করা হয়। আপনি যদি প্রদত্ত পৃষ্ঠায় সমস্ত চিত্রকে কেন্দ্র করতে চান তবে আপনি img ট্যাগে 'মার্জিন: অটো' যোগ করতে পারেন:

img { margin: auto; }

এটি কেন এইভাবে কাজ করে তা জানতে, দেখুন W3C এ CSS বক্স মডেলের ব্যাখ্যা ।

কিন্তু যদি আপনি CSS দিয়ে পাঠ্যকে কেন্দ্র করতে চান? এই নমুনা CSS ব্যবহার করুন:

.centertext { text-align: center; }

একটি অনুচ্ছেদে পাঠ্যকে কেন্দ্র করতে 'centertext' ক্লাস ব্যবহার করতে চান? শুধু যে ক্লাস যোগ করুন

ট্যাগ:

This text will be centered.

8. প্যাডিং সামঞ্জস্য করার জন্য CSS উদাহরণ

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

ধরা যাক আপনি চান যে প্রতিটি ছবিতে বাম এবং ডান দিকে 20 পিক্সেল প্যাডিং এবং উপরে এবং নীচে 40 পিক্সেল থাকতে হবে। এর জন্য সবচেয়ে বেসিক CSS কোড এক্সিকিউশন হল:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

একটি সংক্ষিপ্ত সিএসএস নির্দেশ আছে, তবে, যা এই সমস্ত তথ্যকে একটি লাইনে উপস্থাপন করে:

img { padding: 40px 25px 40px 25px; }

এটি উপরের, ডান, নীচে এবং বাম প্যাডিংগুলিকে সঠিক সংখ্যায় সেট করে। শুধুমাত্র দুটি মান ব্যবহার করার জন্য ধন্যবাদ (40 এবং 25) আপনি এটি আরও ছোট করতে পারেন:

img { padding: 40px 25px }

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

9. CSS কোডিং সহ টেবিলের সারিগুলি হাইলাইট করুন

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

tr:hover { background-color: #ddd; }

এখন যখনই আপনি একটি টেবিল সেলের উপর মাউস করবেন, সেই সারিটি রঙ পরিবর্তন করবে। আপনি করতে পারেন এমন আরও কিছু দুর্দান্ত জিনিস দেখতে, দেখুন অভিনব CSS টেবিলে W3C পৃষ্ঠা ।

10. স্বচ্ছ এবং অস্বচ্ছের মধ্যে ছবি স্থানান্তর করার জন্য উদাহরণ CSS

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

img { opacity: 0.5; filter: alpha(opacity=50); }

'ফিল্টার' অ্যাট্রিবিউট 'অস্বচ্ছতা' হিসাবে একই কাজ করে, কিন্তু ইন্টারনেট এক্সপ্লোরার 8 এবং এর আগে অস্বচ্ছতা পরিমাপকে চিনতে পারে না। পুরানো ব্রাউজারের জন্য, এটি অন্তর্ভুক্ত করা একটি ভাল ধারণা।

এখন যেহেতু ছবিগুলি কিছুটা স্বচ্ছ, আপনি সেগুলিকে মাউসওভারে সম্পূর্ণ অস্বচ্ছ করে তুলতে পারেন:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

সোর্স কোড সহ 10 CSS উদাহরণ

এই CSS কোড উদাহরণগুলির সাথে, আপনার CSS কীভাবে কাজ করে সে সম্পর্কে আরও ভাল ধারণা থাকা উচিত। CSS টেমপ্লেট সাহায্য করতে পারে, কিন্তু কাঁচা উপাদানগুলি বোঝা অত্যাবশ্যক।

সেই 10 টি সহজ সিএসএস কোড উদাহরণ পুনরায় সংগ্রহ করা হয়েছে:

  1. সহজ অনুচ্ছেদ বিন্যাস
  2. চিঠির কেস পরিবর্তন করুন
  3. লিঙ্কের রং পরিবর্তন করুন
  4. লিঙ্ক আন্ডারলাইন সরান
  5. একটি লিঙ্ক বোতাম তৈরি করুন
  6. একটি টেক্সট বক্স তৈরি করুন
  7. কেন্দ্র-সারিবদ্ধ উপাদান
  8. প্যাডিং সামঞ্জস্য করুন
  9. টেবিলের সারি হাইলাইট করুন
  10. ছবিগুলি অস্বচ্ছ করুন

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

শেয়ার করুন শেয়ার করুন টুইট ইমেইল অত্যাবশ্যকীয় CSS3 প্রপার্টিজ চিট শীট

আমাদের CSS3 প্রোপার্টিজ চিট শীট সহ প্রয়োজনীয় CSS সিনট্যাক্স মাস্টার করুন।

পরবর্তী পড়ুন সম্পর্কিত বিষয়
  • প্রোগ্রামিং
  • ওয়েব ডিজাইন
  • সিএসএস
  • স্ক্রিপ্টিং
লেখক সম্পর্কে ক্রিশ্চিয়ান কাওলি(1510 নিবন্ধ প্রকাশিত)

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

ক্রিশ্চিয়ান কাওলি থেকে আরো

আমাদের নিউজলেটার সদস্যতা

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

সাবস্ক্রাইব করতে এখানে ক্লিক করুন