Awesome! টিউনস
সকল Awesome! টিউনস

সিএসএস শিখুন ক্যারিয়ার গড়ুন [পর্ব-০৫] :: সিএসএস বক্স মডেল যেভাবে করবেন

2,987 দেখা 1 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 2

13 টিউনস 9 টিউমেন্টস 1 ফলোয়ার

সিএসএস শিখুন ক্যারিয়ার গড়ুন

হ্যালো বন্ধুরা আপনারা কেমন আছেন? আপনাদের জন্য এবারের পর্বে আমি নিয়ে আশাকরি আপনারা ভালো কিছু জানতে পারবেন আজকের এই পর্ব থেকে। তো চলুন শুরু করা যাক আমাদের আজকের আলোচনা।

আমরা প্রথমেই জেনে নিই সিএসএস বক্স মডেল আসলে কী তাহলে বুঝতে সুবিধা হবে। আসলে সিএসএস বক্স মডেল হলো আপনি যেকোনো কারণে আপনার কাজগুলো বক্সের মাধ্যমে রাখতে চান আবার তার বিভিন্ন ডিজাইন করেও রাখতে চান এরকম অনেক কারণেই এটি ব্যবহার করা হয়ে থাকে।

<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: lightgrey; width: 300px; border: 15px solid green; padding: 50px; margin: 20px;}
</style>
</head>
<body> 
<h2>The Box Model</h2>
<div> This is the box model try do it.
</div>
</body>
</html>

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

তো চলুন এবার আমরা জানব সিএসএস বক্স এর মধ্যে আপনারা কীভাবে ইমেজ ব্যবহার করতে পারেন।

<!DOCTYPE html>
<html>
<head>
<style>
div {width: 320px; padding: 10px; border: 5px solid gray; margin: 0;}
</style>
</head>
<body> 
<h2>Calculate the total width:</h2> 
<img src="url" width="350" height="263" alt="img name">
<div>The picture is so good.</div> 
</body>
</html>

তো আপনারা উপরে সিএসএস বক্স এ ইমেজ ব্যবহারের জন্য কোড দেখতে পাচ্ছেন। দেখুন কীভাবে করা হয়েছে।

আরো ভালো কিছু উদাহরণ দেখে নিন যাতে করে কাজ করতে সুবিধা হয়।

<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: lightblue; width: 200px; padding: 25px; border: 25px solid navy;}
</style>
</head>
<body> 
<div>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</div> 
</body>
</html>

আরো একটি উদাহরণ দেখে নিন।

<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: lightblue; width: 200px; padding: 25px;}
</style>
</head>
<body> 
<div>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</div> 
</body>
</html>

তো এটি হচ্ছে আরেকটি খুবই সিম্পল ডিজাইন।

<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: lightblue; width: 200px;}
</style>
</head>
<body> 
<div>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</div> 
</body>
</html>

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

Level 2

আমি মাহাদী হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 5 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 9 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।

নতুন কিছু শিখতে ভীষণ আগ্রহী

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 9

প্রিয় টিউনার,

আপনি ভুল ভাবে আপনার চেইন টিউনের শিরোনাম গুলো দিচ্ছেন। আপনি পর্ব হিসেবে টিউনের শিরোনাম গুলো –

চেইন টিউনের নাম [পর্ব-০১] :: চেইন টিউনের ভিতরের বিষয়বস্তু …

চেইন টিউনের নাম [পর্ব-০২] :: চেইন টিউনের ভিতরের বিষয়বস্তু ….

চেইন টিউনের নাম [পর্ব-০৩] :: চেইন টিউনের ভিতরের বিষয়বস্তু

এর অর্থ প্রথমে চেইন টিউনের নাম, এরপর (স্পেস দিয়ে) স্কয়ার ব্রাকেটের ( [ ] ) মধ্যে পর্ব হাইফেন (-) দিয়ে দুই সংখ্যায় পর্বের নম্বর। স্কয়ার ব্রাকেটের ( [ ] ) ভিতরে কোন স্পেস দিবেন না। এরপর (স্পেস দিয়ে) ডাবল কোলন (::) এর পরে (স্পেস দিয়ে) চেইন টিউনের ভিতরের বিষয়বস্তু॥ এই ফরমেটে চেইন টিউনের শিরোনাম গুলো লিখুন।

এই চেইনের পূর্বের পর্ব গুলোর শিরোনাম গুলোও যদি ‘টেকটিউনস চেইন টিউনের’ শিরোনাম মোতাবেক করা না থাকে তবে সব গুলো এখনই সংশোধন করুন ও পরবর্তী সকল চেইন টিউনে সঠিক ভাবে চেইন টিউনের শিরোনাম দিন।

টিউনের শিরোনাম গুলো ‘টেকটিউনস চেইন টিউনের’ শিরোনাম মোতাবেক সঠিক ভাবে সংশোধন করে আপডেট করে এই টিউমেন্টটির প্রতুত্তর (রিপ্লাই) দিন। টেকটিউনস থেকে আপনার টিউন গুলো চেইন করে দেওয়া হবে।

চেইন টিউন কীভাবে প্রক্রিয়া হয় তা জানতে ‘টেকটিউনস সজিপ্র’ http://www.techtunes.io/faq এর ‘চেইন টিউন’ অংশ দেখুন। ধন্যবাদ।