সিএসএস বলতে বুঝায় Cascading Style Sheets.
HTML কোড গুলো কিভাবে (ডিজাইনে) প্রকাশিত হবে তাই প্রকাশ করে
HTML এর সাথে CSS কোড যুক্ত হয়ে প্রকাশিত হয়।
CSS এর কোড গুলো আলাদাভাবে আলাদা ফাইলেও রাখা যায় যা HTML এ কল করে সংযুক্ত করা যায়।
CSS এর মাধ্যমে কোড লিখতে সবচেয়ে বড় যে সুবিধা পাওয়া যায় তা হলো বার বার একই কোড লিখতে হয় না।
ফটোশপে টেক্সটা স্টাইল তো অনেকে করেন। এইবার একটু শুধু সিএসএস কোড ব্যাবহার করে টেক্সটা স্টাইল করি কি বলেন। এই স্টাইল গুলো মূলত পোষ্ট এর টাইটেল, ওয়েব হেডার, বিভিন্ন প্রকারের লিংক এর ক্ষেত্রে ব্যাবহার করা হয়।
যাই হোক আমি এইখানে Dreamweaver ব্যাবহার করেছি। আপনি ইচ্ছা করলে Dreamweaver ব্যাবহার না করেও কাজটা কারতে পারেন।
১. প্রথম কাজ হল একটা ফোল্ডার তৈরি করুন এবং এখানে index.html এবং styles.css নামে দুইটা ফাইল তৈরি করুন।
২. এইবারের কাজ body ট্যাগ টেক্সটা যোগ করুন।
<h1> <a href=”#”>Designer Shibly[/url]</h1>
CSS কোডটার লাইভ লিংক পাবার জন্য head ট্যাগ এ নিচের কোড যুক্ত করুন।
<link href=”styles.css” rel=”stylesheet” type=”text/css”/>
তাহলে বর্তমানের index.html এর পুরো কোডটা দাড়ায়
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=”styles.css” rel=”stylesheet” type=”text/css”/>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Text Styles By Desinger sms</title>
</head>
<body>
<h1> <a href=”#”>Designer sms[/url]</h1>
</body>
</html>
৩. এইবার styles.css এর ফাইলটার দিকে নজর দিই।
/* CSS Text Style By Desinger sms */
body {
background:#292929;
padding: 10px;
}
h1 {
position:relative;
font-size: 135px;
}
h1 a {
text-decoration:none;
color:#666;
position:absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
h1:after {
content:”Designer Shibly”;
color:#d6d6d6;
text-shadow: 0 1px 0 white;
}
/* End the Stylses*/
ব্রাউজারে দেখুন নিচের মত অবস্থা হয়েছ।
৪. কিন্তু সাধারণ ফন্টে এটা মোটেই ভালো লাগছে না। তাই,
styles.css এর h1 ট্যাগের font-family তে Luckiest Guy ফন্ট ব্যবহার করি। কোডটা নিচের মত:
font-family: ‘Luckiest Guy’, arial, serif;
তাহলে styles.css এর ফাইনাল অবস্থা নিচের মত
/* CSS Text Style By Desinger Shibly */
body {
background:#292929;
padding: 10px;
}
h1 {
position:relative;
font-size: 135px;
font-family: ‘Luckiest Guy’, arial, serif;
}
h1 a {
text-decoration:none;
color:#666;
position:absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
h1:after {
content:”Designer Shibly”;
color:#d6d6d6;
text-shadow: 0 1px 0 white;
}
/* End the Stylses*/
এইবার index.html ফাইলে ফন্ট এর লিংক যুক্ত করি। {ফন্টটা গুগল ওয়েব ফন্ট থেকে নেয়া।}
তাহলে index.html ফাইনাল অবস্থা
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=’http://fonts.googleapis.com/css?family=Luckiest+Guy’ rel=’stylesheet’ type=’text/css’>
<link href=”styles.css” rel=”stylesheet” type=”text/css”/>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Text Styles By Desinger sms</title>
</head>
<body>
<h1> <a href=”#”>Designer sms[/url]</h1>
</body>
</html>
