সিএসএস (CSS) ক্লাশ - ৩
সিএসএস এর তৃতীয় ক্লাশে সবাইকে স্বাগতম। আজকে আমরা শিখব External CSS সম্বন্ধে। এক্সটারনাল সিএসএস এ CSS এবং HTML দুটি ভিন্ন ফাইল, ভিন্ন ফরম্যাটে সেভ করা হয়ে থাকে। সেক্ষেত্রে CSS ফাইলটি .css Extension দিয়ে সেভ করতে হবে। আর HTML ফাইলটিতে <style> ট্যাগ ব্যবহার না করে <head>…</head> এর মধ্যে <link> ট্যাগ দিয়ে css ফাইলটি যুক্ত করতে হবে। তাহলে আমরা বলতে পারি যে External CSS হল এমন CSS কোডিং যার Code গুলো .css Extension দিয়ে সেভ করা আলাদা ফাইল যা HTML এর <head>…</head> এর মধ্যে <link> ট্যাগ দিয়ে যুক্ত করা।
আমরা External CSS ব্যবহার করার মাধ্যমে CSS ফাইলটিকে আলাদা রাখতে পারব যাতে প্রয়োজনে আমরা পরে সেটাকে Edit করতে পারি বা আমাদের ইচ্ছে মত ভিন্ন ভিন্ন HTML পেজে ব্যবহার করতে পারি। এবার আমরা দেখব কিভাবে External CSS ফাইল তৈরি করতে হয়।
শুরুতে আমরা একটা .css Extension দিয়ে একটা সিএসএস ফাইল বানাব।
body{background-color:grey;}
h1{color:sienna;text-align:center;}
h2{color:yellow;text-align:rignt;}
p{color:white;margin-left:25px;}
সাধারণভাবে আমরা নোটপ্যাড খুলে উপরের কোড গুলো টাইপ করব এবং stylesheet.css নামে সেভ করব। তারপর নতুন এইচটিএমএল ফাইল তৈরী করে সিএসএস ফাইলটির সাথে লিংক করবো।
কোডিং বিশ্লেষণঃ উপরে আমরা body ট্যাগ দ্বারা HTML ফাইল এর পেজের বডির কালার আর h1, h2, p ট্যাগ দ্বারা যথাক্রমে হেডিং১, হেডিং ২ এবং প্যারাগ্রাফ ট্যাগ নির্দেশ করা হয়েছে।
এখন আমরা HTML ফাইল বানাব।
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<h1> This is Heading One </h1>
<h2> This is Heading Two </h2>
<p> I am lerning CSS markup language for web design.
Its my third class about CSS. Today we learn about External CSS.
An external style sheet is ideal when the style is applied to many
pages. With an external style sheet, you can change the look of
an entire Web site by changing one file. Each page must link to the
style sheet using the <link> tag. The <link> tag goes inside the
head section: Its an important part of CSS.</br>
An external style sheet can be written in any text editor.
The file should not contain any html tags. Your style sheet
should be saved with a .css extension. An example of a style
sheet file is shown below:</p>
</body>
</html>
আমরা এখানে <link rel="stylesheet" type="text/css" href=" stylesheet.css " />
কোডের মাধ্যমে CSS ফাইলটিকে লিঙ্ক করে দিয়েছি। আমরা যদি ইচ্ছে মত নামে CSS ফাইলটি সেভ করতে চাই তাইলে stylesheet.css বদলে সেই নামটি দিতে হবে।
****আর মনে রাখতে হবে যে CSS ও HTML ফাইল দুটি যেন একই ফোল্ডারে থাকে।
এভাবে আমরা External CSS কোডিং করতে পারব।
No comments:
Post a Comment
Thanks for ur comments