আসসালামু আলাইকুম!! আমি শাহরিয়ার আহমেদ শোভন।। আজকের পর্ব হল CSS নিয়ে ২য় দিন। আজকে যা যা থাকবে।
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Height/Width
- CSS Text
- CSS Fonts
CSS Borders
আমরা তো বর্ডার চিনি সবাই।। আমাদের পেজের কোন একটা এলিমেন্ট এ চাইলেই বর্ডার দেয়া যায়। যেমনঃ- প্যারাগ্রাফ, ব্লক ইত্যাদি ইত্যাদি।
তার জন্য আমাদের নিচের মতো কোড লিখতে হবে।
p { border-style: solid; }
এখানে, p এলিমেন্ট এর বর্ডার স্টাইল হবে solid অর্থাৎ সাধারন দাগ। এরকম অনেক স্টাইল এর বর্ডার হয়। নিচে একটা লিস্ট দিয়ে দিলাম, এখানকার স্টাইল গুলো নাম শুধু ওই স্টাইল এ লিখে দিবেন!!
- dotted – ডট ডট দেয়া বর্ডার হয়।
- dashed – ড্যাশ ড্যাশ দেয়া বর্ডার হয়।
- solid – সাধারন দাগের বর্ডার হয়।
- double – দুইটা চিকন দাগের বর্ডার হয়।
- groove – একটা 3D বর্ডার হয়। তবে, এটা বর্ডার এর কালার এবং weight এর উপর নির্ভর করে।
- ridge – এটাতেও 3D বর্ডার হয়। তবে, এটা বর্ডার এর কালার এবং weight এর উপর নির্ভর করে।
- inset – এটাতেও 3D বর্ডার হয়। তবে, এটা বর্ডার এর কালার এবং weight এর উপর নির্ভর করে।
- outset – এটাতেও 3D বর্ডার হয়। তবে, এটা বর্ডার এর কালার এবং weight এর উপর নির্ভর করে।
- none – কোন বর্ডার ই হয় না।
- hidden – এটাতে বর্ডার হয় কিন্তু হিডেন থাকে।
- mix – এটাতে সবগুলো স্টাইলের একটা মিক্স স্টাইল হয়।
এটা গেলো বর্ডার স্টাইল। অযথা সবগুলোর উদাহরণ দেখিয়ে লাভ নাই। আপনি শুধু স্টাইল এর নাম গুলো border-style এ লিখে দিবেন। উপরের 3d স্টাইল গুলো আসলে বলে বোঝানো যাবে না। আপনি স্টাইল এর আউটপুট দেখে নিন।
Border Width
বর্ডার এর ঘনত্ব কেমন হবে বা এটার পুরত্ত কেমন হবে সেটা ঠিক করে দেই width. নিচের মতো border-width লিখে সেটার এমাউন্ট দিতে হয়।
p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: solid; border-width: 2px 10px 4px 20px; }
এখানে প্রথম প্যারগ্রাফ এ width দেয়া হয়েছে 5px এবং দ্বিতীয় প্যারাগ্রাফ এ দেয়া হয়েছে medium মানে অটোমেটিক একটা মিডিয়াম width হবে। এর একবার শেষে দেয়া হয়েছে 2px 10px 4px 20px । এটা দেখে হয়তো একটু কনফিউশন হচ্ছে। একটু ক্লিয়ার করি।
এখানে, প্রথম যে এমাউন্ট দেয়া হচ্ছে সেটা উপরের বর্ডার এর জন্য, দ্বিতীয় যেটা সেটা হচ্ছে ডান পাশের বর্ডারের জন্য, তৃতীয় যেটা সেটা হচ্ছে নিচের বর্ডারের জন্য, চতুর্থ যেটা সেটা হচ্ছে বাম পাশের বর্ডারের জন্য।। আবার এটাকে সহজ করেও লেখা যায়। নিচের মতো
p.three { bordr-style: solid border-top-width: 2px; border-right-width: 10px; border-bottom-width: 4px; border-left-width: 20px; }
> Top — উপরে
> right — ডানে
> bottom — নিচে
> left — বামে
এবার আর কিছু বুঝতে সমস্যা হচ্ছে?? হলে জানাতে পারেন কমেন্টে।
Border Color
বর্ডার তো শুধু কালো কালারের হচ্ছে কিন্তু আমরা এখন দেখবো কিভাবে বিভিন্ন স্টাইল দেয়া যায়।
নিচের মতো border-color লিখে কালার এর নাম দিলেই বা RGB ফরম্যাট এর কোড দিলেই কালার চেঞ্জ হয়ে যাবে।
p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: solid; border-color: red green blue yellow; }
এখানে, প্রথম এ কালার দিয়েছি লাল, তারপর সবুজ এবং শেষে অনেক গুলো কালার। আবার এটাকে আলাদা আলাদা লাইনেও দেয়া যাবে তাহলে সহজে হয়। নিচের মতো
p.three { bordr-style: dotted border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; }
শেষের টা মনে হয় আর ব্যাখ্যা দরকার নেই কারণ, আগেই মার্জিন এর width যেরকম দিয়েছি সেরকম এটার। এখানে, প্রথমে উপরের, তারপরে ডানের, তারপরে নিচের এবং শেষের কালার টা বাম পাশের।
Border – Individual Sides
এপর্যন্ত আমরা বর্ডারের একেক পাশে একেক কালার, width দিয়েছি। এবার একেক পাশে একেক স্টাইল এর বর্ডার দেবো।
নিচের মতো সহজ করে দিলেই হবে।
p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
এখানে একেক পাশের জন্য আলাদা আলাদা করে স্টাইল দিয়েছি এবং আলাদা আলাদা লাইনে। অবশ্য এটাকে এক লাইনেও দেয়া যাবে।
p { border-style: dotted solid dotted solid; }
আপনার যেরকম খুশি দিতে পারেন!! 🙂
Border – Shorthand Property
আমরা এখন দেখবো ওই বর্ডার width, স্টাইল, কালার এগুলা কিভাবে এক লাইনে দেয়া যায়।
এরকম কোড লিখলেই হবে। পরে ব্যাখ্যা করছি।
p { border: 5px solid red; }
এখানে, শুধু border দিয়েই প্রথমে দিতে হবে width তারপরে স্টাইল এবং শেষে কালার।
এভাবে দিলে অল্প কোড লিখলেই হবে। তবে মনে রাখবেন সিরিয়াল টা।
> প্রথমে width
> তারপরে Style
> শেষে Color
আচ্ছা, এখন তো মনে হয় বুঝেছে। আসলে, বর্ডার খুব সহজ এবং মজার জিনিস। এটার কাজগুলোও অনেক মজার তাই না??
CSS Margins
এখন আমরা দেখবো মার্জিন এর কাজ। এতক্ষণ দেখেছি বর্ডার এর কাজ।
মার্জিন আসলে আমাদের খাতায় টানা মার্জিনের মতোই। আমরা মার্জিন দ্বারা বোঝাবো যে পেজের একদম কিনারা থেকে কোন এলিমেন্ট কত দূরত্বে থাকবে!!
আমরা আগে নিচের কোড দেখে নেই।
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }
এখানে, প্যারাগ্রাফ এলিমেন্ট টা উপর থেকে 100px নিচে অবস্থান করবে, নিচ থেকে 100px উপরে অবস্থান করবে, ডান থেকে 150px বামে অবস্থান করবে এবং বাম থেকে 80px ডানে অবস্থান করবে!!
এটা অনেক মজার শুধু আমরা এরকম এমাউন্ট দিয়ে দিতেই পারবো না আরো % হিসেবে দিতে পারবেন auto করে দিতে পারবেন।
> lenght — এটা আমরা এমাউন্ট সেট করে দিই যেমন আগের কোডে দিলাম।
> auto — এটা দিলে ব্রাউজার অটোমেটিক হিসেব করে নিয়ে সেট করে দিবে। যেমন নিচের উদাহরণ দেখলে বুঝতে পারবো।
div {
width:300px;
margin: auto;
border: 1px solid red;
}
> % — এটা দিয়ে আমরা কত পারছেন্ট মার্জিন চাই সেটা উল্লেখ করে দিতে পারবো যেমনঃ-
p { margin-top: 40%; margin-bottom: 30%; margin-right: 60%; margin-left: 40%; }
নিশ্চয় বুঝতে পেরেছেন!!
Margin – Shorthand Property
আমরা এখন দেখবো ওই মার্জিন এর width, স্টাইল, কালার এগুলা কিভাবে এক লাইনে দেয়া যায়।
এরকম কোড লিখলেই হবে। পরে ব্যাখ্যা করছি।
p { margin: 100px 150px 100px 80px; }
এখানে, শুধু margin দিয়েই প্রথমে দিতে হবে top-width তারপরে right-width এবং এরপরে bottom-width এবং শেষে left-width দিলেই হবে!!
এভাবে দিলে অল্প কোড লিখলেই হবে। তবে মনে রাখবেন সিরিয়াল টা।
> প্রথমে top-width
> তারপরে right-width
> এরপরে bottom-width
> শেষে left-width
আচ্ছা, এখন তো মনে হয় বুঝেছে। আসলে, মার্জিন অনেক কাজের একটা জিনিস। যখন কোন একটা থিম বা সাইট তৈরি করব তখন বুঝতে পারবেন!!
CSS Padding
প্যাডিং হল কোন একটা ইলিমেন্ট এর বর্ডার এর থেকে মাঝের কন্টেন্ট এর মাঝের দূরত্ব। আমরা নিচের মতো কোড লিখে দেখতে পারি তাহলেই বুঝবো।
p.one {
border: 1px solid red;
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
এই কোড এর আউটপুট দেখলেই বিষয়টা ক্লিয়ার হবে।
Padding – Shorthand Property
আমরা উপরের কোড গুলো যদি একলাইনে লিখতে চাই তাহলে নিচের মতো কোড লিখলেই হবে!!
p.one {
border: 1px solid red;
background-color: yellow;
padding: 50px 30px 50px 80px;
}
এখানে, আমরা কোনটা কোন পাশের তা তো মনে হয় বুঝতেই পারছেন। এটা আগের মতোই,
> প্রথমে padding-top
> তারপরে padding-right
> এরপরে padding-bottom
> শেষে padding-left
CSS Height and Width Dimensions
আমরা কোন একটা এলিমেন্ট এর Height এবং Width খুব সহজেই ঠিক করে দিতে পারি। যেমনঃ-
div { width: 500px; height: 100px; border: 3px solid #73AD21; }
এখানে, div block এর width হবে 500px, height হবে 100px।
আবার আমরা চাইলে max-width ও ঠিক করে দিতে পারি। মানে, সর্বোচ্চ width এবং height ঠিক করে দিতে লিখতে হবে নিচের মতো।
div { max-width: 500px; max-height: 100px; border: 3px solid #73AD21; }
CSS Text
এখন আমরা টেক্সট এর বিভিন্ন স্টাইল দিতে CSS এর প্রয়োগ দেখব।
Text Color
টেক্সট এর কালার দিতে নিচের মতো লিখতে হয়।
body { color: blue; } h1 { color: green; }
ব্যাখ্যা করার কিছুই নাই।
Text Alignment
লেখা কোথায় থাকবে মানে, পেজের কোথায় থাকবে ডানে না বামে না মাঝে সেটা ঠিক করে দেই Alignment.
আমরা এখন দেখবো সেটা কিভাবে করতে হয়।
h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; }
খুব সহজ কাজ। শুধু text-align দিয়ে সেটার ভ্যালু দিয়ে দিলেই হবে!!
আবার আমরা যদি চাই, লাইনগুলো সব এক লেবেলে থাকবে। মানে জাস্টিফাই হিসেবে তাহলে ভ্যালু দিতে হবে justify. নিচের উদাহরণ দেখি।
div { text-align: justify; }
Text Decoration
কোন টেক্সট এর ডেকোরেশন কেমন হবে সেটা ঠিক করে দেয়ার জন্য ব্যবহৃত হয় Text Decoration. নিচের উদাহরণ গুলো দেখলেই বোঝা যাবে।
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }
এখানে, প্রথমে আমরা টেক্সট এর উপরে লাইন দিয়েছি। তারপরে, মাঝে দিয়েছি এবং শেষে নিচে দিয়েছি অর্থাৎ আন্ডার লাইন।
আর আমরা যদি চাই কোন কিছুই থাকবে না তাহলে দিতে হবে none.
আমরা সাধারণত দেখে থাকি কোন লিংক থাকলে সেটার নিচে আন্ডার লাইন হয়। কিন্তু আমরা চাইলে সেটাকে মুছে দিতে পারি। তার জন্য none decoration ব্যবহার করতে হবে। নিচের মতো
a { text-decoration: none;}
এরকম দিলে আর নিচে আন্ডার লাইন থাকবে না।
Text Transformation
কোন টেক্সট বড় হাতের হবে নাকি ছোট হাতের হবে সেটা আমরা ঠিক কিরে দিতে পারি Text Transformation এর মাধ্যমে!!
p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }
এখানে আমরা প্রথমে বড় হাতের অক্ষর করেছি বলে দিয়েছি uppercase তারপর ছোট হাতের জন্য দিয়েছি lowercase এবং শেষে দিয়েছি capitalize যার কারনে প্রত্যেক শব্দের প্রথম অক্ষর হয়েছে বড় হাতের।
Text Indentation
আপনার যদি আগে থেকে প্রোগ্রামিং জানা থাকে তাহলে নিশ্চয় ইন্ডেনশন এর উপরে ধারনা আছে। ইন্ডেনশন এখানে কোন লাইনের প্রথমে ফাকা জায়গা বা স্পেস দেয়া। আমরা নিচের মতো করে ইন্ডেনশন এবং তার ভ্যালু দিতে পারি।
p { text-indent: 50px; }
Letter Spacing
Letter Spacing ব্যবহৃত হয় কোন শব্দের মাঝের অক্ষর গুলোর ভেতরকার দূরত্ব ঠিক করে দেই। যেমনঃ-
h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px; }
এখানে প্রথমে letter space দেয়া হয়েছে 3px করে এবং পরে দেয়া হয়েছে -3px করে অর্থাৎ letter গুলো এবার নেগেটিভ ভাবে মানে উলটা স্পেস নিয়েছে। আউটপুট দেখলেই বুঝতে পারবেন।
Line Height
দুইটা লাইনের ভেতর ফাকা জায়গা কতটুকু থাকবে সেটা ঠিক করে দেয়া যায় Line Height এর মাধ্যমে।
p.small { line-height: 0.8; } p.big { line-height: 1.8; }
আউটপুটে দেখুন দুইটা লাইনের মাঝে স্পেস কেমন হয়েছে।
Text Direction
কোন লেখা বাম থেকে ডানে আমরা পড়ি। কিন্তু, সেটাকে আবার উলটা করেও লেখা যায়। মানে, ডান থেকে লেখা শুরু হবে।
div { direction: rtl; }
এখানে direction এর ভ্যালু rtl মানে হল right to left. অর্থাৎ ডান থেকে বামে।
Word Spacing
কোন বাক্যের শব্দ গুলোর মধ্যকার স্পেস কতটুকু থাকবে সেটা ঠিক করে দেয়া যায় Word Specing এর মাধ্যমে।
h1 { word-spacing: 10px; } h2 { word-spacing: -5px; }
খুব সহজ কাজ ব্যাখ্যার দরকার নেই। এবারে দেখবো
CSS Fonts
আমরা কোন টেক্সট এর ফন্ট ফ্যামিলি, সাইজ, স্টাইল সবকিছু css দিয়ে করা যায়।
Font Family
আমাদের টেক্সট কোন ফন্টের হবে সেটা ঠিক করে দেয়া যায় Font family এর মাধ্যমে।
আমাদের টেক্সট এর জন্য আমাদের ইচ্ছা মতো ফন্ট সিলেক্ট করতে পারি। যেমনঃ-
p { font-family: "Times New Roman", Times, serif; }
এখানে Times New Roman এর মাধ্যমে বোঝানো হয়েছে এই ফন্ট ফ্যামিলির টেক্সট স্টাইল হবে।
Font Style
আমাদের ফন্টের স্টাইল কেমন হবে সেটা দেয়ার জন্য Font Style ব্যবহৃত হয়।
p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; }
উপরের মতো তিন রকমের ফন্ট স্টাইল হয়। font-style লিখে শুধু স্টাইলের নাম দিলেই হবে।
Font Size
ফন্টের সাইজ আমরা নিজেদের ইচ্ছা মতো ঠিক করে দিতে পারি। সেটার জন্য তিনটা পদ্ধতি আছে।
- Pixel Method — পিক্সেল এককে সাইজ দেয়া।
- Em Method — Em এককে সাইজ দেয়া।
- Percent Method — পারছেন্ট এককে সাইজ দেয়া।
p { font-size: 100%; } p { font-size: 24px; } p { font-size: 1.875em; }
তিনটা মেথড ই দেখানো হল।
Font Weight
Text বোল্ড হবে নাকি নরমাল হবে এরকম কিছু বিষয় ঠিক করে দেয়ার জন্য ব্যবহৃত হয় Font Weight
p.normal { font-weight: normal; } p.thick { font-weight: bold; }
আজকের মতো এখানেই শেষ। আবার দেখা হবে ইনশাল্লাহ পরের পর্বে।
যেকোন ভুল হলে ক্ষমা করে দিবেন। ধন্যবাদ!!
আসসালামু আলাইকুম!! আমি শাহরিয়ার আহমেদ শোভন!!
আরো ভালো আর্টিকেল পেতে চলে যান এই লিংক এ www.thebanglatech.xyz
ধন্যবাদ ভাই!!