১০ দিনে শিখুন CSS – ৩য় দিন – পর্ব ০৩

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

1. CSS Links
2. CSS List
3. CSS Table
4. CSS Box Model
5. CSS Outline
6. CSS Display
   

   ---

এই বিষয়গুলো যে অনেক মজার হবে তা হয়তো দেখেই বুঝতে পারছেন।।

CSS Links

Link যেকোন CSS প্রোপার্টির মাধ্যমেই স্টাইল করা যায়। যেমনঃ- color, font-family, background

a {
    color: hotpink;
}

এখানে আমরা লিংক এর টেক্সট এর কালার দিয়েছি উজ্জল গোলাপি ( hotpink) ।

Link কে তার অবস্থান অনুসারে ৪ ভাবে স্টাইল করা যায়।

• a:link – সাধারন লিংক। মানে, ভিজিট করা হয় নি এরকম লিংক।
• a:visited – আপনি ভিজিট করেছেন এরকম লিংক।
• a:hover – আপনি লিংক এর উপর যখন মাউস রেখেছেন।
• a:active – যখন আপনি লিংক এ ঢুকেছেন।
  

  ---

এরকম আলাদা আলাদা অবস্থায় লিংক স্টাইল অ চেঞ্জ করা যায়, যেমনঃ-

/* 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;
}

এখানে প্রথমে বোঝানো হচ্ছে যে যখন লিংক সাধারন অবস্থায় থাকবে মানে ভিজিট না করা তখন এর কালার থাকবে লাল।

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

নিজেরাই কোড লিখে চেক করুন।

উপরের এই কোড লেখার সময় একটু ছোট্ট নিয়ম ফলো করতে হয়।

1. a:hover অবশ্যই a:link এবং a:visited এর পরে লিখতে হবে।
2. a:active অবশ্যই a:hover এর পরে লিখতে হবে।

উপরের নিয়ম দুইটা ফলো করে কোড লিখবেন!!

Text Decoration

এটা তো আমরা আগেই দেখেছি Text এর সময়। তবুও বলছি এটা যখন লিস্টে ব্যবহার করা হয় তখন সাধারণত নিচের আন্ডার লাইন মুছে ফেলতে ব্যবহৃত হয়।

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Background Color

আমরা চাইলে লিংক এর ব্যাকগ্রাউণ্ডে একটা কালার দিয়ে দিতে পারি।

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 

এখন চেক করে দেখুন একেক অবস্থানে একেক কালার দেখাবে!!

Advanced – Link Buttons

এটা খুব এডভান্সড টপিক। তবুও লিংক এর সাথে সম্পর্কিত বলে দেখিয়ে দিচ্ছি। ইনশাল্লাহ পরে এটা নিয়ে বিস্তারিত আলোচনা হবে!!

a:link, a:visited {
    background-color: pink;
    color: white;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

এখানে প্রথমে a:link, a:visited দিয়েছি মানে, এই দুই অবস্থানে থাকলে নিচের কাজগুলো হবে। কি কি হবে এবারে সেটা বলছি।

1. background-color: pink; — এটা দিয়ে লিংক এর পেছনের কালার অর্থাৎ ব্যাকগ্রাউন্ড কালার হবে গোলাপী।
2. color: white; — এটা দিয়ে লিংক এর টেক্সট এর কালার দিয়েছি সাদা।
3. padding: 15px; — এটা দিয়ে লিংক এর টেক্সট এর প্যাডিং দিয়েছি 15px.
4. text-align: center; — এটা দিয়ে লিংক এর টেক্সটকে একদম মাঝে রেখেছি।
5. text-decoration: none; — লিংক এর নিচের আন্ডার লাইন মুছে দিয়েছি।
6. display: inline-block; — এটা এখন থাক। আজকের পর্বেই শেষে যখন css display নিয়ে আলচনা হবে তখন ইনশাল্লাহ বুঝতে পারবেন!!

এ পর্যন্তই ছিল CSS Link. এখন দেখবো CSS List

CSS List

আমরা চাইলেই লিস্টকে অনেক সুন্দর স্টাইল দিতে পারি।

Different List Item Markers

আমাদের লিস্ট এর স্টাইল চেঞ্জ করতে গেলে প্রথমেই আসে যেটার কথা সেটা হল লিস্ট এর আইটেম এর বুলেট বা সার্কেল চেঞ্জ করা। মানে, লিস্ট যেটা দিয়ে বোঝা যায়। যেমন আনঅর্ডার লিস্টে আছে বুলেট, সার্কেল, স্কয়ার ইত্যাদি। আর অর্ডার লিস্টে আছে নাম্বার, রোমান সংখ্যা, অক্ষর ইত্যাদি।।

এখন দেখবো সেগুলোরই বিভিন্ন স্টাইল।

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;






}

ol.d {
    list-style-type: lower-alpha;
}

প্রথম দুইটা আনঅর্ডার স্টাইলের জন্য এবং শেষের দুইটা অর্ডার স্টাইলের জন্য।

এখানে যে যে বিষয়গুলো বলা আছে তা হল

1. list-style-type: circle; — এটা দিয়ে আনঅর্ডার লিস্টের স্টাইল সার্কেল দেয়া হয়েছে।
2. list-style-type: square; — এটা দিয়ে আনঅর্ডার লিস্টের স্টাইল স্কয়ার দেয়া হয়েছে। 
3. list-style-type: upper-roman; — এটা দিয়া অর্ডার লিস্টের স্টাইল upper-roman দিয়ে বোঝানো হয়েছে রোমান বড় হাতের অক্ষরে লিস্ট ডিফাইন হবে।
4. list-style-type: lower-alpha; — এটা দিয়া অর্ডার লিস্টের স্টাইল lower-alpha দিয়ে বোঝানো হয়েছে ইংরেজি ছোট হাতের অক্ষরে লিস্ট ডিফাইন হবে।

> upper-alpha — এটা দিয়ে বড় হাতের ইংরেজি বোঝায়।

> lower-roman — এটা দিয়ে ছোট হাতের রোমান অক্ষর বোঝানো হয়।

An Image as The List Item Marker

আমরা চাইলে উক্ত স্টাইল গুলো বাদেও নিজেদের মতো ইমেজ ব্যবহার করতে পারবো। তার জন্য list-style-image প্রোপার্টি ব্যবহার করতে হয়। এটা শুধু আনর্ডার লিস্টে কাজ করবে।

ul {
    list-style-image: url('sqpurple.gif');
}

Position The List Item Markers

আমরা আমাদের লিস্টকে ইনসাইড বা আউটসাইড এ রাখতে পারি list-style-position এর সাহায্যে। যদিও ডিফল্ট ভাবে থাকে আউটসাইডে তবে আমরা এটাকে ইনসাইডে রাখতে পারি এভাবে

ul {
    list-style-position: inside;
}

List – Shorthand property

আমরা চাইলে উপরের কাজগুলো সহজেই করতে পারি। নিচের মতো এক লাইনে করা যায়।

ul {
    list-style: square inside url("sqpurple.gif");
}

এখানে, প্রথমে স্টাইল দেয়া হয়েছে square এবং তারপর অবস্থান দেয়া হয়েছে inside এবং শেষে দেয়া হয়েছে ইমেজ url. যদি শেষের এই ইমেজ স্টাইল কোন কারনে কাজ না করে তাহলে ওই প্রথম square স্টাইল কাজ করবে।

Styling List With Colors

আমরা চাইলে লিস্টের ভেতর কালার ব্যবহার করতে পারি।

ol {
    background: #ff9999;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

এখানে, প্রথমে ol দিয়ে অর্ডার লিস্টের বডি এর ব্যাকগ্রাউন্ড এর কালার দিয়েছি হাল্কা লাল। এবং প্যাডিং দিয়েছি 20px । আর ওই অর্ডার লিস্টের লিস্ট আইটেম (li) গুলোর ব্যাকগ্রাউন্ড কালার দিয়েছি গোলাপি, এবং প্যাডিং দিয়েছি 5px আর একটা মার্জিন ও দিয়েছি 35px এর।

আউটপুট দেখুন খুব সুন্দর হয়েছে ।।

আচ্ছা, এবারে দেখবো CSS Tables….

CSS Tables

আমরা চাইলেই টেবিল এর খুব সুন্দর স্টাইল দিতে পারি CSS এর মাধ্যমে।

Table Borders

আমরা টেবিলের বর্ডার দিতে পারি CSS এর সাহায্যে।

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

এর মাধ্যমে table, th, td এর বর্ডার দিয়েছি 1px পুরু এবং কালো সাধারন লাইনের।

Collapse Table Borders

আগের উদাহরণে দেখেছি বর্ডারের পুরত্ত 1px হলেও দুইটা বর্ডার লাইন হয়েছে এখন সেটা কলাপ্স করে একটা করব তাহলে সুন্দর হবে দেখতে।

table {
    border-collapse: collapse;
}

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

এবারে দেখুন border-collapse ব্যবহারের কারণে খুব সুন্দর হয়ে একটা লাইন তৈরি হয়েছে।

Table Width and Height

আমরা টেবিলের সারি বা কলামের Width এবং height ঠিক করে দিতে পারি। নিচের মতো কোড লিখে সেটা সম্ভব…

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

th {
    height: 50px;
}

এখন দেখুন টেবিল হেডিং এর উচ্চতা বা height হবে 50px…

Horizontal Alignment

টেবিলের মধ্যে টেক্সট কিভাবে থাকবে সেটা ঠিক করার জন্য ব্যবহৃত হয় text-align প্রোপার্টি।

th {
    text-align: left;
}

আমরা লেখাগুলোকে উক্ত কোডের মাধ্যমে বামে এলাইন করে দিয়েছি। এটা Horizontal Alignment স্টাইলে হয়েছে মানে, আড়াআড়ি ভাবে এলাইন হয়েছে।

Vertical Alignment

এখন দেখবো লম্বালম্বি ভাবে এলাইন করা।

td {
    height: 50px;
    vertical-align: bottom;
}

এই vertical-align এর মাধ্যমে আমরা লম্বালম্বি ভাবে টেক্সট এলাইন দিয়েছি bottom মানে নিচে।

Horizontal Alignment এ আছে তিনটা ভ্যালু Left, Center, Right

Vertical Alignment এ আছে তিনটা ভ্যালু Top, Center, Bottom

Table Padding

আমরা যদি টেবিল কে সুন্দর করতে চাই তাহলে সবথেকে বেশি যেটা প্রয়োজন হবে সেটা হচ্ছে Table Padding…

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

এখানে, টেবিল হেডিং (th) এবং টেবিল ডাটা (td) এর প্যাডিং দেয়া হয়েছে 15px.. এবং টেক্সট এলাইন করেছি left এ।

Horizontal Dividers

আমরা চাইলে  শুধু নিচের বর্ডার দিতে পারি তাহলে খুব সুন্দর স্টাইল হয়।

th, td {
    border-bottom: 1px solid green;
}

এখন border-bottom প্রোপার্টির মাধ্যমে নিচের বর্ডারকে বোঝানো হয়েছে এবং তার পুরত্ত 1px এবং সেটা সলিড মানে শুধু একটা দাগ এবং কালার হবে সবুজ।

Hoverable Table

আগে দেখেছি লিংক এর উপর মাউস নিলে সেটার ব্যাকগ্রাউন্ড চেঞ্জ হয়েছে মানে hover হলে ব্যাকগ্রাউন্ড চেঞ্জ হয়েছে।

কিন্তু, এটা আমরা টেবিল এর উপরেও প্রয়োগ করতে পারি।

tr:hover {

    background-color:red;

}

এখন টেবিল এর উপরে মাউস নিয়ে দেখুন তাহলে ব্যাকগ্রাউণ্ড কালার লাল হয়ে যাবে।

Striped Tables

আমরা অনেক সময় দেখে থাকি টেবিল এর একটা রো বা সারি এক কালারের অন্যটা অন্য কালারের এরকম করাকে বলে Striped Table

tr:nth-child(even) {

    background-color: #yellow;

}

এখানে tr:nth-child(even) এটার মাধ্যমে বোঝানো হয়েছে টেবিল এর সারির even নাম্বার মানে জোড় সংখ্যা এর সারি গুলোর ব্যাকগ্রাউন্ড হবে হলুদ রঙ এর।

যদি, ওখানে শুধু even এর জায়গায় odd লিখি তাহলে বিজোড় সংখ্যা গুলো হবে।

Table Color

এখন আমরা টেবিলের ব্যাকগ্রাউন্ড কালার দেবো এবং টেক্সট কালার দেবো।

th {
    background-color: #4CAF50;
    color: white;
}

এখানে, বোঝানোর কিছুই নাই। বুঝতেই পারছেন……

Responsive Table

অনেক সময় আমরা সাইট মোবাইল দিয়ে দেখি, কম্পিউটার দিয়ে দেখি আবার ট্যাবলেট দিয়েও দেখি। একেক্টার স্ক্রিন সাইজ একেক রকম।

কিন্তু, টেবিল এতে সমস্যা করতে পারে। তাই, আমরা টেবিলকে রেস্পন্সিব করব যেন সব স্ক্রিনে ফিট হয়।

তাই জন্য, প্রথমে একটা HTML ব্লক

div {
    overflow-x: auto;
}

div {
    background-color: lightgrey;
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

p {
    border: 1px solid black;
    outline-color: red;
    outline-width: 6px;
}

p.dotted {

    outline-style: dotted;

}


p.dashed {

    outline-style: dashed;

}


p.solid {

    outline-style: solid;

}


p.double {

    outline-style: double;

}


p.groove {

    outline-style: groove;

}


p.ridge {

    outline-style: ridge;

}


p.inset {

    outline-style: inset;

}


p.outset {

    outline-style: outset;

}

li {
    display: inline;
}

li {
    display: block;
}

li {
    display: none;
}