HTML ডকুমেন্টে CSS ইনক্লুড করা

HTML ডকুমেন্টে CSS ইনক্লুড করার তিনটি উপায় রয়েছে: ইনলাইন, ইন্টারনাল, বা এক্সটার্নাল ফাইল লিংক করা।

সিনট্যাক্স

HTML-এ CSS ফাইল ইনক্লুড করার সিনট্যাক্স:

/*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel="stylesheet" href="#location"> </head>

উদাহরণ

নিচের উদাহরণগুলো HTML ডকুমেন্টে CSS ফাইল লিংক করার প্রক্রিয়া দেখায়:

ইনলাইন CSS

<!DOCTYPE html> <html> <head> </head> <body> <p style="font-family: Forte;">Demo text</p> <p style="background-color: lightblue;">This is Demo text</p> <img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;"> </body> </html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয়:

ইন্টারনাল লিংকিং

<!DOCTYPE html> <html> <head> <style> div {    margin: auto;    padding: 15px;    width: 33%;    border: 2px solid;    border-radius: 5%; } div > div {    border-color: transparent;    box-shadow: inset 0 0 6px red; } div > div > div {    border-color: red; } </style> </head> <body> <div> <div></div> <div> <div></div> </div> <div></div> </div> </body> </html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয়:

এক্সটার্নাল লিংকিং

CSS-এ আপনি একটি এক্সটার্নাল css ফাইল ইনক্লুড করতে পারেন এবং 거기에 CSS স্টাইলস রাখতে পারেন। সেটিকে HTML ফাইল থেকে নিচের উদাহরণের মত রেফার করা যায়:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Demo text</p> <p>Demo text again</p> </body> </html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয়:

নিচে style.css দেওয়া হলো:

p {    text-decoration: overline;    text-transform: capitalize; }