ওয়েব ডিজাইন (পর্ব ০৮)HTML CSS, ইনলাইন সিএসএস, ইন্টার্নাল সিএসএস, এক্সটার্নাল সিএসএস, এডভ্যান্স লিংক পোপার্টি - WikiJana.Com™

ওয়েব ডিজাইন (পর্ব ০৮)HTML CSS, ইনলাইন সিএসএস, ইন্টার্নাল সিএসএস, এক্সটার্নাল সিএসএস, এডভ্যান্স লিংক পোপার্টি

এইচটিএমল ডকুমেন্টের যেকোন এলিমেন্টকে স্টাইলিং বা একটা রুপ দিতে সিএসএস ব্যবহার হয়। একটা প্যারাগ্রাফ (

) বা হেডিং (

) বা যেকোন এলিমেন্ট
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো HTML CSS, ইনলাইন সিএসএস, ইন্টার্নাল সিএসএস, এক্সটার্নাল সিএসএস, এডভ্যান্স লিংক পোপার্টি ,HTML ইমেজ।

HTML CSS:

এইচটিএমল ডকুমেন্টের যেকোন এলিমেন্টকে স্টাইলিং বা একটা রুপ দিতে সিএসএস ব্যবহার হয়। 

একটা প্যারাগ্রাফ (<p></p>) বা হেডিং (<h1></h1>) বা যেকোন এলিমেন্ট কে ধরুন রং করতে চান, ফন্ট বড় ছোট করতে হবে, অবস্থান এক দিক থেকে অন্যদিকে নিতে হবে, ব্যাকগ্রাউন্ড রং বদলাতে হবে এরুপ শত ধরনের স্টাইল পরিবর্তন সিএসএস দিয়ে করা হয়। এইচটিএমএল এলিমেন্টের বিপরীতে সিএসএস রুল লেখা হয়। 

বর্তমানে CSS 3 জনপ্রিয়তা ও ব্যবহার দিন দিন বেড়েই চলছে।

CSS এর পূর্ণরুপ - Cascading Style Sheets

আর একটি কথা না বললেই নয় সিএসএস শেখার আগে অবশ্যই এইচটিএমএল সম্বন্ধে ভাল জানতে হবে। এইচটিএমএল না জানলে সিএসএস এ ভালো করা সম্ভব না।

প্রোপার্টি এবং এর মানের মাঝে কোলন (:)  চিহ্ন দিতে হবে এবং মানের শেষে সেমিকোলন (;) দিতে হবে তা নাহলে কোড কাজ করবেনা।

ইনলাইন সিএসএসঃ

এইচটিএমএল এলিমেন্টে style এট্রিবিউট দিয়ে সিএসএস রুল লেখা যায় এটাই ইনলাইন সিএসএস। এর আগে এইচটিএমএল টিউটোরিয়ালে বেশ কয়েক জায়গায় ইনলাইন সিএসএস ব্যবহার করেছি। খুব প্রয়োজন না হলে ইনলাইন সিএসএস লেখা উচিৎ নয়। মুলত সবসময় এক্সটার্নাল সিএসএস ই্ ব্যবহার করা উচিৎ।

যেহেতু এলিমেন্টের ভিতরেই সিএসএস লেখা হয় তাই ইনলাইন সিএসএস এর জন্য সিলেক্টর প্রয়োজন হয়না। যেমন

<h2 style="background-color: #ff0000; color: #fff;">This is inline CSS</h2>
সেমিকোলন (;) দিয়ে প্রতিটি লাইন আলাদা রাখতে হবে যেমন আমি দুটি লাইন আলাদা করেছি। এভাবে যত ইচ্ছা প্রোপার্টি লিখতে পারেন।

ইন্টার্নাল সিএসএসঃ

এইটা খুব সহজ যেকোন এইচটিএমএল ডকুমেন্টে <head></head> এর ভিতর style ট্যাগ ব্যবহার করে ইন্টারনাল সিএসএস লেখা হয়। যেমন
<!DOCTYPE html>
 <html>
<head>
<style>
h1{
   color: #f00;
   background: yellow;
   text-align: center;
}
</style>
</head>
<body>
 <p>Content</p>
 </body>
 </html>

এক্সটার্নাল সিএসএসঃ

ইন্টারনাল বা ইনলাইন সিএসএস খুব প্রয়োজন ছাড়া লেখা হয়না, লেখা উচিৎ ও নয়। কারন এতে এইচটিএমএল ফাইল দেখতে নোংড়া লাগে এবং অনেক বড় হয়ে যায়। তাই সব সিএসএস রুলকে একসাথে করে একটা ফাইলে রেখে সেটা .css এক্সটেনশন নাম দিয়ে (যেমন style.css) সেভ করে HTML ফাইলে সংযুক্ত করে দিলেই হয়ে যায়। এটার নামই হচ্ছে এক্সটার্নাল সিএসএস। এইচটিএমএল এ link নামে একটা ট্যাগ আছে এটা দিয়েই সংযোগ দেয়া যায়। একটা উদাহরন
  <!DOCTYPE html>
 <html>
<head>
<link href="/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
 <h1>Test</h1>
 </body>
 </html>

এডভ্যান্স লিংক পোপার্টিঃ

এখানে আমরা জানার চেস্টা করবো একটা লিংক কিভাবে আরো জীবন্ত করা যায়।

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="http://wikijana.com" target="_blank">Test Link</a></b></p>
</body>
</html>
 এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।

About the Author

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.
I have a blog for learning web design, the nam…

৪টি মন্তব্য

  1. good Post
    Delete
  2. Good Post
    Delete
  3. ধন্যবাদ
    Delete
  4. পাইথন ভাষায় ডাটা টাইপ কি? {Data Types in Python}

    মাইক্রোসফট মেইল { Microsoft Mail }

    Python Variables এবং Multiple Values

    Python programming এ variables কি

    আপনার প্রথম পাইথন প্রোগ্রাম লিখুন

    কিভাবে পাইথনের প্যাকেজ ডাউনলোড করবেন যেমন Numpy, Pandas, Xlrd, Matplotlib
    Delete
কোনো প্রশ্ন থাকলে অনুগ্রহ করে বিস্তারিত ভাবে বলুন, আশা করি আমরা আপনাকে হেল্প করতে পারবো।তবে অনুগ্রহ করে স্পাম করবেন না।
একটি মন্তব্য পোস্ট করুন

All information presented on this website is collected from internet. We may make unintentional mistakes while writing the post. We sincerely apologize for any unpleasant mistakes and WikiJana.Com is not responsible for any incorrect information. If you see any incorrect information please let us know immediately. We will try to fix it as soon as possible. Click here to report.

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.