সার্চ করুন | Search here

Our New site!!!

We have made a new site. You can visit the site.English Guided Writing Our new site - visit here

Ads | বিজ্ঞাপন

Showing posts with label সিএসএস বাংলা টিউটোরিয়াল. Show all posts
Showing posts with label সিএসএস বাংলা টিউটোরিয়াল. Show all posts

Saturday, March 30, 2019

সিএসএস এর পার্ট-১| ভূমিকা| সিএসএস এর বাংলা টিউটোরিয়াল









একটা ওয়েবসাইট তৈরী করতে হলে যে এইচটিএমএল লাগে সেটা আমরা জানি। এই এইচটিএমএল দিয়েই কিন্তু সাইটের সব করতে হবে যদি সেটা স্ট্যাটিক সাইট হয়।   একটা সাইটে বিভিন্ন পেজ থাকতে পারে। সেক্ষেত্রে এইচটিএমএল দিয়ে সব পেজ   ডিজাইন করা কেমন জানি কষ্টসাধ্য ও   বোরিং কাজ।  এই সমস্যা  সমাধানে  সিএসএস  আমাদের সাহায্য করতে তো আছেই। এর জন্য  দিয়ে প্রত্যেক পেজে আলাদা করে  ডিজাইন করা লাগে না।  

CSS. কোন আলাদা শব্দ না। এর পূর্ণ রূপ হল Cascading Style Sheet। এককথায় ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণের জন্য CSS ব্যাবহার করা হয়।

১টি web page সুন্দর ও আকর্ষণীয় করার জন্য CSS এর প্রয়োজনীয়তা অনেক ।

 HTML ও CSS কে যদি কোন প্রানীর সাথে তুলনা করা হয় তাহলে প্রাণির কঙ্কাল হচ্ছে HTML ও CSS হচ্ছে তার বাহিরের রুপ।

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




এটা একটা একঘেয়েমি ব্যাপার। CSS এই জটিল সমস্যা দূর করেছে এখন একটা ওয়েব সাইটে এক বা এর অধিক একই ধরনের পেজ থাকে তাহলেও একটি মাত্র CSS স্ক্রিপ্ট ব্যবহার করে ডিজাইন সম্পূর্ণ করা হয়।  আর একটি কথা না বললেই নয় CSS শেখার আগে অবশ্যই HTML সম্বন্ধে ভাল জ্ঞান থাকতে হবে। HTML সম্বন্ধে ভাল জ্ঞান না থাকতে আমাদের আগের পোস্টের এইচটিএমএল টিউটোরিয়াল গুলো শিখে আসতে পারেন।

আপনারা এর পর কি বিষয়ক টিউটোরিয়াল চান? আপনার মতামত জানাতে কমেন্ট করুন বা কন্ট্রাক্ট ফর্মের দ্বারা যোগাযোগ করুন।

Sunday, March 24, 2019

সিএসএস এর পার্ট-০২| সিএসএস এর স্যানট্যাক্স | সিএসএস বাংলা টিউটোরিয়াল








সিএসএস এর স্যানট্যাক্স

সিএসএস এর ভূমিকা নিয়ে আমি আগের পার্টে আলোচনা করেছি। সেখানে আমি সিএসএস এর "অ আ ক খ " দেওয়ার চেষ্টা করেছি।
কিন্তু,
সিএসএস সম্পর্কে হয়ত আমরা এখনো ভালমত বুঝি নাই। মনে করেন আপনি h1 ট্যাগ আপনার সাইটে ব্যবহার করবেন।সেটা আপনি প্রায় ২০ জায়গায় ব্যাবহার করবেন।

সেক্ষেত্রে আপনি চাইলেন h1 ট্যাগের ফন্ট সাইজ হবে 10px ও এর কালার হবে কমলা(orange) । এই ফন্ট সাইজ ও কালার ২০ জায়গায় ব্যবহার করা কেমন কষ্টকর ব্যাপার। যদি এমন হয় যে, আপনি কোড লেখার আগে লিখে নিলেন যে, এই সাইটের যত h1 ট্যাগ থাকবে তার ফন্ট সাইজ হবে ১০ px ও এর কালার হবে কমলা। এর জন্য আপনাকে আর ২০ জায়গায় ফন্ট সাইজ ও কালার এট্রিবিউটস ব্যবহার করতে হল না। মানে আপনার কাজও কমে গেল।

এবার আসল কাজে আসেন-- এই যে কোড লেখার আগে লিখে নিলেন সাইটের সব h1 কোড এর কালার হবে কমলা ও ফন্ট সাইজ হবে ১০px. এইটাই হল সিএসএস।

আশা করি বুঝেছেন। সিএসএস এর গঠন এবার আমরা আলোচনা করি---
CSS এর নিয়ম গঠিত হয়েছে Selector ও Declaration Block দিয়ে।  নিচের চিত্রটি দেখলে বুঝবেন--

Selector অংশে "ট্যাগ সিলেক্টর" হিসেবে HTML ট্যাগ বা ক্লাস সিলেক্টর হিসেবে HTML ট্যাগ এর ক্লাস এর নাম অথবা আইডি সিলেক্টর হিসেবে HTML ট্যাগ এর আইডি এর নাম বসে।
প্রতিটা Declaration এর একটি property এবং একটি value থাকে।
অর্থাৎ আপনারা এর বুঝেন নাই কিছুই--
এই উদাহরণটা দেখুন--

<head>  <style>  h1{    color:orange;    font-size:10px;  }  </style> </head>
এখানে HTML এর h1 ট্যাগ এর রং কমলা এবং ফন্ট আকার 10px দেয়া হয়েছে। সুতরাং HTML web page এর সকল h1 এর রং কমলা এবং ফন্ট আকার 10px হবে।
আশা করি এই পার্ট বুঝেছেন।
কোন সমস্যা হলে প্লিজ কমেন্ট করে জানাবেন। ধন্যবাদ 

সিএসএস এর পার্ট-০৩ | কোড লেখার পদ্ধতি | সিএসএস বাংলা টিউটোরিয়াল















আমরা আগের পোস্টে সিএসএস এর সিলেক্টর সম্পর্কে জেনেছিলাম।সেখান বলা হয়েছিল সিলেক্টর চার ধরণের হতে পারে।এগুলো দ্বারা নির্দিষ্ট ট্যাগ সিলেক্ট করা যায়। তো সিলেক্টর জানার পর আমাদের জানা উচিৎ কিভাবে ট্যাগ লিখতে হয়। যদিও আগের টিউটোরিয়াল এ এসম্পর্কে একটু ধারণা দেওয়া হয়েছিল।
এখন বিস্তারিতভাবে দেওয়া হল।

আসলে এইচটিএমএল এর সাথে সিএসএস যুক্ত করার বিষয়টি খুবই গুরুত্বপূর্ণ। এইচটিএমএল এর সাথে সিএসএস যুক্ত করার জন্য তিনটি পদ্ধতি রয়েছে।

i) ইন্টারনাল স্টাইল শীট
ii) ইন-লাইন স্টাইল শীট
iii) এক্সটার্নাল স্টাইল শীট




ইন্টারনাল স্টাইল শীট:-

ইন্টারনাল স্টাইল শীট পদ্ধতি হচ্ছে HTML কোড এর <head></head> ট্যাগ এর মধ্যে <style></style> বা স্টাইল ট্যাগ ব্যাবহার করা হয়। এবং <style></style> এর মধ্যেই CSS এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ রাখা হয়।
এইভাবে এই ট্যাগ দেওয়া হয়ে থাকে।

<head>
<style>
 h1 {
     color: red;
     margin-left: 28px;
 }
 </style>
</head>


এখানে সিএসএস কোড এইচটিএমএল এর head ট্যাগ এর ভিতর লেখা হয়েছে। যা HTML এর সকল h1 ট্যাগ জন্য প্রযোজ্য হবে।

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
h1 {
    color: red ;
    margin-left: 28px;
}
</style>
</head>
<body>


 <h1>এই লেখা সিএসএস এর স্টাইল অনুসারে রান হবে।</h1>
 <h2>এটা সিএসএস এর স্টাইল অনুসারে রান হবে না। কারণ আমরা স্টাইল ট্যাগে h2 এর জন্য কিছু লেখি নাই।</h2>

</body>
</html>



ইন-লাইন স্টাইল শীট:--


ইন-লাইন স্টাইল শীট পদ্ধতিতে এইচটিএমএল এর প্রতিটা ট্যাগের এট্রিবিউটস হিসেবে style এট্রিবিউটস যুক্ত করে এর মধ্যে সিএসএস এর জন্য প্রয়োজনীয় Declaration সমূহ যুক্ত করা হয়।
এইটা নিচের পদ্ধতিতে যোগ করতে হয়।


<h1 style="color:red;margin-left:10px;">
আমি বাংলায় গান গাই।
</h1>

অর্থাৎ প্রতিটা HTML ট্যাগ এর জন্য আলাদা আলাদা ভাবে CSS কোড লিখতে হবে। h1 ট্যাগ এর জন্য লেখা CSS এর কোড অন্য h1 ট্যাগ এ কাজ করবে না।
আমার মতে এই ভাবে লেখা অনেক কষ্টসাধ্য ও সময়সাপেক্ষ।
উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

</head>
<body>

 <h1 style="color:red;margin-left:10px;"> এই লেখা স্টাইল অনুসারে রান হবে। </h1>
 <h1> কিন্তু এটা হবে না। .</h1>

</body>
</html>




এক্সটার্নাল স্টাইল শীট:---


এক্সটার্নাল স্টাইল শীট পদ্ধতিতে সিএসএস জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ আলাদা স্ক্রিপ্টে রাখা হয় এবং স্ক্রিপ্টটিকে বা স্টাইল শীটটিকে নিজের ইচ্ছামত নামে সেভ করা যায় তবে এর ডিক্লেয়ারেশন হবে .css. আপনি এটি নোটপ্যাড ++ দ্বারা এটি করতে পারেন।

এরপর <head></head> এর মধ্যে <link rel="stylesheet" type="text/css" href="আপনার স্টাইলশীটের লিংক এখানে দেবেন"> যুক্ত করে এক্সটার্নাল স্টাইল শীট এর সাথে HTML এর লিংক তৈরি করা হয়। যা নিচে দেখানো হল।

<head>
 <link rel="stylesheet" type="text/css" href="abcd.css">
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="./My Device/rupu/rupu.css">
</head>
<body>

<h1> লিংকের দেওয়া স্টাইল অনুসারে এটি দেখাবে </h1>
<p>লিংকের দেওয়া স্টাইল অনুসারে এটি দেখাবে</p>

</body>
</html>





শেষ কথা:-

এই টিউটোরিয়াল এ এই পর্যন্তই। আশা করি এইটুকু বুঝেছেন।

কোন সমস্যা হলে মন্তব্য করতে ভুলবেন না।

ধন্যবাদ।

আমাদের পোস্ট শেয়ার করুন।

সিএসএস এর পার্ট-০৪| সিএসএস এর সিলেক্টর | সিএসএস বাংলা টিউটোরিয়াল



সিএসএস এর পার্ট-০৩|সিএসএস এর সিলেক্টর | সিএসএস বাংলা টিউটোরিয়াল






CSS এর মাধ্যমে এইচটিএমএল দ্বারা তৈরি করা ওয়েব পেজের এর বিভিন্ন অংশকে নির্দিষ্ট করে গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণ করা হয়।

HTML দ্বারা তৈরি ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে সিলেক্ট করার জন্য সিলেক্টর ব্যবহার করা হয়। CSS এ বেশ কয়েক ধরণের সিলেক্টর ব্যবহার করা হয় ।
এ গুলোর মধ্যে উল্লেখযোগ্য সিলেক্টর হল--
i) ট্যাগ সিলেক্টর
ii) ক্লাস সিলেক্টর
iii) আইডি সিলেক্টর



ট্যাগ সিলেক্টর:--




 ট্যাগ সিলেক্টর হল সেই সকল এইচটিএমএল ট্যাগ যা দ্বারা ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করে ডিজাইন করার জন্য ব্যবহৃত করা হয়ে থাকে।

যেমন---


<style>

 p{  background:blue;  font-family: Tahoma;  color: red;  }


</style>


উপরে বর্ণিত code এ HTML ট্যাগ body এর design করা হয়েছে। অর্থাৎ, web page টির body background color হবে blue , font হবে Tahoma এবং text color হবে লাল রঙের।

উদাহরণ --





<!DOCTYPE html>
<html>
<head>
 <style>
 p{
 background: blue ;
 font-family: Tahoma;
 color: red;
 }
 </style>
</head>
<body>
<p> এখানে সকল কিছু p ট্যাগের জন্য দেওয়া হয়েছে।
 <h3>Font এর রং red এবং Font family Tahoma.</h3>
</body>
</html>


ক্লাস সিলেক্টর:---



ক্লাস সিলেক্টর দ্বারা ওয়েবপেজের কোন অংশ বা এক বা একাধিক উপাদানকে নির্দিষ্টভাবে সিলেক্ট করার একটি জনপ্রিয় পদ্ধতি।

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

<style>
 .rayhan{color: blue;
     font-size:10px
 }
</style>

ক্লাস সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে class কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p class="rayhan">। এখানে rayhan হল ক্লাসের নাম। স্টাইল সিটে ক্লাসকে চিহ্নিত করতে (.) ডট চিহ্ন ব্যবহার করা হয় যা উপরের Code এ দেখানো হয়েছে। এর দ্বারা আপনি সিএসএস এ যে ডিজাইন দেবেন সেটা রান হবে। যেমন- আমি উপরে rayhan ক্লাসে লিখেছি এর কালার হবে নীল ও এর ফন্ট সাইজ হবে ১০px.

Example:

<!DOCTYPE html>
<html>
<head>

 <style>
 .rayhan{
     color: blue ;
     font-size:10px
 }
 </style>
</head>
<body>
 <p class="rayhan">Font এর রং blue বর্ণের এবং Font আকার 10px.<p>
</body>
</html>


আইডি সিলেক্টর---


এটা ক্লাস সিলেক্টরের মতই। এটির দ্বারা web page এর কোন অংশ বা কোন উপাদানকে নির্দিষ্টভাবে চিহ্নিত করা যায়।। কিন্তু এর দ্বারা একাধিক উপাদানকে ক্লাস সিলেক্টর এর মত একই আইডি সিলেক্টর দ্বারা চিহ্নিত করা যায় না।
নিচের উদাহরণ দেখলেই বুঝবেন।
<head>
<style>
 #rupu{
 color: green;
 font-family:Tahoma;
 text-align:center;
 }
</style>
</head>


আইডি সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে id কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p id="rupu">। এখানে rupu আইডির নাম। স্টাইল শীটে আইডিকে চিহ্নিত করতে (#) চিহ্ন ব্যবহার করা হয় যা উপরের Code এ দেখানো হয়েছে।

 এর ফলে আপনি যে সকল ডিজাইন করলেন সেটা সেই এইচটিএমএল ট্যাগে রান হবে।

উদাহরণ --


<!DOCTYPE html>
<html>
<head>

 <style>
  #rupu{
  color: green;
  font-family:Tahoma;
  text-align:justify;
 }
 </style>
</head>
<body>
 <p id="rupu">Font এর রং সবুজ বর্ণের এবং Font family Tahoma.<p>
</body>
</html>

গ্রুপিং সিলেক্টর:----



একজন ভাল প্রোগ্রামারের অন্যতম বৈশিষ্ট্য হচ্ছে, তিনি যতোটা সম্ভব কোডকে সক্ষিপ্ত করবেন।
গ্রুপিং সিলেক্টর ব্যবহার করে CSS এর কোডকে অনেকাংশে কমানো সম্ভব হয়।
 অনেক সময় বেশ কিছু HTML উপাদানের জন্য একই ধরণের স্ট্যাইল ব্যবহার করার প্রয়োজন হয়। যেমন h1,h2,p ইত্যাদির জন্য একই color, font-family, text-align ইত্যাদি প্রোপার্টি ব্যবহারের প্রয়োজন হলে সবগুলোর জন্য আলাদা আলাদা ভাবে স্ট্যাইল না করে, একই সাথে সিলেক্টর সমূহকে কমা দিয়ে লিখে স্ট্যাইল নির্ধারণ করলে কোড অনেক কম হবে।
<head>
<style>
p,div,h4,h1{
    text-align: center;
    color: red;
}
</style>
</head>

এখানে p,div,h4 ও h1 ট্যাগ এ একই style এর জন্য আমরা এভাবে গ্রুপ করে লিখেছি।

<!DOCTYPE html>
<html>
<head>

<style>
div,p,h1,h2{
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1>ABCDEFGH</h1>
<h2>অ আ ক খ গ ঘ </h2>
<p>অ আ ক খ গ ঘ </p>
<p>স্টাইল ছাড়া প্যারাগ্রাফ </p>

</body>
</html>


নেস্টিং সিলেক্টর:--


CSS এ একটি সিলেক্টরের অন্তর্ভূক্ত অপর একটি সিলেক্টরের জন্য স্ট্যাইল নির্ধারণ করার ক্ষেত্রে নেস্টিং সিলেক্টর ব্যবহার করা হয়।
ধরা যাক স্ট্যাইল শীটে p এর জন্য স্ট্যাইল নির্ধারণ করা হল। par নামের id বিশিষ্ট একটা div উপাদানের মধ্যে অপর একটা প্যারাগ্রাফ আছে। par এর জন্যও স্ট্যাইল নির্ধারণ করা হল। এখন যদি par মধ্যে অবস্থিত প্যারাগ্রাফটির জন্য অলাদা স্ট্যাইল তৈরি করার প্রয়োজন হয় তাহলে নেস্টিং সিলেক্টর ব্যবহার করতে হয়। এজন্য সিলেক্টরে লিখতে হবে par p ।

Example:


<!DOCTYPE html>
<html>
<head>
 <style>
 #par{
 background:blue;
 padding:15px;
 }
 #par p{
 color:red;
 }
</style>
</head>
<body>
<div id="par">
 এইটা par style অনুযায়ী হবে।
<p> এইটা par এবং par p দুইটা style অনুযায়ী হবে।</p>
</div>
</body>
</html>

আশা করি বুঝেছেন।



না বুঝলে অবশ্যই কমেন্ট করে জানাবেন।
ধন্যবাদ।

সিএসএস এর পার্ট - ৫ | সিএসএস বক্স মডেল | সিএসএস বাংলা টিউটোরিয়াল



বক্স মডেল


সকল HTML উপাদানকে CSS দ্বারা স্ট্যাইল যুক্ত করার ক্ষেত্রে বক্স হিসেবে বিবেচনা করা হয়। ওয়েব পেজের লে আউট ডিজাইনের ক্ষেত্রে বক্স মডেল খুবই গুরুত্বপূর্ণ। CSS বক্স মডেল প্রকৃত পক্ষে একটা বক্স যা, কোন HTML উপাদানকে আবৃত করে রাখে।
বক্স মডেল তৈরি করার জন্য Declaration এ কয়েকটি প্রপার্টি নির্ধারণ করে দিতে হয়।
এগুলো হচ্ছে,

i) বক্সের প্রস্থ
ii) বর্ডার
iii) পেডিং
iv) মার্জিন


উদাহরণ :-
<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>




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

Saturday, March 23, 2019

সিএসএস এর পার্ট -০৬ | সিএসএস এর ব্যাকগ্রাউন্ড কালার | সিএসএস বাংলা টিউটোরিয়াল







Web page এর বিভিন্ন উপাদান যেমন Body, Pragaph, Table ইত্যাদির জন্য ব্যাকগ্রাউন্ড একটি অপরিহার্য উপাদান। এ সকল উপাদান সমূহের ব্যাকগ্রাউন্ড হিসেবে কালার অথবা ইমেজ ব্যবহার করা্ যায়।

<head>
<style>
body {
    background: lightblue;
}
</style>
</head>

এখানে web page এর ব্যাকগ্রাউন্ড হিসেবে lightblue রং ব্যাবহার করা হয়েছে। আপনি চাইলে সেখানে color code ব্যাবহার করতে পারেন। যেমনঃ lightblue এর স্থলে #2EFEF7 (color code) ব্যাবহার করতে পারেন।

উদাহরণ :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: lightblue;
}
</style>
</head>
<body>

<h1>Background color is light blue.</h1>

</body>
</html>




বি:দ্র: আপনি এইচটিএমএল সিএসএস জাভা স্ক্রিপ্ট আমাদের সাইটে বসানো ইডিটর দিয়ে রান করাতে পারেন। এর জন্য আপনি হোমের ড্রপডাউন মেনু হতে Real Time HTML,CSS,JS Editor


সিএসএস এর পার্ট -০৭ | সিএসএস বর্ডার | সিএসএস বাংলা টিউটোরিয়াল





বর্ডার



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

i) বর্ডার স্টাইল
ii) বর্ডার ওয়াইডথ
iii) বর্ডার কালার
iv) পৃথক বর্ডার


বর্ডার স্টাইল



বর্ডার স্ট্যাইল নির্দেশ করে বর্ডারটি দেখতে কেমন হবে। বর্ডার স্ট্যাইল তৈরির জন্য Declaration করতে হবে, border-style:solid এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার স্ট্যাইল তৈরি করা যায়।


<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>


ডটেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে border-style:dotted ;
ড্যাসেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dashed;
ডাবল স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:double;
গ্রোভ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:groove;
রিডজ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:ridge;
ইনসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:inset;
আউটসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:outset;

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
 <style>
 p.dotted {border-style: dotted;}
 p.dashed {border-style: dashed;}
 p.solid {border-style: solid;}
 p.double {border-style: double;}
 p.groove {border-style: groove;}
 p.ridge {border-style: ridge;}
 p.inset {border-style: inset;}
 p.outset {border-style: outset;}
 p.none {border-style: none;}
 p.hidden {border-style: hidden;}
 p.mix {border-style: dotted dashed solid double;}
 </style>
</head>
<body>

 <p class="dotted">A dotted border.</p>
 <p class="dashed">A dashed border.</p>
 <p class="solid">A solid border.</p>
 <p class="double">A double border.</p>
 <p class="groove">A groove border.</p>
 <p class="ridge">A ridge border.</p>
 <p class="inset">An inset border.</p>
 <p class="outset">An outset border.</p>
 <p class="none">No border.</p>
 <p class="hidden">A hidden border.</p>
 <p class="mix">A mixed border.</p>

</body>
</html>






বর্ডার ওয়াইডথ



বর্ডার ওয়াইডথ নির্দেশ করে বর্ডারটি কতটা মোটা হবে। বর্ডার ওয়াইডথ নির্ধারণের জন্য Declaration করতে হবে, border-width:5px; এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার ওয়াইডথ নির্ধারণ করা যায়।


<head>
<style>
p.one {
    border-style: solid;
    border-width: thin;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
</style>
</head>



বর্ডার কালার



বর্ডার কালার নির্দেশ করে বর্ডারটির রং কেমন হবে। বর্ডার কালার নির্ধারণের জন্য Declaration করতে হবে, border-color:red; এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার কালার নির্ধারণ করা যায়।


<head>
<style>
p.one {
    border-style: solid;
    border-color: yellow;
}


p.two {
    border-style: solid;
    border-color: red green blue yellow;
}
</style>
</head>


হলুদ রঙের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:yellow;
rgb পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে border-color:rgb(0,255,0);
hex পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:#0000FF;
বর্ডার কালার ট্রান্সপারেন্ট হতে পারে, ট্রান্সপারেন্ট বর্ডার তৈরির জন্য Declaration করতে হবে,border-color:transparent; ।

কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের রঙের হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:red blue green yellow; এখানে ১ম red নির্দেশ করে top border color ; ২য় blue নির্দেশ করে right border color; ৩য় green নির্দেশ করে down border color; ৪র্থ yellow নির্দেশ করে left border color ;


পৃথক বর্ডার


কোন HTML উপাদানের চারপাশের বর্ডার এর স্টাইল, ওয়াইডথ এবং কালার এ সবই ভিন্ন হতে পারে।


<head>
<style>
p {
    border-top: dotted 8px RED;
    border-right: dashed 6px BLUE;
    border-bottom: double 6px GREEN;
    border-left: solid 5px YELLOW;
}
</style>
</head>



এ এধরণের বর্ডার তৈরির ক্ষেত্রে উপরের দিকের বর্ডারের জন্য Declaration করতে হবে,border-top: dotted 8px RED;
ডান দিকের বর্ডারের জন্য Declaration করতে হবে, border-right: dashed 6px BLUE;
নিচের দিকের বর্ডারের জন্য Declaration করতে হবে, border-bottom: double 6px GREEN;
বাম দিকের বর্ডারের জন্য Declaration করতে হবে,border-left: solid 5px YELLOW;

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-top: dotted 8px RED;
    border-right: dashed 6px BLUE;
    border-bottom: double 6px GREEN;
    border-left: solid 5px YELLOW;
}
</style>
</head>
<body>

<p>4 different border styles.</p>

</body>
</html>




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









সিএসএস এর পার্ট - ০৮| সিএসএস এর মার্জিন | সিএসএস বাংলা টিউটোরিয়াল









মার্জিন



বিভিন্ন HTML উপাদানের চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য মার্জিন ব্যবহার করা হয়। এজন্য CSS এ margin Property ব্যবহার করা হয়।
সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান মার্জিন তৈরি করার জন্য Declaration করতে হয় margin:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।


<head>
<style>
p {
    background-color: yellow;
}

p.ex {
    border:1px solid red;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
</style>
</head>


যদি উপরের দিকে মার্জিন দিতে হয় তাহলে Declaration করতে হবে margin-top:20px;
নিচের দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-bottom:25px;
বাম দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-left:30px;
ডান দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-right:35px;

চারদিকের মার্জিন একইসাথে Declaration করা যায় যেমন margin:20px 25px 30px 35px; এখানে 20px উপরের দিকের মার্জিন নির্দেশ করে, 25px ডান দিকের মার্জিন নির্দেশ করে, 30px নিচের দিকের মার্জিন নির্দেশ করে, 35px বাম দিকের মার্জিন নির্দেশ করে।


উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
p {
    background-color: yellow;
}

p.ex {
    border:1px solid red;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
</style>
</head>
<body>

<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>

</body>
</html>




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


সিএসএস এর পার্ট -৯ | সিএসএস এর প্যাডিং | সিএসএস বাংলা টিউটোরিয়াল







প্যাডিং



বিভিন্ন HTML উপাদানের যদি বর্ডার থাকে, তাহলে বর্ডার থেকে কনটেন্ট এর চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য প্যাডিং ব্যবহার করা হয।
প্যাডিং মূলত বিভিন্ন HTML উপাদানের ব্যকগ্রাউন্ড এরিয়া বৃদ্ধি করে থাকে । প্যাডিং ব্যবহার করার জন্য CSS এ padding Property ব্যবহার করা হয়। সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান প্যাডিং তৈরি করার জন্য Declaration করতে হয় padding:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।



<head>
<style>
.pad {
    border: 1px solid red;
    background-color: yellow;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>
</head>


যদি উপরের দিকে প্যাডিং দিতে হয় তাহলে Declaration করতে হবে padding-top:50px;
নিচের দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-bottom:50px;
বাম দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-left:80px;
ডান দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-right:30px;।

চারদিকের প্যাডিং একইসাথে Declaration করা যায় যেমন padding:50px 30px 50px 80px; এখানে 50px উপরের দিকের প্যাডিং নির্দেশ করে, 30px ডান দিকের প্যাডিং নির্দেশ করে, 50px নিচের দিকের প্যাডিং নির্দেশ করে, 80px বাম দিকের মার্জিন নির্দেশ করে।

উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
.pad {
    border: 1px solid red;
    background-color: yellow;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>
</head>
<body>

<p class="pad">This paragraph has a top and bottom padding of 50px, a left padding of 80px, and a right padding of 30px.</p>

</body>
</html>



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



সিএসএস এর পার্ট-১০ | সিএসএস এর টেক্সট | সিএসএস বাংলা টিউটোরিয়াল








টেক্সট



ওয়েব সাইটের প্রধান উপাদান হচ্ছে টেক্সট। সৌন্দর্য বৃদ্ধির জন্য এবং বিশেষ কিছু সুবিধা পাবার জন্য CSS এর মাধ্যমে টেক্সট এর স্টাইল তৈরি করা হয়। টেক্সট এর স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়।
এগুলো হচ্ছে
i) টেক্সট কালার
ii) টেক্সট এলাইনমেন্ট
iii) টেক্সট ডেকরেশন
iv) টেক্সট ট্রান্সফরমেশন




টেক্সট কালার


আমরা সাধারণত HTML এর মাধ্যমে টেক্সট ব্যবহারের জন্য <p>, <h1>, <h2>, <a> সহ আরো কিছু ট্যাগ ব্যবহার করি। এসকল টেক্সট এর কালার নির্ধারণের জন্য Declaration করতে হবে p { color: #FC9 } বা এর অনুরূপ। p এর স্থানে অন্যান্য ট্যাগের ক্ষেত্রে h1, h2 , a, body, অথবা কোন ট্যাগের id বা class বসতে পারে।


<head>
<style>
h1 {
    color: blue;
}
p {
    color: red;
}
</style>
</head>


উদাহরণ :--

<!DOCTYPE html>

<html>
<head>

 <style>
 h1 {
     color: blue;
 }
 p {
     color: red;
 }
 </style>
</head>
<body>
 <h1>This is h1</h1>
 <p>This is paragraph</p>
</body>
</html>




টেক্সট এলাইনমেন্ট


Web page এর টেক্সটকে সাজানোর জন্য টেক্সট এলাইনমেন্ট ব্যবহার করা হয়।

<head>
<style>
h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
</style>
</head>


টেক্সটকে পেজের বাম পাশে রাখার জন্য Declaration করতে হবে text-align:left;
অনুরূপভাবে ডান পাশে রাখার জন্য Declaration করতে হবে text-align:right;
মধ্যস্থানে রাখার জন্য Declaration করতে হবে text-align:center;
যদি টেক্সট এর প্রতিটা লাইন একই আকারে সাজাতে চাই তাহলে Declaration করতে হবে text-align:justify;


উদাহরণ :--


<!DOCTYPE html>
<html>
<head>


 <style>
 h1 {
     text-align: center;
 }

 h2 {
     text-align: left;
 }

 h3 {
     text-align: right;
 }
 </style>
</head>
<body>

 <h1>Heading 1 (center)</h1>
 <h2>Heading 2 (left)</h2>
 <h3>Heading 3 (right)</h3>

</body>
</html>



টেক্সট ডেকরেশন


কোন টেক্সট এর সাথে HTML এর <a> ট্যাগের মাধ্যমে লিংক যুক্ত করলে টেক্সটটির নিচে স্ট্রেট লাইন আসে। উক্ত স্ট্রেট লাইন স্থানান্তরিত করার জন্য, টেক্সট ডেকরেশন ব্যবহার করা হয়।


<head>
<style>
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
</style>
</head>


স্ট্রেট লাইনকে টেক্সট এর উপরে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:overline;
স্ট্রেট লাইনকে টেক্সট এর মধ্যস্থানে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:line-through;
স্ট্রেট লাইনকে টেক্সট এর নিচে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:underline;
টেক্সট কে পর্যয়ক্রমিকভাবে দৃশ্যমান এবং অদৃশ্য করার জন্য Declaration করতে হবে text-decoration:blink;
স্ট্রেট লাইনকে সম্পূর্ণরূপে দূর করার জন্য Declaration করতে হবে text-decoration:none; ।

<!DOCTYPE html>
<html>
<head>


<style>
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>


টেক্সট ট্রান্সফরমেশন


টেক্সট অন্তর্ভূক্ত অক্ষর সমূহকে বড় হাতের বা ছোট হাতের অক্ষরে অথবা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য টেক্সট ট্রান্সফরমেশন ব্যবহার করা হয়।


<head>
<style>
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
</style>
</head>


টেক্সট এর অন্তর্ভূক্ত সকল অক্ষরকে বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:uppercase;
ছোট হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:lowercase;
প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:capitalize; । 

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This text is uppercase.</p>
<p class="lowercase">This text is lowercase.</p>
<p class="capitalize">This text is capitalize.</p>

</body>
</html>





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


সিএসএস এর পার্ট-১১ | সিএসএস এর ফন্ট স্টাইল | সিএসএস বাংলা টিউটোরিয়াল








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

i) ফন্ট ফ্যামিলি
ii) ফন্ট সাইজ
iii) ফন্ট ভেরিয়েন্ট
iv) ফন্ট ওয়েট


ফন্ট ফ্যামিলি


টেক্সট সমূহে কি ধরণের ফন্ট ব্যবহার করা হবে, তা নির্দেশ করার জন্য ফন্ট ফ্যামিলি ব্যবহার করা হয়।


<head>
<style>
p.serif {
    font-family: "Times New Roman", Times, serif;
}
</style>
</head>


টেক্সট সমূহের জন্য Arial ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Arial;
অনুরূপভাবে Tahoma ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Tahoma;


অনেক সময় টেক্সট সমূহের জন্য একটির পরিপূরক হিসেবে একাধিক ফন্ট Declaration এ উল্লেখ করা হয় যেমনঃ font-family: "Times New Roman", Times, serif;
যখন ব্রাউজার প্রথম ফন্ট সাপোর্ট করবে না তখন টেক্সট সমূহ ২য় বা ৩য় ফন্টে প্রদর্শিত হবে।

উদাহরণ :--:

<!DOCTYPE html>
<html>
<head>

<style>
p.serif {
    font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>

</body>
</html>




ফন্ট সাইজ


টেক্সট সমূহে ব্যবহৃত ফন্ট সমূহের আকার বা সাইজ কেমন হবে, তা নির্দেশ করার জন্য ফন্ট সাইজ ব্যবহার করা হয়।


<head>
<style>
h2 {
    font-size: 30px;
}

p {
    font-size:medium;
}
</style>
</head>


টেক্সট সমূহের জন্য 25px এর ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-size:25px;
অনুরূপভাবে 20px ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-size:20px;।

টেক্সট সমূহে ব্যবহৃত ফন্ট সমূহের আকার বা সাইজ পিক্সেলে বা px এ না দিয়ে শতকরা হিসেবেও দেযা যেতে পারে, এক্ষেত্রে Declaration করতে হবে font-size:100% এর অনুরূপ।
টেক্সট সমূহের ফন্ট সাইজ Declaration এর আরো বেশ কিছু পদ্ধতি আছে যেমন font-size:larger; 
font-size:medium; font-size:small; font-size:smaller; font-size:xx-large;
font-size:large; font-size:x-large; font-size:x-small; font-size:xx-small; ইত্যাদি।

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
h2 {
    font-size: 30px;
}

p {
    font-size:medium;
}
</style>
</head>
<body>

<h2>This is heading 2 font size 30px</h2>
<p>This is a paragraph font size 14px.</p>

</body>
</html>


ফন্ট ভেরিয়েন্ট



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


<head>
<style>
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}
</style>
</head>


এখানে "My name is Hege Refsnes." লেখাটির ভারিয়েন্ট স্টাইল তৈরির জন্য Declaration করতে হবে font-variant: small-caps; ।


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}
</style>
</head>
<body>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>



ফন্ট ওয়েট


কোন ওয়েব পেজে ব্যবহৃত টেক্সট সমূহ কতটা মোটা হবে বা চিকন হবে তা নির্ধারণ করার জন্য ফন্ট ওয়েট ব্যবহার করা হয়।


<head>
<style>
p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}
</style>
</head>


বোল্ড টেক্সট তৈরির জন্য Declaration করতে হবে font-weight:bold;
টেক্সট সমূহ কতটা মোটা হবে তা নির্ধারণের জন্য সংখ্যা ব্যবহার করা যেতে পারে, যেমন font-weight:900;
এছাড়া ফন্ট ওয়েট স্টাইল হিসেবে font-weight:lighter; এবং font-weight:bolder; ব্যবহার করা হয়।

উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>



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




Friday, March 22, 2019

সিএসএস এর পার্ট-১২ | সিএসএস এর লিংক | সিএসএস বাংলা টিউটোরিয়াল







HTML এ অন্যান্য পেজের সাথে সংযোগ স্থাপনের জন্য <a></a> বা এঙ্কর ট্যাগ ব্যবহার করে লিংক তৈরি করা হয়। আর লিংক সবচেয়ে বেশি ব্যবহার করা হয় নেভিগেশনবারে। সাধারণত কোন একটি লিংক এর চারটি অবস্থা থাকে।
 যথাঃ-

i) লিংকের সাধারণ অবস্থা
ii) লিংকের ভিজিটেড অবস্থা
iii) লিংকের হোবার অবস্থা
iv) লিংকের সক্রিয় অবস্থা




<head>
<style>
a:link {
 color:blue;
}
</style>
</head>


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
a:link {
 color:blue;
}
</style>
</head>
<body>
 <a href="http://www.google.com/">GOOGLE</a>
 <a href="http://www.facebook.com/">FACEBOOK</a>
 <a href="http://www.twitter.com/">TWITTER</a>
 <a href="http://www.ask.com/">ASK</a>
</body>
</html>



লিংকের ভিজিটেড অবস্থা:


কোন একটি লিংক এক বা একাধিক বার ব্যবহার করা হলে এবং লিংকের উপর মাউস না রাখলে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের ভিজিটেড অবস্থা বলে। এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:visited {color:gray}।

<head>
<style>
a:link {
 color:blue;
}
a:visited {
 color:gray;
}
</style>
</head>


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
a:link {
 color:blue;
}
a:visited {
 color:gray;
}
</style>
</head>
<body >
<a href="http://www.google.com/">GOOGLE</a>
<a href="http://www.facebook.com/">FACEBOOK</a>
<a href="http://www.twitter.com/">TWITTER</a>
<a href="http://www.ask.com/">ASK</a>
</body>
</html>


লিংকের ভিজিটেড অবস্থা:


কোন একটি লিংক এক বা একাধিক বার ব্যবহার করা হলে এবং লিংকের উপর মাউস না রাখলে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের ভিজিটেড অবস্থা বলে। এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:visited {color:gray}।


<head>
<style>
a:link {
 color:blue;
}
a:visited {
 color:gray;
}
</style>
</head>



উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
a:link {
 color:blue;
}
a:visited {
 color:gray;
}
</style>
</head>
<body >
<a href="http://www.google.com/">GOOGLE</a>
<a href="http://www.facebook.com/">FACEBOOK</a>
<a href="http://www.twitter.com/">TWITTER</a>
<a href="http://www.ask.com/">ASK</a>
</body>
</html>



লিংকের সক্রিয় অবস্থা


যখন লিংকটি সক্রিয় অবস্থায় থাকে, অর্থাৎ মাউস ক্লিক করার মূহর্তে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের সক্রিয় অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:active {color:green;}
চারটি অবস্থাতেই লিংকের ব্যগ্রাউন্ড পরিবর্তন করা যায়। এবং নেভিগেশন বারে এই লজিকটিই বেশি ব্যবহৃত হয়। লিংকের ব্যগ্রাউন্ড পরিবর্তন করার জন্য স্টাইল সিটে লেখতে হবে a:hover{background:green; এর অনুরূপ।


<head>
<style>
a:link {
 color:blue;
}
a:visited {
 color:gray;
}
a:hover {
 color: yellow;
}
a:active {
 color:green;
}
</style>
</head>


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
a:link {
 color:blue;
}
a:visited {
 color:gray;
}
a:hover {
 color: yellow;
}
a:active {
 color:green;
}
</style>
</head>
<body >
<a href="http://www.google.com/">GOOGLE</a>
<a href="http://www.facebook.com/">FACEBOOK</a>
<a href="http://www.twitter.com/">TWITTER</a>
<a href="http://www.ask.com/">ASK</a>
</body>
</html>



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



সিএসএস এর পার্ট-১৩ | সিএসএস লিস্ট | সিএসএস বাংলা টিউটোরিয়াল







লিস্ট


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



অর্ডার লিস্ট


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

<head>
<style>
.alphabet {
 list-style-type:lower-alpha;
}
.decimal {
 list-style-type:decimal;
}
.roman {
 list-style-type:lower-roman;
}
</style>
</head>

এ্যালফাবেটিক স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:upper-alpha; অথবা list-style-type:lower-alpha;
ডেসিমাল স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:decimal;
রোমান স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:upper-roman; অথবা list-style-type:lower-roman; ।

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
.alphabet {
 list-style-type:lower-alpha;
}
.decimal {
 list-style-type:decimal;
}
.roman {
 list-style-type:lower-roman;
}
</style>
</head>
<body >
<h3>Alphabet Type list</h3>
 <ol class="alphabet">
 <li>Home</li>
 <li>About Us</li>
 <li>Contact Us</li>
 </ol>
<h3>Number Type list</h3>
 <ol class="decimal">
 <li>HTML</li>
 <li>CSS</li>
 <li>PHP</li>
 </ol>
<h3>Roman Number Type list</h3>
 <ol class="roman">
 <li>Pragaph</li>
 <li>Table</li>
 <li>List</li>
 </ol>
</body>
</html>



 আনঅর্ডার লিস্ট


আন অর্ডার লিস্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে, আন অর্ডার লিস্ট বেশ কয়েক ধরণের হতে পারে। যেমন ডিক্স স্টাইল, সার্কেল স্টাইল, স্কয়ার স্টাইল ইত্যাদি।

<head>
<style>
#disc {
 list-style-type:disc;
}
#circle {
 list-style-type:circle;
}
#square {
 list-style-type:square;
}
</style>
</head>

ডিক্স স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:disc;
সার্কেল স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:circle;
স্কয়ার স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:square; ।


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
#disc {
 list-style-type:disc;
}
#circle {
 list-style-type:circle;
}
#square {
 list-style-type:square;
}
</style>
</head>
<body >
<h4>Disc Type list</h4>
 <ul id="disc">
 <li>Home</li>
 <li>About Us</li>
 <li>Contact Us</li>
 </ul>
<h4>Circle Type list</h4>
 <ul id="circle">
 <li>HTML</li>
 <li>CSS</li>
 <li>PHP</li>
 </ul>
<h4>Square Type list</h4>
 <ul id="square">
 <li>Pragaph</li>
 <li>Table</li>
 <li>List</li>
 </ul>
</body>
</html>



লিস্টে ইমেজের ব্যবহার



লিস্টে যেকোন সিম্বলের পরিবর্তে ছোট আকারের ইমেজ ব্যবহার করা যায়।নেভিগেশন বারে লিস্টের ব্যবহার খুবই জনপ্রিয়। সাধারণত সাইডবার নেভিগেশনে ব্যবহৃত লিস্টে লিস্ট স্টাইল হিসেবে ইমেজের ব্যবহার বেশি দেখা যায়।লিস্ট স্টাইল হিসেবে ইমেজ ব্যবহারের জন্য Declaration করতে হবে list-style-image:url(box.png)।


<head>
<style>
ul{
 list-style-image:url("./icon/box.png");
}
</style>
</head>

এখানে box.png ইমেজটি icon folder এর ভিতরে রাখা হয়েছে।

উদাহরণ :--



<!DOCTYPE html>
<html>
<head>

<style>
ul{
 list-style-image:url("এখানে ইমেজের লিংক দেবেন।");
}
</style>
</head>
<body>
<h1>List Style Image</h1>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
</body>
</html>






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


সিএসএস পার্ট -১৪ | সিএসএস এর টেবিল | সিএসএস বাংলা টিউটোরিয়াল








টেবিল


CSS এ টেবিল খুবই গুরুত্বপূর্ণ একটি উপাদান। ওয়েব পেজে টেবিল ব্যাবহার করে খুব সহজেই তথ্য-উপাত্ত,পরিসংখ্যান উপস্থাপন করা যায়। CSS ব্যবহার করে HTML এ তৈরিকৃত টেবিলকে আরো আকর্ষণীয় করা যায়। CSS ব্যবহার করে টেবিলের স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয়ের উপর কাজ করতে হয়।
এগুলো হচ্ছেঃ

i) টেবিল বর্ডার
ii) টেবিল ওয়াইডথ এন্ড হাইট
iii) টেবিল টেক্সট এলাইনমেন্ট
iv) টেবিল কালার


টেবিল বর্ডার


টেবিল বর্ডার মূলত টেবিলের দৃশ্যমান মূল গঠন তৈরি করা হয়। টেবিলের প্রতিটা সারি তৈরির জন্য HTML এ <tr></tr> ব্যবহার করা হয়, এবং প্রতিটা সেল তৈরির জন্য <td></td>ব্যবহার করা হয়। <th></th> এর মাধ্যমে টেবিল হেডার তৈরি করা হয়।


<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>


এখানে মূল টেবিল, টেবিলের প্রতিটা সারি এবং প্রতিটা সেল এর জন্য 1pxকালো রং এর একই স্ট্যাইলের বর্ডার নির্ধারণ করা হয়েছে।

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>




টেবিল ওয়াইডথ এন্ড হাইট



টেবিল ডিজাইনের ক্ষেত্রে যে বিষয়টি প্রথমে চিন্তা করতে হয়, তা হচ্ছে টেবিলটি কতটুকু চওড়া হবে এবং এর উচ্চতা কতটুকু হবে, টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল কেমন হবে। টেবিলের চওড়া কেমন হবে এবং এর উচ্চতা নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে :

<head>
<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    height: 50px;
}
</style>
</head>


মানসমূহ px তথা পিক্সেলে অথবা পেজের % শতকরা হিসেবে দেয়া যেতে পারে। শতকরা হিসেবে মান দিলে মনিটরের সাইজ অনুসারে টেবিলের আকার পরিবর্তিত হবে কিন্তু পিক্সেলে মান দিলে কোন পরিবর্তন হবে না।নির্ধারণ করা হয়েছে।


উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    height: 50px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
</table>

</body>
</html>



টেবিল টেক্সট এলাইনমেন্ট


টেবিলে টেক্সট সমূহ কিভাবে থাকবে তা নির্দেশ করার জন্য টেবিল টেক্সট এলাইনমেন্ট ব্যবহার করা হয়।

<head>
<style>

th, td{
    text-align: center;
}
</style>
</head>

প্রতিটা সেলের টেক্সট সমূহ বামে রাখতে হলে স্টাইল শীটে লেখতে হবে,text-align:left;
ডানে রাখতে হলে Declaration করতে হবে text-align:right;
মাঝখানে রাখতে হলে Declaration করতে হবে text-align:center;


এখন যদি প্রতিটা সেলের টেক্সট সমূহের ভার্টিক্যাল এলাইনমেন্ট অর্থাৎ প্রতিটা সেলের মধ্যে টেক্সট সমূহ উপরের দিকে থাকবে না নিচের দিকে থাকবে অথবা মাঝামাঝি অবস্থানে থাকবে কিনা নির্ধারণ করতে হয় তাহলে Declaration এ vertical-align নির্ধারণ করে দিতে হবে।টেক্সট সমূহ নিচের দিকে রাখার জন্য Declaration করতে হবে, vertical-align:bottom;


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td{
    text-align: center;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>

</table>

</body>


</html>





টেবিল কালার



বর্তমানে একটা ওয়েব সাইট শুধুমাত্র তথ্য প্রকাশের উদ্দেশ্যে করা হয় না। তথ্যটি কতটা সুন্দরভাবে এবং সহজে ব্যবহারযোগ্য করে ব্যবহারকারীর নিকট উপস্থাপন করা হল, সেটাও অধিক গুরুত্বপূর্ণ। ওয়েব পেজে টেবিলে উপস্থাপিত পরিসংখ্যান বা তালিকাকে CSS ব্যবহার করে আকর্ষণীয়রূপে ব্যবহারকারীর নিকট প্রদর্শন করা যায়। এক্ষেত্রে টেবিলের হেডার এবং প্রতিটা সেলের কালার অধিক গুরুত্বপূর্ণ ভূমিকা পালন করে। টেবিল হেডার এর ব্যকগ্রাউন্ড কালার নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে:
<head>
<style>
th {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>



উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

th {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<h2>Colored Table Header</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
 
</table>

</body>
</html>




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


সিএসএস এর পার্ট -১৫ | সিএসএস এর ডিসপ্লে | সিএসএস বাংলা টিউটোরিয়াল






প্রদর্শন পদ্ধতি


CSS এ ডিসপ্লে প্রোপার্টি প্রকাশ করে কোন একটা উপাদান কিভাবে প্রদর্শিত হবে। ডিসপ্লে প্রোপার্টির বেশ কিছু value হতে পারে, এদের মধ্যে সবচেয়ে বেশি ব্যাবহৃত হয়,

i) ডিসপ্লে নান
ii) ডিসপ্লে ইন লাইন
iii) ডিসপ্লে ব্লক


ডিসপ্লে নান


কোন বিশেষ উপদানকে প্রদর্শন না করার জন্য ডিসপ্লে নান ব্যবহার করা হয়, এজন্য Declaration করতে হয় display:none;।


<head>
<style>
h1.hidden {
    display: none;
}
</style>
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
h1.hidden {
    display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>



ডিসপ্লে ইন লাইন


CSS এর মাধ্যমে HTML উপাদান সমূহকে একই লাইনে প্রদর্শনের জন্য ডিসপ্লে ইন লাইন ব্যবহার করা হয়। এটা মূলত সবচেয়ে বেশি ব্যাবহৃত হয় নেভিগেশন বারে। HTML উপাদান সমূহকে একই লাইনে প্রদর্শনের জন্য Declaration করতে হয় display:inline; এর অনুরূপ।


<head>
<style>
li {
    display: inline;
}
</style>
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
li {
    display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="#" target="_blank">HTML</a></li>
  <li><a href="#" target="_blank">CSS</a></li>
  <li><a href="#" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>



ডিসপ্লে ব্লক


CSS মাধ্যমে HTML উপাদান সমূহকে একই কলামে প্রদর্শনের জন্য ডিসপ্লে ব্লক ব্যবহার করা হয়। এটা মূলত সবচেয়ে বেশি ব্যাবহৃত হয় ভার্টিক্যাল নেভিগেশন বারে, তথা সাইডবার নেভিগেশন বারে। HTML উপাদান সমূহকে একই কলামে প্রদর্শনের জন্য Declaration করতে হয় display:block; এর অনুরূপ।


<head>
<style>
span {
    display: block;
}
</style>
</head>

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>
<style>
span {
    display: block;
}
</style>
</head>
<body>

<span>A display property with a value of "block" results in</span>
<span>a line break between the two elements.</span>

</body>
</html>




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


সিএসএস এর পার্ট-১৬ | সিএসএস এর ভিজিবিলিটি | সিএসএস বাংলা টিউটোরিয়াল








সিএসএস ভিজিবিলিটি


ভিজিবিলিটি অর্থ দৃষ্টিপাত।
কোন উপাদানকে প্রদর্শন করা হবে কি না তা নির্দেশ করার জন্য CSS এ ভিজিবিলিটি প্রোপার্টি ব্যবহার করা হয়।
যেমন কোন উপাদানকে প্রদর্শন করার জন্য Declaration করতে হয় visibility:visible;
কোন উপাদানকে প্রদর্শন না করার জন্য Declaration করতে হয়, visibility:hidden;
ভিজিবিলিটি প্রোপার্টির বেশ কিছু value হতে পারে, এদের মধ্যে উল্লেখযোগ্য হচ্ছে,

i) ভিজিবিলিটি ভিজিবল
ii) ভিজিবিলিটি হিডেন
iii) ভিজিবিলিটি কলাপস্



ভিজিবিলিটি ভিজিবল


কোন উপাদানকে প্রদর্শন করার জন্য Declaration করতে হয় visibility:visible;


<head>
 <style>
 p{
  visibility:visible;
 }
 </style>
</head>

উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

 <style>
 p{
  visibility:visible;
 }
 </style>
</head>
<body>
<p>This is Visible.</p>
</body>
</html>



 ভিজিবিলিটি হিডেন


ডিসপ্লে নান এবং ভিজিবিলিটি হিডেন উভই HTML উপাদানকে লুকানোর জন্য ব্যবহার করা হয়। কিন্তু উভয়ের মধ্যে পার্থক্য রয়েছে। কোন HTML উপাদানের জন্য CSS এ visibility:hidden; করলে HTML উপাদানটি প্রদর্শিত হয় না ঠিকই কিন্তু HTML উপাদানটি সমপরিমান স্থান ফাঁকা রাখে। কিন্তু কোন HTML উপাদানের জন্য CSS এ display:none;করলে HTML উপাদানটি প্রদর্শিত হয় না এবং কোন ফাঁকা স্থান তৈরি হয় না।

<head>
 <style>
        .hidden{
         visibility:hidden;
         }
 </style>
</head>


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

 <style>
 p{
  visibility:visible;
 }
        .none{
         display:none;
         }
        .hidden{
         visibility:hidden;
         }
 </style>
</head>
<body>
<p>Display none start.</p>
<p class="none">Display none.</p>
<p>Display none end. <br>
(Between start and end no empty space.)</p>

<p>Visibility hidden start.</p>
<p class="hidden">Display none.</p>
<p>Visibility hidden end. <br>
(Between start and end it takes empty space.)</p>
</body>
</html>


ভিজিবিলিটি কলাপস্



সাধারণত কোন টেবিলের কোন সাড়ি বা কলাম কে অদৃশ্য করার জন্য ভিজিবিলিটি কলাপস্ ব্যবহার করা হয়। এজন্য Declaration করতে হয় visibility:collapse; ।


<head>
<style>
tr.collapse {
    visibility: collapse;
}
</style>
</head>

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}

tr.collapse {
    visibility: collapse;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr class="collapse">
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>


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


সিএসএস পার্ট -১৭ | সিএসএস ইমেজ গ্যালারি | সিএসএস বাংলা টিউটোরিয়াল






ইমেজ গ্যালারি




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

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 200px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="img">
    <img src="./images/light.png" alt="Light">
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <img src="./images/leaf.png" alt="Leaf">
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <img src="./images/tree.png" alt="Tree">
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <img src="./images/partu.png" alt="Partu">
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>


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


Thursday, March 21, 2019

সিএসএস এর পার্ট -১৮ | সিএসএস এর ম্যাক্স উইথ | সিএসএস বাংলা টিউটোরিয়াল





ম্যাক্স- উইথ

পূর্ববর্তী অধ্যায় এ উল্লেখ করা হয়েছিল যে, block-level এলিমেন্ট সবসময়ই ব্যবহারযোগ্য পূর্ণ প্রসস্থ জায়গা দখল করে অর্থাৎ ডানে ও বায়ে যতটা সম্ভব প্রসারিত হয় ।
block-level এলিমেন্ট এর প্রসস্থতা নির্ধারণ করে দিলে ধারক এর প্রসারিত হওয়া বন্ধ করে দেয়া যেতে পারে। তারপর, আপনি মার্জিন auto হিসেবে সেট করে দিতে পারেন, এর ধারক এর মধ্যে এলিমেন্ট হরিজেন্টালি সেন্টার হিসেবে। এলিমেন্টটি নির্দিষ্ট করা প্রসস্ততা পর্যন্তিই জায়গা দখল করতে পারবে এবং বাকি খালি জায়গা দুই মার্জিন এর মধ্যে সমানভাবে ভাগ হবে।
যখন ব্রাউজার উইন্ডো এর আকার এলিমেন্ট এর প্রসস্থতা থেকে ছোট হবে তখন
সমস্যা সৃষ্টি করবে। তখন ব্রাউজার একটি horizontal scrollbar যোগ করবে। এর সমাধান হচ্ছে max-width ব্যবহার করা, এটি ছোট উইন্ডোতে ব্রাউজার হ্যান্ডলিং সহজ করে। যখন ছোট কোন ডিভাইস এ সাইট ভিজিট করা হয় তখন এটি খুবই গুরুত্বপূর্ণ।





উদাহরণ :--



<!DOCTYPE html>
<html>
<head>

<style>
div.ex1 {
    width:500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width:500px;
    margin: auto;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">
This div element has width: 500px;</div>



<div class="ex2">
This div element has max-width: 500px;</div>

</body>
</html>

একে রান করালে দেখাবে::-









This div element has width: 500px;



This div element has max-width: 500px;







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



সিএসএস এর পার্ট- ১৯ | সিএসএস এর সিলেক্টর ও স্যানট্যাক্সের অবস্থান | সিএসএস বাংলা টিউটোরিয়াল





অবস্থান


ওয়েব পেজে বিভিন্ন HTML উপাদান সমূহ কোথায় কিভাবে প্রদর্শিত হবে তা প্রকাশ করার জন্য position প্রোপার্টি ব্যবহার করা হয়। এর সাথে top, bottom, left, and right প্রোপার্টি সমূহ ব্যবহার করে কোন HTML উপাদানের প্রকৃত অবস্থান নির্ধারণ করা হয়।
position প্রোপার্টির চার ধরণের মান হতে পারে। এগুলো হচ্ছে,

i) পজিশন স্ট্যাটিক
ii) পজিশন ফিক্সড
iii) পজিশন রিলেটিভ
iv) পজিশন এবসলিউট



পজিশন স্ট্যাটিক


কোন একটি HTML উপাদানের পজিশন প্রোপার্টি যদি স্ট্যাটিক করে দেওয়া হয়; তাহলে তা HTML উপাদান সমূহের সাধারণ এবং স্বভাবিক পজিশন নির্দেশ করবে। এক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহ ডিক্লারেশন করলেও এ অনুযায়ী কোন কাজ হবে না; অর্থাৎ top, bottom, left, and right প্রোপার্টি সমূহ নিস্ক্রিয় হয়ে যাবে।



উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static</h2>

<div class="static">
This div element has position: static
</div>

</body>
</html>


পজিশন ফিক্সড


কোন একটি HTML উপাদানকে মনিটর স্ক্রিনের সাপেক্ষে কোন নির্দিষ্ট স্থানে স্থিরভাবে স্থাপন করার জন্য পজিশন ফিক্সড ব্যবহার করা হয়। এজন্য প্রথমে position:fixed; ডিক্লারেশন করে, এর পর top, bottom, left, and right প্রোপার্টি সমূহ ডিক্লারেশন করতে হয়। 



উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed</h2>

<div class="fixed">
This div element has position: fixed.
</div>

</body>
</html>






পজিশন রিলেটিভ



HTML উপাদান সমূহের স্বাভাবিক অবস্থানের সাপেক্ষে top, bottom, left, and right প্রোপার্টি ব্যবহারের মাধ্যমে কোন বস্তুর অবস্থান নির্ধারণের জন্য রিলেটিভ পজিশন প্রোপার্টি ব্যবহার করা হয়। পজিশন প্রোপার্টি যদি স্ট্যাটিক করে দেওয়া হয়, তাহলে তা HTML উপাদান সমূহের সাধারণ এবং স্বভাবিক পজিশন নির্দেশ করে, কিন্তু পজিশন রিলেটিভ এবং পজিশন স্ট্যাটিক প্রোপার্টির মধ্যে পার্থক্য হচ্ছে পজিশন স্ট্যাটিক প্রোপার্টির ক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহ নিস্ক্রিয় থাকে; আর পজিশন রিলেটিভ প্রোপার্টির ক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহের মাধ্যমেই কোন বস্তুর অবস্থান নির্দেশ করা হয়।
পজিশন রিলেটিভ প্রোপার্টির ক্ষেতে সকল হিসাব শুরু হয় ঐ উপাদানটির স্বাভাবিক অবস্থান থেকে। অর্থাৎ পজিশনিং না করা হলে উপাদানটি যে স্থানে অবস্থান করতো সেখান থেকে।

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative</h2>

<div class="relative">
This div element has position: relative.
</div>

</body>
</html>





পজিশন এবসলিউট


HTML উপাদান সমূহের প্রকৃত অবস্থান নির্ধারণের জন্য পজিশন এবসলিউট প্রোপার্টি ব্যবহার করা হয়। কোন একটি HTML উপাদানের পজিশন প্রোপার্টি যদি এবসলিউট করে দেওয়া হয় তাহলে তার অবস্থান স্বভাবিক ক্রমে নির্দেশিত হয় না, এক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহের মাধ্যমে ঐ উপাদানটির অবস্থান নির্ধারিত হয়। এক্ষেত্রে অন্য একটি উপাদানের উপরেও ওভারল্যাপ করে ঐ উপাদানটির অবস্থান নির্ধারণ করা সম্ভব হয়।


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.relative {
    position: relative;
    width: 300px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute</h2>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>


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

সিএসএস এর পার্ট-২০ | সিএসএস এর ফ্লোট | সিএসএস বাংলা টিউটোরিয়াল




ফ্লোট


ফ্লোটের বাংলা হলো ভাসা। সিএসএস ফ্লোটের মাধ্যমে একটি এলিমেন্টকে ব্রাউজার স্ক্রিনের বাম অথবা ডান দিকে ঠেলে বা ভাসিয়ে দেয়া যায়। এতে ডকুমেন্টের অন্যান্য এলিমেন্টগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপ (wrap) নামে পরিচিত। ইমেজ নিয়ে কাজ করার ক্ষেত্রে সাধারণত ফ্লোট ব্যবহার করা হয় কিন্তু এর মূল ব্যবহার হয় পেজের লেআউট নিয়ে কাজ করার সময়।


যেভাবে একটি এলিমেন্ট ভাসে

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




উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
img {
    float: right;
    margin: 0 0 10px 10px;
}
</style>
</head>
<body>

<p><img src="./images/tree.png" alt="CSS" width="100" height="100">
In this example, the image will float to the right in the paragraph,
and the text in the paragraph will wrap around the image.</p>

</body>
</html>



ক্লিয়ার ব্যবহার করে ফ্লোট বন্ধ করা


ফ্লোটিং এলিমেন্টের পরের এলিমেন্টগুল এর চারপাশে ফ্লো বা ভেসে বেড়াবে। ক্লিয়ার প্রপার্টি কোন এলিমেন্টের কোন দিকে (ডান অথবা বাম) অন্য ফ্লোটিং এলিমেন্ট থাকতে পারবেনা তা বলে দেয়। নিচের উদাহরণে ইমেজ গ্যালারিতে টেক্সট লাইনের সাথে ক্লিয়ার প্রপার্টি ব্যবহার করা হয়েছে।




উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2 {
    border: 1px solid red;
}


.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4 {
    border: 1px solid red;
    clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2</div><br><br><br>

<h2>Using clear</h2>
<div class="div3">div3</div>
<div class="div4">div4</div>

</body>
</html>



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