CSS কি এবং কেনঃ
আমরা এতক্ষন সিখসিলাম এইচটিএমএল । এইচটিএমএল দিয়ে একটা ওয়েব পেজ এর সব ডিজাইন করা যায় না সেই জন্য দরকার সিএসএস । সিএসএস নতুন কোন কিছু না এটি ব্যবহার করা হয় এইচটিএমএল কে ডিজাইন করার জন্য । এক কথায় এইচটিএমএল কে সাজান গোছানোই হল সিএসএস এর কাজ।
CSS এর পুরা নাম cascading style sheet.. নাম দেখাই বুঝা যাচ্ছে এটি স্টাইল করার জন্যই ব্যবহার করা হয় ।
এবার তাহলে আসুন সিএসএস শুরু করা যাক। ধরুন আপনি কোন ১ টি প্যারাগ্রাফ লিখলেন এইচটিএমএল ট্যাগ দিয়ে এবার আপনি চান যে এটার রং লাল বা সবুজ হোক তাহলে কিন্তু আপনি এইচটিএমএল দিয়ে এটির রং আপনি লাল করতে পারবেন না এজন্যই দরকার সিএসএস যা দিয়ে আপনি অনায়াসে প্যারাগ্রাফ এর রং পরিবরতন করতে পারবেন। আসুন নিচের উদাহরন দিয়েই শুরু করি ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
p{
color:red;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<p>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</p>
</body>
</html>
আপনি dreamweaver সফটওয়্যার টি ওপেন করে এই কোড টি পেস্ট করুন । এখানে বডি ট্যাগ এর ভিতরে একটি প্যারাগ্রাফ লেখা হয়েছে । এবং উপরে তিতেল এর নিচে এর স্টাইল দেওয়ার জন্য কিছু সিএসএস প্রপার্টি লেখা হয়েছে । CSS কোড টি নিচে দেয়া হল ।
<style type=”text/css”>
p{
color:red;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-style:italic;
font-weight:bold;
}
</style>
এবার আপনি CSS কোড টি delete করে রান করে দেখুন যে ব্রাউজার এ সাধারন একটি প্যারাগ্রাফ দেখাচ্ছে । এবার CSS কোড টি লিখে রান করুন । এখন নিশ্চয় দেখতে পাচ্ছেন যে প্যারাগ্রাফ টির স্টাইল পরিবর্তন হয়েছে ।
এবার আসুন কোড গুলো আলোচনা করি ।
color:red==color লাল করা
font-family:Arial, Helvetica, sans-serif==এই ফন্ট এ লেখাটি হবে
font-size:16px== ফন্ট এর সাইজ কত বড় হবে
font-style:italic==ফন্ট বাঁকা হবে কিনা
font-weight:bold==ফন্ট বোল্ড হবে কিনা
এবার নিচের কোড টি সিএসএস এর ভিতরে পেস্ট করে দিন । রান করুন দেখুন কি হয় ।
text-align:left;
width:650px;
background-color:#004F00;
নিশ্চয় দেখতে পাচ্ছেন যে প্যারাগ্রাফ টির প্রস্থ এবং background-color পরিবর্তন হয়ে গেছে ।
এখানে text-align:left দেওয়ার মানে হল লেখেগুলো বামে চেপে থাকবে আর width:650px এর মানে হল প্যারাগ্রাফ টির প্রস্থ 650 পিক্সেল হবে এবং background-color:#004F00 দেওয়ার কারনে পুরা প্যারাগ্রাফ টির background-color পরিবর্তন হয়ে গেছে । আশা করি বুঝতে পেরেছেন । ধন্যবাদ । আমরা এখন পরের ধাপে চলে যাই ।
CSS দিয়ে ছবি পরিবর্তনঃ নিচের উদাহরন টি লক্ষ করুন ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
img{
margin-left:20px;
margin-top:20px;
}
</style>
</head>
<body>
<img src=”screenshot.png” />
</body>
</html>
এখানে আমরা <body> ট্যাগ এর ভিতরে একটি ইমেজ এর কোড ব্যবহার করেছি । আর টার জন্য সিএসএস লিখেছি উপরে । এখানে margin-left:20px; এবং
margin-top:20px; ব্যবহার করেছি যার মানে হল এই ছবিটি ব্রাউজার এর বাম পাস থেকে ২০ পিক্সেল ডানে সরে যাবে এবং উপর থেকে নিচে ২০ পিক্সেল সরে যাবে । এবার দেখুন ছবিটির বর্ডার দিলে কেমন লাগে । নিচের কোড টি যোগ করুন সিএসএস এর মধ্যে ।
border:5px solid red;
এখন রান করলে আপনি দেখতে পাবেন এর লাল রং এর একটি border তৈরি হয়েছে ।
CSS Float-
সিএসএস এর এই কোড দারা সাধারণত কোন অবজেক্ট বামে নাকি ডানে চেপে থাকবে টা বুঝায় । যেমন float right; হলে এটি ডানে আর float Left হলে এটি বামে চেপে থাকবে । বিস্তারিত আমরা যখন কোন প্রোজেক্ট করব তখন দেখব ।
display: এটি দারা কোন অবজেক্ট কিভাবে ওয়েব পেজ এর মধ্যে দেখাবে ট বুঝায় । যেমন display:none হলে এটি আর দেখাবেই না । অনেক সময় লিস্ট আইটেম গুলো একই লাইনে দেখাতে হয় সেজন্য display:inline; দিতে হয় । যেমন
এই কোড টি আপনার নতুন ফাইল এ পেস্ট করুন-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
ul li{
display:inline;}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Service</li>
<li>Contact</li>
</ul>
</body>
</html>
এটি রান করলে এরকম দেখাবে ।
Home Service Contact
কিন্তু যদি display:inline; না দিতাম তাহলে এরকম দেখাত ।
visibility-কোন অবজেক্ট কিভাবে দেখাবে তাই বুঝায় । এটি কিছুটা visibility:hidden; ?এর মতই পার্থক্য হচ্ছে display:none; দিলে সেই অবজেক্ট টি একাবারেই ওয়েবপেজ এ থাকবেনা কিন্তু visibility:hidden; দিলে সেটি ওয়েবপেজ এ দেখাবে না কিন্তু থাকবে অর্থাৎ লুকিয়ে জায়গা দখল করে থাকবে ।
ওয়েব পেজ center করাঃ
আমরা যখন professionally ওয়েব ডিজাইন করব তখন আমাদের কে অবশ্যই খেয়াল রাখতে হবে যে ওয়েবপেজ টি যেন সকল ব্রাউজার এই center এ থাকে । center করার জন্য নিচের ছোট্ট সিএসএস কোড টি ব্যবহার করুন ।
body{margin:0 auto;} এটি সব ওয়েবসাইট এ ব্যবহার করবেন । ভুলে গেলে আপনি শেষ । আশা করি আমার লেকচার সহজেই বুঝতে পারেছেন । ধন্যবাদ ।
আমরা এতক্ষন সিখসিলাম এইচটিএমএল । এইচটিএমএল দিয়ে একটা ওয়েব পেজ এর সব ডিজাইন করা যায় না সেই জন্য দরকার সিএসএস । সিএসএস নতুন কোন কিছু না এটি ব্যবহার করা হয় এইচটিএমএল কে ডিজাইন করার জন্য । এক কথায় এইচটিএমএল কে সাজান গোছানোই হল সিএসএস এর কাজ।
CSS এর পুরা নাম cascading style sheet.. নাম দেখাই বুঝা যাচ্ছে এটি স্টাইল করার জন্যই ব্যবহার করা হয় ।
এবার তাহলে আসুন সিএসএস শুরু করা যাক। ধরুন আপনি কোন ১ টি প্যারাগ্রাফ লিখলেন এইচটিএমএল ট্যাগ দিয়ে এবার আপনি চান যে এটার রং লাল বা সবুজ হোক তাহলে কিন্তু আপনি এইচটিএমএল দিয়ে এটির রং আপনি লাল করতে পারবেন না এজন্যই দরকার সিএসএস যা দিয়ে আপনি অনায়াসে প্যারাগ্রাফ এর রং পরিবরতন করতে পারবেন। আসুন নিচের উদাহরন দিয়েই শুরু করি ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
p{
color:red;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<p>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</p>
</body>
</html>
আপনি dreamweaver সফটওয়্যার টি ওপেন করে এই কোড টি পেস্ট করুন । এখানে বডি ট্যাগ এর ভিতরে একটি প্যারাগ্রাফ লেখা হয়েছে । এবং উপরে তিতেল এর নিচে এর স্টাইল দেওয়ার জন্য কিছু সিএসএস প্রপার্টি লেখা হয়েছে । CSS কোড টি নিচে দেয়া হল ।
<style type=”text/css”>
p{
color:red;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-style:italic;
font-weight:bold;
}
</style>
এবার আপনি CSS কোড টি delete করে রান করে দেখুন যে ব্রাউজার এ সাধারন একটি প্যারাগ্রাফ দেখাচ্ছে । এবার CSS কোড টি লিখে রান করুন । এখন নিশ্চয় দেখতে পাচ্ছেন যে প্যারাগ্রাফ টির স্টাইল পরিবর্তন হয়েছে ।
এবার আসুন কোড গুলো আলোচনা করি ।
color:red==color লাল করা
font-family:Arial, Helvetica, sans-serif==এই ফন্ট এ লেখাটি হবে
font-size:16px== ফন্ট এর সাইজ কত বড় হবে
font-style:italic==ফন্ট বাঁকা হবে কিনা
font-weight:bold==ফন্ট বোল্ড হবে কিনা
এবার নিচের কোড টি সিএসএস এর ভিতরে পেস্ট করে দিন । রান করুন দেখুন কি হয় ।
text-align:left;
width:650px;
background-color:#004F00;
নিশ্চয় দেখতে পাচ্ছেন যে প্যারাগ্রাফ টির প্রস্থ এবং background-color পরিবর্তন হয়ে গেছে ।
এখানে text-align:left দেওয়ার মানে হল লেখেগুলো বামে চেপে থাকবে আর width:650px এর মানে হল প্যারাগ্রাফ টির প্রস্থ 650 পিক্সেল হবে এবং background-color:#004F00 দেওয়ার কারনে পুরা প্যারাগ্রাফ টির background-color পরিবর্তন হয়ে গেছে । আশা করি বুঝতে পেরেছেন । ধন্যবাদ । আমরা এখন পরের ধাপে চলে যাই ।
CSS দিয়ে ছবি পরিবর্তনঃ নিচের উদাহরন টি লক্ষ করুন ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
img{
margin-left:20px;
margin-top:20px;
}
</style>
</head>
<body>
<img src=”screenshot.png” />
</body>
</html>
এখানে আমরা <body> ট্যাগ এর ভিতরে একটি ইমেজ এর কোড ব্যবহার করেছি । আর টার জন্য সিএসএস লিখেছি উপরে । এখানে margin-left:20px; এবং
margin-top:20px; ব্যবহার করেছি যার মানে হল এই ছবিটি ব্রাউজার এর বাম পাস থেকে ২০ পিক্সেল ডানে সরে যাবে এবং উপর থেকে নিচে ২০ পিক্সেল সরে যাবে । এবার দেখুন ছবিটির বর্ডার দিলে কেমন লাগে । নিচের কোড টি যোগ করুন সিএসএস এর মধ্যে ।
border:5px solid red;
এখন রান করলে আপনি দেখতে পাবেন এর লাল রং এর একটি border তৈরি হয়েছে ।
CSS Float-
সিএসএস এর এই কোড দারা সাধারণত কোন অবজেক্ট বামে নাকি ডানে চেপে থাকবে টা বুঝায় । যেমন float right; হলে এটি ডানে আর float Left হলে এটি বামে চেপে থাকবে । বিস্তারিত আমরা যখন কোন প্রোজেক্ট করব তখন দেখব ।
display: এটি দারা কোন অবজেক্ট কিভাবে ওয়েব পেজ এর মধ্যে দেখাবে ট বুঝায় । যেমন display:none হলে এটি আর দেখাবেই না । অনেক সময় লিস্ট আইটেম গুলো একই লাইনে দেখাতে হয় সেজন্য display:inline; দিতে হয় । যেমন
এই কোড টি আপনার নতুন ফাইল এ পেস্ট করুন-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
ul li{
display:inline;}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Service</li>
<li>Contact</li>
</ul>
</body>
</html>
এটি রান করলে এরকম দেখাবে ।
Home Service Contact
কিন্তু যদি display:inline; না দিতাম তাহলে এরকম দেখাত ।
- Home
- Service
- Contact
visibility-কোন অবজেক্ট কিভাবে দেখাবে তাই বুঝায় । এটি কিছুটা visibility:hidden; ?এর মতই পার্থক্য হচ্ছে display:none; দিলে সেই অবজেক্ট টি একাবারেই ওয়েবপেজ এ থাকবেনা কিন্তু visibility:hidden; দিলে সেটি ওয়েবপেজ এ দেখাবে না কিন্তু থাকবে অর্থাৎ লুকিয়ে জায়গা দখল করে থাকবে ।
ওয়েব পেজ center করাঃ
আমরা যখন professionally ওয়েব ডিজাইন করব তখন আমাদের কে অবশ্যই খেয়াল রাখতে হবে যে ওয়েবপেজ টি যেন সকল ব্রাউজার এই center এ থাকে । center করার জন্য নিচের ছোট্ট সিএসএস কোড টি ব্যবহার করুন ।
body{margin:0 auto;} এটি সব ওয়েবসাইট এ ব্যবহার করবেন । ভুলে গেলে আপনি শেষ । আশা করি আমার লেকচার সহজেই বুঝতে পারেছেন । ধন্যবাদ ।
I am impressed to Visit your post Thats nice entry.I want to follow your blog post continue. You can see also this post.
ReplyDelete