css_part3
External Style Sheet
অনেকগুলি পেজে Style ব্যবহারের জন্য
সবচেয়ে আর্দশ উপায় হচ্ছে একটি External CSS ফাইল তৈরী করা। এখানে মোট ২টি ফাইল নিয়ে কাজ করতে হবে। External CSS
ফাইলটি তৈরী করে একই ড্রাইভে একটি নাম দিয়ে রাখতে
হবে । উল্লেখ্য কোডিং লিখে .CSS নামের Extension দিলেই আলাদা CSS
ফাইল তৈরী হবে। একই উপায়ে এডিটরে কোডিং লিখতে
হবে। ফাইলের নাম যেমন মনে করি mystyle.css দিতে হবে। কাজেই প্রথমে একটি CSS ফাইল তৈরী করতে হবে । পরে আরেকটি HTML ফাইল তৈরী করে তার মধ্যে <head> সেকশনে External CSS ফাইলটি
Link এর মাধ্যমে Call করতে হবে এবং বাকী HTML কোড শেষ করতে
হবে। ফাইলটি .html হিসাবে সেভ করে
ব্রাউজারে দেখতে হবে, ব্যাস। CSS ফাইল Call করার জন্য <link>
ট্যাগ ব্যবহার করতে হবে <head> সেকশনে। কোডিং হবে নিম্নরুপ(HTML) ফাইলে -
<head> <link rel = “stylesheet” type =“text/css” href = ”cssfilename.css”>
</head>
যেমন CSS ফাইলটির নাম যদি হয়ে mystyle.css তবে কোডিং হবে
<head> <link rel = “stylesheet” type = “text/css”
href =“mystyle.css”>
</head>
আমাদের আগের ফাইলগুলি
এখন আমরা External CSS ফাইল দ্বারা
মডিফাই করবো।
Program_Style001
নিচের মত কোডিংসহ একটি ফাইল তৈরী করে style001.css নাম দিয়ে সেভ করুন।
body {background-color:PowderBlue;}
p {color:green;font-size:20px;}
h1 {color:red;text-align:center;}
h2 {color:blue;text-align:left;}>
Editor এ নিচের মত দেখাবেঃ
Program_CSS004
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="style001.css">
</head>
<body>
This is Normal body text.
<p> This is First para</p>
<h1>Word Processor</h1>
Microsoft Word is a word processing
program.It is use to Write application, News Letter, Writting Pad, etc.
<p> This is Second para</p>
<h1>Spread Sheet</h1>
Microsoft Excel is a Spread Sheet
program.Its devided by Row and Column. You can make chart using Excel.
<p> This is Third para</p>
<h1> Database</h1>
Microsoft Access is a Spread Database
Management program. It is use to create and analise table and database.
</body>
</html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
Multiple CSS ( Internal+External+Inline)
অনেক সময় একই সিলেক্টরের জন্য ভিন্ন ভিন্ন Style Sheet ব্যবহার করা হয়। মনে করুন কোন External Style
Sheet এ h1 এর জন্য বিভিন্ন ভ্যালু দেওয়া আছে। আবার h1 এর জন্য Internal ভাবে নতুন ভ্যালু
দেওয়া হলো - এক্ষেত্রে প্রথমে Internal CSS এর Value গ্রহন করে পরে
বাকী ভ্যালু External CSS থেকে গ্রহন করবে।
যদি Inline CSS দেওয়া থাকে তবে
সেটির সর্বোচ্চ প্রাধান্য দেওয়া হবে। এক্ষেত্রে কমন ভ্যালু বাদে বর্ধিত ভ্যালু
নেওয়া হবে External CSS থেকে। নিচের
উদাহরণে External Style sheet (Style 002.css) তে h1 ট্যাগে {color:red; text align:left:
font-size:16px font family:arial} নেওয়া হয়েছে। অপর
দিকে Internal Style sheet এ { text align: center: font
size:30px} নেওয়া হয়েছে।
সেজন্য H1 ট্যাগে প্রথমে Internal
Style sheet থেকে text align:
center: font size:30px এই ভ্যালু এবং External Style sheet sheet
থেকে color:red font family:arial বাস্তবয়িত হয়েছে। অপর দিকে Inline Style এ h1{ Style=”color:green} ব্যবহার করার কারণে। এখান থেকে color:green
ও Internal Style sheet (Style 002.css) থেকে {
text align: center: font size:30px} এবং শেষে External Style sheet থেকে চতুর্থ বাকী অংশ font family:arial বাস্তবয়িত হয়েছে ।
style002.css নাম দিয়ে সেভ করুন।
body {background-color:PowderBlue;}
p {color:green;font-size:20px;}
h1{color:red;text-align:left;font-size:16px;
font-family:arial;}
HTML code
<!DOCTYPE html>
<html>
<head>
<link href="style002.css" rel="stylesheet"
type="text/css">
<style type="text/css">
h1 { text-align:center; font-size:30px}
</style>
</head>
<body>
This is Normal body text.
<p> This is First para</p>
<h1>Word Processor</h1>
Microsoft Word is a word processing
program.
It is use to Write application, News
Letter,
Writting Pad, etc.
<p> This is Second para</p>
<h1 >Spread Sheet</h1>
Microsoft Excel is a Spread Sheet program.
Its devided by Row and Column. You can make
chart using Excel.
<p> This is Third para</p>
<h1 style="color:green;">
Database</h1>
Microsoft Access is a Spread Database
Managementprogram. It is use to create and
analise table and database.
</body>
</html>
ব্রাউজার দিয়ে
খুললে নিচের মত ফলাফল পাওয়া যাবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
Next_
