কম্পিউটার টিউটোরিয়াল

CSS-এ এম্বেডেড বা ইন্টারনাল স্টাইলশিট


CSS ফাইলগুলো ইন্টারনালি এম্বেড করা যায় <style> ট্যাগে ডিক্লেয়ার করে। এটি ওয়েবপেজের লোড টাইম কমায়। যদিও এম্বেডেড CSS ডাইনামিক স্টাইল অনুমতি দেয়, কিন্তু এটি প্রতি পেজ রিকোয়েস্টে ডাউনলোড করতে হয় কারণ ইন্টারনাল CSS ক্যাশে করা যায় না। ইন্টারনাল CSS <head> ট্যাগের ভিতরে <style> ট্যাগে ডিক্লেয়ার করা হয়।

সিনট্যাক্স

CSS ফাইল এম্বেড করার সিনট্যাক্স নিচের মতো:

<style>    /*declarations*/ </style>

উদাহরণ

নিচের উদাহরণগুলো দেখায় CSS ফাইল কীভাবে এম্বেড করা হয়:

<!DOCTYPE html> <html> <head> <style> article {    font-size: 1.3em;    font-family: cursive; } div {    float: left;    margin-left: 20px;    width: 30px;    height: 30px;    background-color: lightgreen;    box-shadow: 8px 5px 0 2px lightcoral; } </style> </head> <body> <article>Demo text</article> <div></div> <div></div> </body> </html>

আউটপুট

উপরোক্ত কোডের আউটপুট:

CSS-এ এম্বেডেড বা ইন্টারনাল স্টাইলশিট

উদাহরণ

<!DOCTYPE html> <html> <head> <style> div {    float: left;    margin-left: 20px;    width: 60px;    height: 30px;    border-top-right-radius: 50px;    border-bottom-right-radius: 50px;    background-color: lightgreen;    box-shadow: inset 5px 0 lightcoral; } div + div {    background-color: lightblue;    border-top-left-radius: 50px;    border-bottom-left-radius: 50px; } </style> </head> <body> <div></div> <div></div> </body> </html>

আউটপুট

উপরোক্ত কোডের আউটপুট:

CSS-এ এম্বেডেড বা ইন্টারনাল স্টাইলশিট


  1. CSS কমেন্টস

  2. CSS-এ এক্সটার্নাল স্টাইলশিট লিঙ্ক করা

  3. CSS-এ এম্বেডেড বা ইন্টারনাল স্টাইলশিট

  4. CSS-এ Background Attachment