HTML এর ভিতরে CSS ব্যাবহার করা যায়। CSS ব্যাবহার করে ওয়েব পেজকে
আকর্ষণীয় ডিজাইন করা হয়ে থাকে। HTML এর সাথে ৩ ভাবে CSS যোগ করা যায়।
Inline - using a
style attribute in HTML elements
|
এটা HTML এর
element এর সাথে style attribute ব্যাবহার করে আলাদা আলাদা ভাবে CSS ব্যাবহার করা হয়।
|
Internal - using
a <style> element in the HTML <head> section
|
<style> element টা <head> সেকশন এর ভিতরে CSS লেখা হয়।
|
External - using
one or more external CSS files
|
এটা আলাদা ফাইলে লেখা
হয়।যখন একই style অনেক
এইচটিএমএল ফাইল এর সাথে যোগ করার প্রয়োজন পরে তখন এভাবে লখতে হয়।
|
স্টাইলিং যোগ
করার সবচেয়ে সহজ পথ আলাদা CSS ফাইল।
CSS এর সিনট্যাক্স :
element { property:value;
property:value }
এখানে element এর জায়গাতে এইচটিএমএল এর এলিমেন্ট লিখতে হবে।এর পরে property হলো সিএসএস property, value সিএসএস value দিতে হবে।
ইনলাইন স্টাইল (ইনলাইন সিএসএস) :
inline style ব্যাবহার করে এইচটিএমএল এর single element এ স্টাইলিং যোগ যোগ করা হয়।
<h1
style="color:green">Bangladesh is an
independent country </h1>
উপরের কোডটা দেখুন এখানে একটা এইচটিএমএল শিরোনামের কালার Inline style ব্যাবহার করে green করা হয়েছে।
অভ্যন্তরীণ স্টাইল (ইন্টারনাল সিএসএস) :
Internal সিএসএস ব্যাবহার করে একটা এইচটিএমএল সম্পূর্ণ ডকুমেন্ট এর উপাদান স্টাইলিং করা যায়। Internal সিএসএস এইচটিএমএল এর <head> section এর ভিতরে <style> element ব্যাবহার করে লেখা হয়।
<!DOCTYPE
html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
উপরের কোড লক্ষ করুন <head> section এর ভিতরে <style> ট্যাগ নেয়া হয়েছে। এর পরে লেখা হয়েছে
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
এখানে body {background-color:lightgrey} কোড দিয়ে সম্পূর্ণ এইচটিএমএল ডকুমেন্ট এর ব্যাকগ্রাউন্ড কালার lightgrey নির্ধারণ করে দেয়া হয়েছে।
এর পরে h1 {color:blue} কোড দিয়ে h1 হেডিং এর কালার blue করে দেয়া হয়েছে।আর
p {color:green} এর মাধ্যমে paragraph এর কালার green করে দেয়া হয়েছে।
বাহ্যিক স্টাইল ( এক্সটারনাল সিএসএস) :
যখন একই স্টাইল অনেক পেজ এ ব্যাবহার করতে হলে এক্সটারনাল সিএসএস লেখাই ভাল। এটা
একবার লিখে রেখে একই স্টাইল বার বার অনেক পেজ এ ব্যাবহার করা যায়।এক্সটারনাল
স্টাইল সিট যেহেতু আলাদা করে লেখা হয়।তাই এটাকে এইচটিএমএল এর <head> section এর ভিতরে যুক্ত করে দেয়া হয়।
<!DOCTYPE
html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
দেখুন উপরে<head> section এর ভিতরে <link rel="stylesheet"
href="styles.css"> এই লেখাটা দিয়ে এক্সটারনাল সিএসএস যোগ করা হয়েছে। href="styles.css লেখাটা দিয়ে সিএসএস ফাইলটাকে চিনিয়ে দেয়া হয়েছে।মনে রাখবেন
যে ফোল্ডার এ এইচটিএমএল ফাইলটা থাকবে সেখানেই সিএসএস ফাইলটা রাখবেন।
সিএসএস ফন্ট :
CSS color : এইচটিএমএল এলিমেন্ট এর কালার পরিবর্তন করতে ব্যাবহার করা হয়।
CSS font-family : font element এর ধরন পরিবর্তন করতে লাগে।
font-size : font এর সাইজ নির্ধারণ করে দেয়া যায়।
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>This
is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
দেখুন উপরে স্টাইল ট্যাগ এর
মধ্যে কিছু সিএসএস কোড লেখা আছে এখানে
h1 {
color:blue;
font-family:verdana;
font-size:300%;
এটা দিয়ে বোঝানো হয়েছে h1
এর কালার হবে blue।আর
font টি দেখতে verdana।
font সাইজ 300%।
এখানে
h1
এর যে স্বাভাবিক সাইজ তার চেয়ে লেখাটা একটু বড় দেখাবে ।কারন এখানে সিএসএস দিয়ে font-size পরিবর্তন করে দেয়া হয়েছে।একই ভাবে p মানে paragraph customize
করা
হয়েছে।
সিএসএস বক্স মডেল :
সিএসএস দিয়ে লেখাটাকে একটা
বক্স এর মধ্যে রাখতে পারবেন।
p {
border:1px solid black;
}
উপরের কোড সিএসএস
স্টাইলে লিখলে paragraph টা একটা বক্স এর মধ্যে দেখাবে।
এখন যদি এই বক্স এর ভিতরের দিকে space
দেবার
দরকার হয় তাহলে সিএসএস কোড লিখুন
p
{
border:1px
solid black;
padding:10px;
}
এভাবে।
উপরের padding:10px; লেখার কারনে বক্স এর মধ্যেকার ফাকা জায়গা 10px হয়েছে।
আবার যদি বক্স এর বাইরে space দেবার দরকার হলে margin ব্যাবহার করতে হয়।
p
{
border:1px
solid grey;
padding:10px;
margin:30px;
}
উপরের margin:30px; দেবার কারনে paragraph বক্স এর বাইরে থেকে ফাকা জায়গা বাড়বে।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন