সিএসএস আউটলাইন - CSS Outline

আউটলাইন হল একটি লাইন যা কোন এইচটিএমএল এলিমেনটের চারপাশে অর্থাৎ বর্ডারের শেষপ্রান্তে প্রদর্শিত হয়। সিএসএস এর outline প্রোপার্টি ব্যবহার করে কোন এলিমেন্ট আউটলাইনের style, color এবং width নির্ধারণ করা হয়।

এটি একটি 20px প্রস্থ সম্পন্ন আউটলাইন যার 5px এর বর্ডার রয়েছে।

সকল আউটলাইন প্রোপার্টি

যে সকল আউটলাইন প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট এর স্টাইল করা যায় সেগুলো হল - outline-width, outline-style এবং outline-color.

সকল আউটলাইন প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

div {
    outline-width:5px;
    outline-style:solid;
    outline-color: blue;
	}

কোড এডিটর

outline-width প্রোপার্টি

সিএসএস এর outline-width প্রোপার্টি ব্যবহার করে কোন এলিমেন্ট বর্ডার এর চারপাশে আউটলাইন এর প্রস্থ বা width নির্ধারণ করা হয়। এই প্রোপার্টির মান বা value নির্ধারণ করা যায় thin (সাধারণত 1px), medium (সাধারণত 3px), thick (সাধারণত 5px) অথবা নির্দিষ্ট আকার যেমন - px, em, cm, % ইত্যাদি একক বা unit ব্যবহার করে।

বিভিন্ন রকম মান ব্যবহার করে, border-width প্রোপার্টির একটি উদাহরন নিচে দেখুন।

div#thick {
    border: 2px solid green;
    outline-style: solid;
    outline-color: blue;
    outline-width: thick;
    }

div#thin {
    border: 2px solid blue;
    outline-style: solid;
    outline-color: green;
    outline-width: thin;
    }

কোড এডিটর

outline-style প্রোপার্টি

সিএসএস এর outline-style প্রোপার্টি ব্যবহার করে কোন এলিমেন্ট বর্ডার এর চারপাশে আউটলাইন এর প্রকার বা style নির্ধারণ করা হয়। এই প্রোপার্টির মান বা value ৯ প্রকার হতে পারে, যেমন - solid, dotted, double ইত্যাদি।

বিভিন্ন রকম মান ব্যবহার করে, outline-style প্রোপার্টির একটি উদাহরন নিচে দেখুন।

div#solid {
    border: 2px solid blue;
    outline-style: solid;
    outline-color: green;
    outline-width: thin;
	}
	
div#dotted {
    border: 2px solid blue;
    outline-style: dotted;
    outline-color: red;
    outline-width: thick;
	}			

কোড এডিটর

outline-style প্রোপার্টির মান

কোন প্রকার স্টাইলের আউটলাইন, বর্ডার এর সাথে প্রদর্শিত হবে তা নির্ধারণ করা হয় outline-style প্রপার্টির মাধ্যমে। outline-style প্রপার্টিতে যে সকল মান বা value ব্যবহার করা যায়, এগুলো হল - dotted, dashed, solid, double, groove, ridge, inset এবং outset.

নিচে outline-style প্রপার্টির এই মান গুলোর ব্যাবহারিক উদাহরণ দেখুন।

A solid outline

A dotted outline

A dashed outline

A double outline

A groove outline

A ridge outline

An inset outline

An outset outline

outline-color প্রোপার্টি

সিএসএস এর outline-color প্রোপার্টি ব্যবহার করে বর্ডার এর চারপাশের আউটলাইন এর রঙ নির্ধারণ করা হয়। সিএসএস সমর্থিত সকল পদ্ধতি ব্যবহার করে, outline-color প্রোপার্টির মান নির্ধারণ করা যায়।

বিভিন্ন রকম মান ব্যবহার করে, নিচে outline-color প্রোপার্টির একটি উদাহরন দেখুন।

div#name {
    outline-style: solid;
    outline-color: blue;
    }
div#hex {
    outline-style: dotted;
    outline-color: #0000ff;
    }

div#rgb {
    outline-style: dashed;
    outline-color: rgb(0, 0, 255);
    }

কোড এডিটর

সিএসএস সমর্থিত রঙ এর ব্যবহার পদ্ধতি গুলো সম্পর্কে জানতে আমাদের সিএসএস - রঙ টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

outline-offset প্রোপার্টি

সিএসএস এর outline-offset প্রোপার্টি ব্যবহার করে, আউটলাইন এবং এলিমেন্টের কিনারা অর্থাৎ বর্ডার এর মধ্যবর্তী স্থানে ফাঁকা স্থান বা space তৈরি করা হয়। এর মান বা value নির্ধারণ করা যায় px, em, cm ইত্যাদি একক ব্যবহার করে।

outline-offset প্রোপার্টি ব্যবহার করে, নিচে একটি উদাহরন দেখুন।

p {
  margin: 40px;
  border: 2px solid teal;
  outline: 10px solid red;
  outline-offset: 25px;
  }

কোড এডিটর

শর্টহ্যান্ড প্রোপার্টি - outline

কোন এলিমেন্ট বর্ডার এর আউটলাইন নির্ধারন করার জন্য outline-width, outline-style এবং outline-color প্রোপার্টি গুলোর শর্টহ্যান্ড হল outline প্রোপার্টি

নিচে outline প্রোপার্টির সিনট্যাক্স দেখুন।

silector {outline: width style color}

কোড এডিটর

এক্ষেত্রে প্রথম মানটি আউটলাইন এর প্রস্থ বা width, দ্বিতীয়টি প্রকার বা style এবং তৃতীয়টি আউটলাইন এর রঙ নির্ধারণ করে।

নিচে outline প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখুন

div {
    outline: 10px solid forestgreen;
}

কোড এডিটর

একই এলিমেন্টে ভিন্ন ভিন্ন আউটলাইন

শর্টহ্যান্ড প্রোপার্টিকে আরও সুক্ষ ভাবে ব্যবহার করার জন্য নিচের প্রোপার্টি গুলো ব্যবহার করা যায় - outline-left outline-right outline-top outline-bottom

নিচে একটি উদাহরন দেখুন, যেখানে একটি এলিমেন্ট বর্ডার এর চারপাশে ৪ প্রকার ভিন্ন আউটলাইন নির্ধারণ করা হয়েছে।

div {
    bordar: 3px solid black;
    outline-left: 5px soltd red;
    outline-right: 6px dotted blue;
    outline-top: 7px dashed green;
    outline-bottom: 8px groove yellow;
    }

কোড এডিটর

outline-style প্রোপার্টিকেও শর্টহ্যান্ড হিসেবে ব্যবহার করা যায়। নিচে একটি উদাহরন দেখুন, যেখানে একটি এলিমেন্ট বর্ডার এর চারপাশে ৪ প্রকার ভিন্ন আউটলাইন নির্ধারণ করা হয়েছে।

div {
    bordar: 3px solid black;
    outline-style: dotted dashed double solid;
    }

কোড এডিটর

সকল আউটলাইন প্রোপার্টি