সিএসএস স্টাইল শীট তৈরি করুন
একইভাবে আমরা HTML এর জন্য একটি পৃথক পাঠ্য ফাইল তৈরি করেছি, আপনি CSS এর জন্য একটি টেক্সট ফাইল তৈরি করবেন। যদি আপনি এই প্রক্রিয়াটির জন্য ভিজ্যুয়ালগুলি প্রয়োজন তবে দয়া করে প্রথম টিউটোরিয়ালটি দেখুন। নোটপ্যাডে আপনার সিএসএস স্টাইল শীট তৈরির পদক্ষেপ এখানে দেওয়া হল:
- খালি উইন্ডো পেতে ফাইল> নোটপ্যাডে নতুন নির্বাচন করুন
- ফাইল <সিএসএস এ ক্লিক করে সিএসএস হিসাবে সংরক্ষণ করুন …
- আপনার হার্ড ড্রাইভে my_website ফোল্ডার নেভিগেট করুন
- "সমস্ত ফাইল" এ "সংরক্ষণ করুন হিসাবে টাইপ করুন" পরিবর্তন করুন।
- আপনার ফাইলটি "শৈলী.css" নাম দিন (উদ্ধৃতিগুলি ছেড়ে দিন) এবং সংরক্ষণ করুন এ ক্লিক করুন
আপনার এইচটিএমএল সিএসএস স্টাইল শীট লিঙ্ক করুন
একবার আপনার ওয়েব সাইটের জন্য স্টাইল শীট পেয়ে গেলে আপনাকে এটি নিজের ওয়েব পৃষ্ঠাতে সংযুক্ত করতে হবে। এটি করার জন্য আপনি লিঙ্ক ট্যাগ ব্যবহার করুন। কোথাও নিম্নলিখিত লিঙ্ক ট্যাগ রাখুন
আপনার pets.htm ট্যাগ ট্যাগ:
10 এর 03 যখন আপনি বিভিন্ন ব্রাউজারগুলির জন্য এক্সএইচটিএমটি লেখেন, তখন আপনি যা শিখবেন তা হল যে তারা কীভাবে সবকিছু প্রদর্শন করে সেগুলির জন্য বিভিন্ন মার্জিন এবং নিয়ম রয়েছে বলে মনে হয়। সর্বাধিক ব্রাউজারে আপনার সাইটটি একই রকম দেখাচ্ছে তা নিশ্চিত করার সেরা উপায় হল মার্জিনগুলির মতো জিনিসগুলি ব্রাউজার পছন্দে ডিফল্ট করার অনুমতি দেয় না। আমি উপরের বাম কোণে আমার পৃষ্ঠাগুলি শুরু করতে পছন্দ করি, কোনও অতিরিক্ত প্যাডিং বা পাঠ্যকে পার্শ্ববর্তী মার্জিন ছাড়াই। এমনকি যদি আমি উপাদানগুলি প্যাড করতে যাচ্ছি, আমি মার্জিনকে শূন্যতে সেট করি যাতে আমি একই ফাঁকা স্লেট দিয়ে শুরু করি। এটি করার জন্য, আপনার শৈলী.css দস্তাবেজে নিচের যোগ করুন: ফন্টটি প্রায়শই প্রথম জিনিস যা আপনি ওয়েব পৃষ্ঠাতে পরিবর্তন করতে চান। কোনও ওয়েব পৃষ্ঠায় ডিফল্ট ফন্টটি কুৎসিত হতে পারে এবং প্রকৃতপক্ষে ওয়েব ব্রাউজারটি আপগ্রেড হয়, তাই আপনি যদি ফন্টটি সংজ্ঞায়িত না করেন তবে আপনার পৃষ্ঠাটি কেমন দেখতে পাবে তা আপনি সত্যিই জানেন না। সাধারণত, আপনি অনুচ্ছেদের ফন্ট পরিবর্তন করতে পারেন, অথবা কখনও কখনও পুরো নথিতে নিজেই পরিবর্তন করতে পারেন। এই সাইটের জন্য আমরা শিরোনাম এবং অনুচ্ছেদ স্তরের ফন্ট সংজ্ঞায়িত করব। আপনার শৈলী.css দস্তাবেজে নিম্নলিখিত যোগ করুন: আমি অনুচ্ছেদ এবং তালিকার আইটেমগুলির জন্য আমার বেস আকার হিসাবে 1em দিয়ে শুরু করেছি এবং তারপরে আমার শিরোনামগুলির জন্য আকার সেট করতে ব্যবহার করেছিলাম। আমি h4 এর চেয়ে গভীর শিরোনামটি ব্যবহার করার আশা করি না, তবে আপনি যদি এটির পরিকল্পনা করেন তবে এটিও স্টাইল করতে চান। লিঙ্কের জন্য ডিফল্ট রংগুলি অজানা এবং পরিদর্শন লিঙ্কগুলির জন্য যথাক্রমে নীল এবং বেগুনি। এটি আদর্শ হলেও এটি আপনার পৃষ্ঠার রঙের স্কিমটি মাপসই করতে পারে না, তাই এটি পরিবর্তন করুন। আপনার শৈলী.css ফাইল, নিম্নলিখিত যোগ করুন: আমি তিনটি লিংক শৈলী সেট আপ করেছি, একটি: ডিফল্ট হিসাবে লিঙ্ক, একটি: এটি পরিদর্শন করা হয় যখন দেখার জন্য, আমি রঙ পরিবর্তন, এবং একটি: হভার। একটি দিয়ে: হভারে আমার কাছে লিঙ্কটি একটি ব্যাকগ্রাউন্ড রঙ পায় এবং ক্লিক করার জন্য এটি একটি লিঙ্ককে জোর দেওয়ার জন্য সাহসী হয়। যেহেতু আমরা এইচটিএমএল প্রথমে নেভিগেশান (id = "nav") বিভাগটি রেখেছি, আসুন এটি প্রথমে স্টাইল করুন। আমাদের কাছে কতটুকু বিস্তৃত হওয়া উচিত এবং ডান দিকে একটি বৃহত্তর মার্জিন লাগানো উচিত তা উল্লেখ করতে হবে যাতে প্রধান পাঠটি এটির বিরুদ্ধে আপত্তি না করে। আমি এটি চারপাশে একটি সীমানা করা। আপনার শৈলী.css নথিতে নিম্নলিখিত সিএসএস যোগ করুন: তালিকা-শৈলী সম্পত্তি গোয়েন্দা বিভাগের ভিতরে তালিকার কোনও বুলেট বা সংখ্যার জন্য সেট আপ করে না এবং .footer কপিরাইট বিভাগটি ছোট হতে এবং বিভাগের মধ্যে কেন্দ্রীভূত করে। পরম পজিশনিং দিয়ে আপনার প্রধান বিভাগকে অবস্থান করে আপনি নিশ্চিত হতে পারেন যে এটি আপনার ওয়েব পৃষ্ঠায় থাকা ঠিক যেখানেই থাকবে। আমি বড় মনিটরগুলিকে বজায় রাখার জন্য আমার 800px প্রশস্ত তৈরি করেছি, কিন্তু যদি আপনার একটি ছোট মনিটর থাকে, তবে আপনি সেগুলি সংকীর্ণ করতে পারেন। আপনার শৈলী.css নথিতে নিম্নলিখিত রাখুন: যেহেতু আমি উপরের অনুচ্ছেদের ফন্টটি ইতিমধ্যে সেট করেছি, তাই আমি প্রতিটি অনুচ্ছেদের কিছুটা অতিরিক্ত "কিক" দিতে চেয়েছি যাতে এটি আরও ভালোভাবে দাঁড়াতে পারে। আমি শীর্ষে একটি সীমানা স্থাপন করে এটি শুধুমাত্র একা ইমেজ চেয়ে অনুচ্ছেদ হাইলাইট। আপনার শৈলী.css নথিতে নিম্নলিখিত রাখুন: আমি ঠিক সেইভাবে সমস্ত অনুচ্ছেদের সংজ্ঞায়িত করার পরিবর্তে "শীর্ষস্থানীয়" নামে একটি শ্রেণির মতো এটি করার সিদ্ধান্ত নিয়েছি। এইভাবে, যদি আমি সিদ্ধান্ত নিই যে আমি উপরের হলুদ লাইন ছাড়া অনুচ্ছেদটি পেতে চাই, আমি অনুচ্ছেদে কেবল শ্রেণী = "শীর্ষস্তরটি" ছেড়ে দিতে পারি এবং এতে শীর্ষ সীমানা থাকবে না। ইমেজগুলি সাধারণত তাদের চারপাশে একটি সীমানা থাকে, চিত্রটি লিঙ্ক না হওয়া পর্যন্ত এটি সর্বদা দৃশ্যমান হয় না, তবে আমার সিএসএস স্টাইলশীটের মধ্যে একটি শ্রেণী থাকতে চান যা স্বয়ংক্রিয়ভাবে সীমানা বন্ধ করে।এই স্টাইলশীটের জন্য, আমি "noborder" ক্লাস তৈরি করেছি, এবং নথির বেশিরভাগ চিত্র এই শ্রেণির অংশ। এই ছবির অন্যান্য বিশেষ অংশটি পৃষ্ঠাতে তাদের অবস্থান। আমি তাদের সারিবদ্ধ করার জন্য টেবিল ব্যবহার না করে অনুচ্ছেদের অংশ হতে চেয়েছিলাম। এটি করার সবচেয়ে সহজ উপায় ফ্লোট CSS সম্পত্তি ব্যবহার করা। আপনার শৈলী.css নথিতে নিম্নলিখিত রাখুন: আপনি দেখতে পারেন যে, ছবিতে মার্জিন বৈশিষ্ট্যগুলিও রয়েছে, যাতে অনুচ্ছেদে তাদের পাশে থাকা ভাসমান পাঠ্যের বিরুদ্ধে তারা টুকরো টুকরা হয় না তা নিশ্চিত করতে। একবার আপনি আপনার CSS টি সংরক্ষণ করলে আপনি আপনার ওয়েব ব্রাউজারে পোষা প্রাণী.এইচএম পৃষ্ঠাটি পুনরায় লোড করতে পারেন। আপনার ছবিটি এই ছবিতে দেখানো একটির অনুরূপ হওয়া উচিত, চিত্রগুলি সাইন ইন করা এবং ন্যাভিগেশন পৃষ্ঠাটির বাম দিকে সঠিকভাবে স্থাপন করা হয়েছে। এই সাইটের জন্য আপনার সমস্ত অভ্যন্তরীণ পৃষ্ঠাগুলির জন্য একই পদক্ষেপগুলি অনুসরণ করুন। আপনি আপনার ন্যাভিগেশন প্রতিটি পৃষ্ঠার জন্য একটি পাতা থাকতে চান। পৃষ্ঠা মার্জিন ঠিক করুন
পৃষ্ঠাটিতে ফন্ট পরিবর্তন করা হচ্ছে
আপনার লিঙ্ক আরো আকর্ষণীয় তৈরীর
ন্যাভিগেশন বিভাগ স্টাইলিং
প্রধান বিভাগ পজিশনিং
আপনার অনুচ্ছেদ স্টাইলিং
ছবি স্টাইলিং
এখন আপনার সম্পূর্ণ পৃষ্ঠা দেখুন
