যেমন, এইভাবে করবেন না:

<font size="7">আমার বিষয়</font><br />
প্রস্তুতি লেখা<br /><br />
<font size="6">অতিরিক্ত মতামত</font><br />
সংশ্লিষ্ট লেখা<br />

উপাদানগুলির মানে অনুযায়ী ব্যবহার করুন, না তাদের দেখানো শৈলী অনুযায়ী

আমাদের মধ্যে কিছু লোক একটি ভুল অভ্যাসে ফলে পড়েছেন, যখন আমরা শুধুমাত্র একটি বড় ফন্টের টেক্সট চাইলে h1-এর মতো ব্যবহার করি, অথবা একটি ডট নিয়ে থাকা li-এর মতো ব্যবহার করি। যেমন আমরা আগের চ্যাপটারে আলোচনা করেছিলাম, ব্রাউজারগুলি সর্বদাই ডিজাইন প্রক্রিয়াকে HTML উপাদানকে অপরিবর্তিত করেছে। আমরা সবাই একইভাবে মনে করি যে, h1 একটি বড় ফন্ট, li-এর মতো ডট থাকা, এবং blockquote-এর মতো টেক্সটকে সুস্পষ্ট করতে ব্যবহার করা হয়। আমাদের মধ্যে অধিকাংশই স্ট্রাকচারাল উপাদানকে প্রদর্শন সিমুলেশনের মাধ্যমে একটি বিন্যাসহীন HTML লিখেছেন。

একইভাবে, যদি ডিজাইনারকে সব শিরোনামকে একই আকারে দেখাতে হয়, তবে তিনি সব শিরোনামকে h1 হিসাবে সেট করবেন, যদিও এইভাবে কোনও স্ট্রাকচারাল সেম্যান্টিক নেই。

এটা প্রধান শিরোনাম, যখন আমি টেক্সটকে নোটস ফরম্যাটে রাখছি。
এটা প্রধান শিরোনাম নয়, কিন্তু আমি চাই যে, এটা উপরের শিরোনামের মতোই ফন্টে থাকে, কিন্তু আমি কিভাবে CSS-এর মাধ্যমে তা করতে পারব না。
এটা কখনও একটি শিরোনাম নয়। কিন্তু আমি খুবই চাই যে, পানেলের লেখাটি একই ফন্টে থাকে, যে ফন্টটি আমি চাইছি,
আমি CSS-কে জানলে, এই ডিজাইনটি ডকুমেন্টের কাঠামো বিন্যাস বিন্যস্ত করবেন。

আমাদের ছোট ব্যাপারগুলিকে একদিকে রেখে, আমরা উপাদানগুলির সেম্যান্টিক মূল্য অনুযায়ী ব্যবহার করব, না তাদের দেখানো শৈলী অনুযায়ী। প্রকৃতপক্ষে, h1 আপনি যে কোনও রূপ নিতে পারেন। CSS-এর মাধ্যমে, h1 একটি অল্প কালি রোমান ফন্ট হতে পারে, এবং p টেক্সট বড় ফন্টের বোল্ড হতে পারে, li-ও ডট ছাড়াই থাকতে পারে (আপনি কিছু ছোট বিড়াল বা কোম্পানির লোগোর PNG, GIF বা JPEG চিত্রটি ব্যবহার করতেও পারেন) ইত্যাদি。

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

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	font-style: normal;

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

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

স্ট্রাকচারাল উপাদানকে ব্যবহার করে, না কোন অর্থহীন বর্জ্যের পরিবর্তে

আমরা হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ (এইচটিএমএল) এবং এক্সহাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ (এইচএক্সএমএল)-এর কাজের জন্য কোন প্রকার স্ট্রাকচারাল মানসিকতা ভূলে গিয়েছি বা কোন প্রকার জানতেই না, তাই অনেক এইচটিএমএল বিতর্ককারী এইভাবে ট্যাগ ব্যবহার করে তালিকা যোগ করে:

প্রকল্প এক<br />
প্রকল্প দুই<br />
প্রকল্প তিন<br />

তাই, ক্রমিক বা অক্রমিক তালিকা ব্যবহার করে প্রতিস্থাপিত করুন:

<ul>
<li>প্রকল্প এক</li>
<li>প্রকল্প দুই</li>
<li>প্রকল্প তিন</li>
</ul>

"কিন্তু li-তে আমার একটি বিন্দু আছে, এবং আমার কোন বিন্দু নেই!" আপনি এমনভাবে বলতে পারেন।উপরোক্ত চাপ্তীতে, সিএসএস কোন উপাদানের প্রত্যাশিত প্রদর্শনের জন্য কোন প্রত্যাশা করে না।এটি আপনাকে আপনার প্রত্যাশিত উপাদানের প্রদর্শন জানানোর জন্য অপেক্ষা করে।বন্ধ করা বিন্দু হল সিএসএস-এর সর্বাধিক মৌলিক ক্ষমতা।এটি তালিকাকে সাধারণ টেক্সটের মতো করতে পারে, এবং গ্রাফিক্স নেভিগেশন বার্তাবাহক হিসাবে কাজ করতেও পারে, যা পূর্ণ রিভার্স ইফেক্ট সহ আছে。

তাই, তালিকার উপাদানগুলি ট্যাগ করার জন্য তালিকা উপাদানকে ব্যবহার করুন।একইভাবে, strong-কে b-এর পরিবর্তে এবং em-কে i-এর পরিবর্তে ব্যবহার করুন, ইত্যাদি।অধিকাংশ ডেস্কটপ ব্রাউজারের ডিফল্ট স্থিতিতে, strong-এর প্রদর্শন b-র মতোই, em এবং i-র মতোই, এবং আপনি ডকুমেন্টের কাঠামো বিনষ্ট করবে না এমন অনুভূতির প্রদর্শন তৈরি করতে পারেন。

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

strong {
	font-weight: bold;
	font-style: normal;
	font-style: normal;