freelancerstutorial

This WordPress.com site is the cat’s pajamas

সহজে শিখুন সিএসএস

সিএসএস টিউটোরিয়াল | ভূমিকা

আপনারা নিজের web designing এর দক্ষতা উপরের ধাপে উন্নিত করতে চাইলে Cascading Style Sheets (CSS) এর কোন বিকল্প নেই। এখানে ধারাবাহিকভাবে সিএসএস টিউটোরিয়াল গুলো আলোচনা করা হবে। সিএসএস এর মাধ্যমে ওয়েব সাইটের শ্রী বৃদ্ধি করা যায়।

সিএসএস এর মাধ্যমে যেসব বিষয় করা যায় —

১ সিএসএস এর  মাধ্যমে এইচটিএমএল এ তৈরীকৃত পেজটি আরও দৃষ্টিনন্দন  করা যায়।

২ কিছু সিএসএস  কোড পরিবর্তন করে  সম্পুর্নভাবে সাইট এর  restyle করা যায়।

আপনার stylesheet (যেখানে আপনি কোডগুলো লিখবেন) টি সম্পুর্নভাবে  এইচটিএমএল documents হতে পৃথক হবে যখন আপনি  সিএসএস এবং এইচটিএমএল এ দক্ষতা অর্জন করতে পারবেন। আর একটি কথা না বললেই নয় সিএসএস শেখার আগে অবশ্যই এইচটিএমএল সম্বন্ধে ভাল জানতে হবে।এইচটিএমএল না জানলে আমাদের এইচটিএমএল টিউটোরিয়াল গুলি পড়ে আসুন।

**একটা এইচটিএমএল পেজে <head> ট্যাগের ভিতর <style> ট্যাগ দিয়ে সিএসএস কোড যোগ করে পেজ স্টাইলিং করা যায়।এটা হচ্ছে ইন্টারনাল সিএসএস  আর যদি সিএসএস কোড বেশি হয়ে যায় তখন সিএসএস কোড আলাদা ফাইলে লেখা হয় এবং <head> ট্যাগের ভিতর <link> ট্যাগ দিয়ে সিএসএস ফাইলটি ঢুকিয়ে দেয়া হয়।এই পদ্ধতি হচ্ছে এক্সটার্নাল সিএসএস।ওয়েবকোচবিডি সাইটের অধিকাংশ টিউটোরিয়ালের উদাহরনগুলিতে এক্সটার্নাল সিএসএস ব্যবহার করে দেখানো হয়েছে এবং এইচটিএমএল ফাইলগুলিতে এক্সটার্নাল সিএসএস ফাইলটি কিভাবে সংযোগ করতে হয় তা  বারবার দেখানো হয়নি।তাই প্রাকটিস করার সময় এইচটিএমএল ফাইলে এটা আপনাকে করে নিতে হবে।

সিএসএস সিলেক্টর টিউটোরিয়াল

সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়।বিভিন্ন ধরনের সিলেক্টর আছে,এসব দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত স্টাইলিং করা যায়।সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে হবে।সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমন:

এইচটিএমএল এলিমেন্ট

এট্রিবিউট

রুল সেট বা রুল ইত্যাদি..

css selector tutorial

01.h4
02.{
03.background-color:white;
04.font-size:12px;
05.}
06.p
07.{
08.color:red;
09.}

এখানে h4, p এসব হচ্ছে সিলেক্টর,h4 এর দ্বারা এইচটিএমএল পেজের <h4></h4> এর ভিতরে যা আছে তা সিলেক্ট করবে বা বলা যায় h4 এলিমেন্ট সিলেক্ট করবে।

h4 এর পর সেকেন্ড ব্রাকেট যেখান থেকে শুরু হয়েছে এবং p এর আগে যেখানে সেকেন্ড ব্রাকেট শেষ হয়েছে এইটুকু ডিক্লেয়ারেশন ব্লক।

সেকেন্ড ব্রাকেটের ভিতরে সবটুকু হচ্ছে ডিক্লেয়ারেশন।

background-color হচ্ছে প্রোপার্টি এবং white হচ্ছে এর ভ্যালু।

আর পুরোটা অর্থ্যাৎ h4 থেকে শুরু করে এর সেকেন্ড ব্রাকেট যেখানে শেষ হয়েছে এইটুকু রুল বা রুল সেট।

উপরের কোডে দুটি রুল আছে h4 এবং p

নিচে বিভিন্ন সিলেক্টর এর নাম এবং এরা কিভাবে কাজ করে তা দেয়া হল:

* (ইউনিভার্সাল সিলেক্টর)

ইউনিভার্সাল সিলেক্টর এইচটিএমএল পেজের প্রতিটি এলিমেন্ট কে সিলেক্ট করে।যেমন নিচের কোডটি সব এইচটিএমএল এলিমেন্ট এর রং লাল করে দেবে।

1.* {color:red;}

অনেকে padding, margin এখানে 0 করে দেন যেমন

1.*{
2.margin:0;
3.padding:0;
4.}

এই কাজটি করা অপ্রোয়জনীয়,এতে ব্রাউজারের উপর চাপ বেশি পরে তাই অনেকে এটা করতে নিষেধ করেন।

আইডি সিলেক্টর

ক্লাস সিলেক্টর

টাইপ সিলেক্টর

1.p{
2.background-color:orange;
3.}
4.a{
5.color:maroon;
6.}

p, a হচ্ছে এখানে টাইপ সিলেক্টর।p সিলেক্টর এইচটিএমএল পেজের সব <p> এলিমেন্ট কে সিলেক্ট করবে এবং এদের ব্যাকগ্রাউন্ড রং কমলা করে দেবে আর a সিলেক্টর এইচটিএমএল সব লিংক কে সিলেক্ট করে রং খয়েরি করে দেবে।

ডিসেনডেন্ট সিলেক্টর

1.li a {
2.text-decoration: none;
3.color:red;
4.}

এইচটিএমএল ফাইল

01.<div id="menu">
02.<ul>                                       
03.<li><a href="#" title="">সি এস এস</a></li>
04.<li><a href="#" title="">এইচটিএমএল</a>
05.<ul> 
06.<li> Child </li> 
07.</ul>
08.</li>
09.<li><a href="#" title="">জাভাস্ত্রিপ্ট</a></li>
10.<li><a href="#" title="">পি এইচ পি</a></li>
11.<li><a href="#" title="">মাই এস কিউ এল</a></li>
12.</ul>
13.</div>

ধরুন আপনি li এলিমেন্ট এর অধীনস্থ a এলিমেন্ট কে টার্গেট করতে চাচ্ছেন তখন সিএসএস রুল লিখতে হবে উপরের মত।এই কোডের প্রভাব আপনার এইচটিএমএল পেজের  শুধু li এর অধীনস্থ a তে গিয়ে পরবে।

সিডো ক্লাস (pseudo class)

1.a:link{color:blue;}
2.a:visited { color: blue; }
3.a:hover{color:red;}
4.a:active { color: red; }

:link, :visited, :hover, :active এসব হচ্ছে সিডো ক্লাস।ধরুন উপরের এইচটিএমএল ফাইলটির জন্য যদি এই রুলটি প্রয়োগ করেন তাহলে সব লিংক এবং ভিজিটেড লিংক এর রং হবে নীল।আর হোভার এবং সক্রিয় লিংক এর রং হবে লাল।সিএসএস কোডটি ইচ্ছে করলে এভাবে লিখতে পারতেন।

1.a:link, a:visited { color: blue; }
2.a:hover, a:active { color: red; }

এডজেইসেন্ট সিলেক্টর (Adjacent Selector)

1.h2+h3{
2.color:lime;
3.}

ধরুন আপনি <h3> এলিমেন্টকে টার্গেট করতে চাচ্ছেন,শুধুমাত্র ঐ <h3> কে যেটা <h2> এর ইমিডিয়েট পরে আছে।উপরের কোড দ্বারা আপনার এইচটিএমএল পেজের হেডিং ৩ এর রং lime হবে যদি সেটা হেডিং ২ এর পরে থাকে।

*<h2> এরপর যদি অন্য কোন এলিমেন্ট থাকে এবং এরপর <h3> থাকে তাহলে এই <h3> এর রং lime হবেনা কারন এটা <h2> এর ইমিডিয়েট পরে নেই।

*h2+h3 দেখে এটা মনে করা যাবেনা যে দুটোরই রং lime হবে,শুধু <h3> পরিবর্তন হবে।

direct children সিলেক্টর

1.div#menu> ul { border: 1px solid black; }

এই রুলটি যদি উপরের এইচটিএমএল পেজে প্রয়োগ করেন তাহলে  ul এলিমেন্ট এর উপর একটা বর্ডার হবে তবে Children লেখাটির উপর বর্ডার আসবেনা যদিও এটা আরেকটা ul এর মধ্যে আছে।কারন Children লেখাটি যে ul এর মধ্যে আছে সেটা menu আইডির direct children নয়।

এট্রিবিউট সিলেক্টর

1.img[src="/css selector.jpg"] {
2.border: 5px solid #000000;
3.}

আপনার এইচটিএমএল ফাইলে যদি নিচের মত লাইন থাকে তাহলে উপরের কোডটি দিয়ে <img> এলিমেন্টের এট্রিবিউট সিলেক্ট করে এর বর্ডার ৫ পিক্সেল এবং বর্ডার রং কালো করে দেবে।

1.<img src="/css selector.jpg" width="510" height="205">

গ্রুপিং সিলেক্টর

যদি একাধিক এলিমেন্টের একই স্টাইল করতে চান তখন গ্রুপিং সিলেক্টর ব্যবহার করবেন।ধরুন আপনি চাচ্ছেন আপনার পেজের সব হেডিং এবং লিংক এর রং একই হবে তখন নিচের মত করে লিখতে পারেন।

1.h1,h2,h3,h4,a{
2.color:red;
3.}

ধরুন আপনার পেজের একটা ডিভের (div)এর আইডি হচ্ছে menu (id=”menu”) আার এই ডিভের ভিতরে সব লিংক এবং হেডিং এর রং লাল করতে চাচ্ছেন তখন এভাবে

1.#menu a, #menu h1,#menu h2, #menu h3{
2.color:red;
3.}

*আপনি যদি #menu a,h1,h2… এভাবে লেখেন তাহলে ভুল হবে।

ইন্টারনাল সিএসএস টিউটোরিয়াল (Internal CSS)

Cascading Style Sheets লেখার তিনটি ধরন আছে যেমন – internal, external এবং inline। যখন আপনারা  ইন্টারনাল সিএসএস ব্যবহার করবেন তখন অবশ্যই একটা নতুন ট্যাগ যোগ করতে হবে যেটা হচ্ছে  <style> tag  এবং যা HTML  <head> ট্যাগ এর ভিতরে রাখতে হবে। নিচে উদাহরন দেয়া হলো।

01.<html>
02.<head>
03.<style>
04.</style>
05.</head>
06.<body>
07.<p>Your page's content!</p>
08.</body>
09.</html>

এমত অবস্থায় পেজে নতুন কিছু দেখাবে না। এই style ট্যাগ টি শুধু ব্রাউজার কে বলবে যে তারা এই পেজে নতুন কিছু CSS element যোগ করতে যাচ্ছে ।

ইন্টারনাল সিএসএস কোড তৈরী:

HTML code এর মত করে CSS code লেখা হয় না,  যার অর্থ এই দাড়ায় CSS যা  HTML  এর মত নয়।

নিচে উদাহরন দেয়া হলো।

01.<html>
02.<head>
03.<style>
04.p {color: white; }
05.body {background-color: black; }
06.</style>
07.</head>
08.<body>
09.<p>White text on a black background!</p>
10.</body>
11.</html>

প্রদর্শন:

(নোট প্যাডে দেখুন)

White text on a black background!

উপরের উদাহরনে আপনারা দেখেছেন CSS code এর মাধ্যমে <body> and <p> HTML tags এর এলিমেন্ট পরিবর্তিত হয়ে গেছে।

সাধারন সিএসএস ফরমেট

“HTML tag” { “CSS Property” : “Value” ; }

  • বিষয়টি পরিস্কার করতে  ধাপে ধাপে  দেখা যাক কিভাবে  সিএসএস কোড দিয়ে এইচটিএমএল এলিমেন্ট পরিবর্তিত হয়ে গেছে।

প্রথমে একটা এইচটিএমএল এলিমেন্ট  বাছাই করেছি যাকে নিয়ে আমরা কাজ করেছি  – p{ : ; }

তারপর CSS attribute color নির্বাচন করেছি  – p { color: ; }

পরে Value হিসাবে আমরা ফন্ট এর  color নির্বাচন করেছি  – p { color: white; }

এসব করার ফলে কি হয়েছে paragraph tag এর মধ্যে অবস্থিত সকল লেখা সাদা হয়ে গেছে ।

  • এখন আমরা আলোচনা করবো সিএসএস কোড  কিভাবে  <body> ট্যাগের  background কে পরিবর্তন করেছে।

প্রথমে একটা HTML Body element  বাছাই করেছি – body { : ; }

তারপর CSS attribute,  background-color নির্বাচন করেছি  – body { background-color: ; }

CSS attribute background-color এর রং নির্বাচন করেছি  – body { background-color: black; }

অনেক সময় দেখা যাবে যে সিএসএস  স্টাইল প্রয়োগ করার পরও তা প্রদর্শন করছে না তখন আমাদের যেসব বিষয় লক্ষ রাখতে তা হলো আমরা সিএসএস attribute এর পর কোলন এবং সিএসএস attribute এর ভেলুর পর সেমিকোলন ঠিক মত দিয়েছে কিনা { CSS attribute : value;}।

এক্সটার্নাল সিএসএস (External CSS)

সবচেয়ে ভাল হয় যদি আপনারা সিএসএস কে  এইচটিএমএল হতে পৃথক রাখেন।এক্সটার্নাল সিএসএস ফাইলটি শুধুমাত্র সিএসএস code ধারন করে এবং এই ফাইলটিকে “.css” ফাইল extension দিয়ে সেভ করা হয়।  সিএসএস ফাইল টিকে <style> ট্যাগ এর পরিবর্তে <link> ট্যাগ এর সাহায্যে লিংক করা হয় ।

ফাইলতৈরী:

প্রাথমিকভাবে আমরা  নোটপ্যাড দিয়ে নিচের সিএসএস কোড টি লিখবো।

1.body{ background-color: gray;}
2.p { color: blue; }
3.h3{ color: white; }

তারপর সিএসএস ফাইলটিকে  (.css) ফাইল extension দিয়ে সেভ করবো। ফাইলটির নাম হবে test.css ।  তবে test ছাড়াও আমরা অন্য নাম দিতে পারি তবে ফাইল extension(.css)  টি ঠিক রাখতে হবে ।

এরপর নতুন  এইচটিএমএল ফাইল তৈরী করে সিএসএস ফাইলটির সাথে লিংক করবো।

01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="/test.css" />
04.</head>
05.<body>
06.<h3> A White Header </h3>
07.<p> This paragraph has a blue font. 
08.The background color of this page is gray because
09.we changed it with CSS! </p>
10.</body>
11.</html>

3 নম্বর লাইনে test.css এর আগে যে / চিহ্নটা আছে তা ভুল,এটা বাদ দিয়ে লিখুন্

তারপর এইচটিএমএল ফাইল টিকে index.html হিসাবে একই  ফোল্ডারে  অর্থাৎ যেখানে  সিএসএস ফাইল আছে সেখানে সেভ করবো। এবার আপনার এইচটিএমএল ফাইল টিকে ব্রাউজারে এ খুলুন করুন এবং পরিবর্তন লক্ষ্য করুন।

প্রদর্শন:

(নোট প্যাডে দেখুন)

A White Header

This paragraph has a blue font. The background color of this page is gray because we changed it with সিএসএস!

কেন আমরা এক্সটার্নাল সিএসএস ব্যবহার করবো?

আপনার  ওয়েবসাইট ডিজাইন কে সংরক্ষন এবং content কে পৃথক রাখতে ব্যবহ্নত হয়।

আলাদা ফাইল হিসাবে রাখলে খুব সহজেই  সিএসএস কোড কে পুনরায় ব্যবহার করা যায়। বারবার একই সিএসএস কোড প্রত্যেক ওয়েব পেজ এ লেখার পরিবর্তে  শুধুমাত্র “link” ট্যাগ এর সাহায্যে একটা সিএসএস ফাইল কে প্রত্যেক ওয়েব পেজ এ যুক্ত করা যায়।

ইনলাইন সিএসএস টিউটোরিয়াল(Inline CSS)

ইনলাইন সিএসএস হচ্ছে সিএসএস style কে  এইচটিএমএল কোড এর ভিতরে ব্যবহার করার নিয়ম।

এক্সটার্নাল বা ইন্টারনাল সিএসএস হতে ইনলাইন সিএসএস এর প্রাধান্য বেশি। এর অর্থ হচ্ছে একসটার্নাল বা ইন্টারনাল সিএসএস দ্বারা স্টাইল নির্দেশিত থাকলেও আপনি স্টাইল  override করতে পারেন। যাহোক, ইনলাইন সিএসএস যা সিএসএস এর সঠিক উদ্দেশ্য হতে বিচ্যুতি ঘটায় তাই এটা আংশিকভাবে ব্যবহার করা উচিত।

সিএসএস Inline – HTML Attribute:

বিশ্বাস করেন বা না করেন প্রত্যেক এইচটিএমএল ট্যাগ এর মধ্যে সিএসএস কে তৈরী করা যায়। যদি আপনি সব এইচটিএমএল এলিমেন্ট এর স্টাইল করতে চান তাহলে style নামক  HTML attribute এর মধ্যে প্রত্যাশিত  সিএসএস property গুলো লিখুন।

1.<p style="background: blue; color: white;">A new background and
2.font color with inline CSS</p>

প্রদর্শন:

(নোট প্যাডে দেখুন)

A new background and font color with inline CSS

যে কোন HTML element সম্বলিত inline CSS সেটিং এর একটি  সাধারন ফরমেট দেয়া হলো:

Pseudo Code:

<html tag style=”css property1: value; css property2: value;”> </html tag>

প্রত্যেক সিএসএস statement অবশ্যই  semicolon “;” দ্বারা পৃথক থাকবে এবং  সিএসএস property ও তার value “:”colons  দ্বারা পৃথক থাকবে।

সিএসএস আইডি বনাম ক্লাস (CSS ID Vs Class)

এটা প্রায়ই সন্দেহের সৃষ্টি করে যে কখন আমরা সিএসএস ID ব্যবহার করব আর কখন আমরা সিএসএস Classes ব্যবহার করব।এই অধ্যায়ে এ বিষয়ে পরিস্কার আলোচনা করা হবে।

আইডি নির্বাচক (id  Selector)

একটা এইচটিএমএল এলিমেন্ট এর স্টাইল কেমন হবে এটা ঠিক করার জন্য সিএসএস আপনাকে নিজস্ব সিলেক্টর ব্যাবহারের সুবিধা দেয় এদেরকে বলে “id” এবং “selector”

ID সিলেক্টর একটা (অনন্য) এলিমেন্টের স্টাইল দিতে ব্যাবহৃত হয়। id হল এলিমেন্ট  এর unique identifier ।সিএসএস ID প্রায়ই  সিএসএস classes কাছাকাছি।কিন্তূ তারা এলিমেন্ট এর special case নির্দেশ করে ।

1.p#exampleID1 { background-color: orange; }
2.p#exampleID2 { text-transform: uppercase; }
1.<p id="ExampleID1">This paragraph has an ID name of
2."exampleID1" and has a orange CSS defined background</p>
3.<p id="ExampleID2">This paragraph has an ID name of
4."exampleID2" and has had its text transformed to uppercase letters. </p>

**id নাম সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা মজিলা ফায়ারফক্সে কাজ করবেনা।

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph has an ID name of “exampleID1” and has a orange CSS defined background.

THIS PARAGRAPH HAS AN ID NAME OF “EXAMPLEID2” AND HAS HAD ITS TEXT TRANSFORMED TO UPPERCASE LETTERS.

ক্লাস নির্বাচক (class Selector)

একদল এলিমেন্টের স্টাইল দেয়ার জন্য class selector ব্যাবহৃত হয়।class selector এইচটিএমএল এর class attribute ব্যাবহার করে এবং এটা “.” দিয়ে লেখা (সংঙ্গায়িত) হয়।নিচের উদাহরনে  যেসব এইচটিএমএল এলিমেন্টs এ এটা থাকবে তাদের সকলের Align মাঝখানে হয়ে যাবে।

1..center {text-align:center;}

আপনি ইচ্ছে করলে এইচটিএমএল এর যেকোন একটা এলিমেন্ট ঠিক করে দিতে পারেন যেটা একটা class দ্বারা প্রভাবিত হবে।যেম:

1.p.center {text-align:center;}

**class নাম সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা ইন্টারনেট এক্সপ্লোরার এ কাজ করবেনা।

ID =  একজনের Identification (ID) একজন ব্যক্তির জন্য unique ।

Class = অনেক জনগণ   একটি class এ পড়ে ।

সিএসএস ক্লাস টিউটোরিয়াল (CSS Class)

সিএসএস এর মাধ্যমে এইচটিএমএল এলিমেন্ট এর অসংখ্য স্টাইল দেয়া যায়। একটা উদাহরন দিয়ে বিষয়টি পরিস্কার করা যাক । ধরুন আপনি কখনও চাচ্ছেন আপনার লেখাটির ফন্ট বড় এবং সাদা হোক।  আবার চাচ্ছেন ছোট এবং কাল হোক। আপনি ভাগ্যবান এই অর্থে যে  সিএসএস classes ব্যবহার করার  মাধ্যমে আপনি আপনার ইচ্ছা পুরন করতে পারেন।

Class এর Format

Class  ব্যবহার করা খুব সাধারন। সাধারন  সিএসএস কোড এর  অংশকে বর্ধিত (extension) করতে হবে। আর এই বর্ধিত অংশকে অবশ্যই এইচটিএমএল ট্যাগ এ Class এর মান হিসাবে বসাতে হবে। নিচে উদাহরন দেয়া হলো:

1.p.first{ color: blue; }
2.p.second{ color: red; }
01.<html>
02.<body>
03.<p>This is a normal paragraph.</p>
04.
05.<p class="first">This is a paragraph that uses the p.first CSS code!</p>
06.<p class="second">This is a paragraph that uses the p.second CSS code!</p>
07.</body>
08.
09.</html>

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a normal paragraph.

This is a paragraph that uses the p.first CSS code!

This is a paragraph that uses the p.second CSS code!

আপ নি যেকোন এইচটিএমএল এলিমেন্ট এর সাথে সিএসএস class  ব্যবহার করতে পারেন।ধরুন আপনি <p> ট্যাগ ব্যবহার করে স্টাইল দিয়েছেন এবং সিএসএস class ব্যবহার করে অন্য একটি স্টাইল নিদিষ্ট করে দিয়েছেনে ফলে আগের  default স্টাইল টি আর নিদিষ্ট লেখার ঊপর কাজ করবে না।

1.p{ color: red; font-size: 20px; }
2.p.test1{ color: blue; }
3.p.test2{ font-size: 12px; }
1.<html>
2.<body>
3.<p>This is a normal paragraph.</p>
4.<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
5.<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
6....

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a normal paragraph.

This is a paragraph that uses the p.test1 CSS code!

This is a paragraph that uses the p.test2 CSS code!

সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (CSS Background)

আপনার সাইটের background অনেক বেশি গুরুত্ত্বপুর্ন তাই এই টিউটোরিয়াল টি আপনাদের মনোযোগ সহকারে দেখা উচিত। আপনি যদি professional website তৈরী করতে চান তাহলে  light background এর মধ্যে dark টেক্স ব্যবহার করা উচিত। আর যদি শুধু শখের জন্য তৈরী করতে চান তাহলে যেকোন কালারের সমন্নয় গ্রহনযোগ্য।

সিএসএস এর মাধ্যমে আপনি যেকোন সিএসএস এলিমেন্ট এর background color or image  সেট করতে পারেন। তাছাড়া  background image কিভাবে প্রর্দশিত হবে সে বিষয়টি আপনি নিয়ন্ত্রন করতে পারবেন। আপনি পছন্দমত এটিকে horizontally, vertically repeat করতে পারেন।তাছাড়া আপনি  background কে fixed position এ রাখতে পারেন বা scroll করতে পারেন।

নিচে সিএসএস background এর ঊদাহরন দেয়া হলো।

1.h4 { background-color: white; }
2.p  { background-color: #1078E1; }
3.ul { background-color: rgb( 149, 206, 145); }

প্রদর্শন

(নোট প্যাডে দেখুন)

This is a <h4> with a white background

This is a <p> with a background using the hexadecimal value of #1078E1

  • This is an unordered list
  • with an RGB value of 149, 206, 145

সিএসএস Background Image:

gradient background এর মত image কে left-to-right  করা যায়। অথবা যখন ইউজার স্ক্রল করবে তখন আপনি image কে fixed  অবস্থায় রাখতে পারেন ।

1.p { background-image: url(smallPic.jpg); }
2.h4{ background-image: url(http://
3.www.webcoachbd.com/pics/cssT/smallPic.jpg); }

This <p> has a background image using a local path to the picture.

This <h4> has a background image using the complete url path.

01.p {
02.background-image: url(smallPic.jpg);
03.background-repeat: repeat; }
04.h4 {
05.background-image: url(smallPic.jpg);
06.background-repeat: repeat-y;}
07.ol {
08.background-image: url(smallPic.jpg);
09.background-repeat: repeat-x;}
10.ul {
11.background-image: url(smallPic.jpg);
12.background-repeat: no-repeat;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This <p> has a background image repeating in both directions (default repeat). If you use this option, make sure that your image was designed to be repeated.

This <h4> has a background image repeating vertically (y). You could this to add a style to the side of your element.

  1. This is an ordered list
  2. With a background that repeats
  3. Horizontally (x)
  • This is an unordered list
  • With a background that repeats
  • in neither direction.

সিএসএস Background Image এর অবস্থান:

আপনি যদি নির্দিষ্ট করতে চান যে এইচটিএমএল এলিমেন্ট এর মধ্যে কোথায় image টি প্রদর্শিত হবে তাহলে সেটা CSS’s background-position এর মাধ্যমে করা যায়।নিচে তিন (length, percentages, keywords) প্রকারের নির্দিষ্ট করার ঊপায় দেখানো হলো।

1.p {
2.background-image: url(smallPic.jpg);
3.background-position: 20px 10px;
4.}
5.h4 {
6.background-image: url(smallPic.jpg);
7.background-position: 30% 30%;
8.}

প্রদর্শন:

(নোট প্যাডে দেখুন)

যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।

যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।

সিএসএস Gradient Background:

যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।

Image:

Background Image

ঊপরের image টি খুব সাধারন । আমরা এটাকে horizontal ভাবে রেখেছি । এই image টি 1 pixel এর। repeat attribute এর মাধ্যমে এর value       repeat-x   সেট করেছি  যার ফলে image টি নির্দিষ্ট এর বাম হতে ডান দিকে বিস্তৃতি লাভ করবে। নিচে উদাহরনে paragraph এলিমেন্ট এ gradient background যোগ হয়েছে

1.p {
2.background-image: url(http://www.webcoachbd.com/
3.images/stories/back_image.jpg);
4.background-repeat: repeat-x;
5.}

প্রদর্শন:

(নোট প্যাডে দেখুন)

এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু ল কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা

সিএসএস ফন্ট (CSS Font)

টেক্স কিভাবে প্রদর্শিত হবে তার নিয়ন্ত্রন ভার সিএসএস আপনাকে দিয়েছে। আপনি টেক্সের size, color, style ইত্যাদি পরিবর্তন করতে পারেন। আপনি জেনেছেন কিভাবে টেক্স bold  বা underline করতে হয় কিন্তু আপনি কি জানেন percentage  ব্যবহার কিভাবে ফন্ট resize  করা যায়। এই বিষয়ে আলোচনা  নিচে করা হয়েছে ।

সিএসএসফন্ট রং:

যদিও টেক্সের কালারকে সিএসএস ফন্ট অংশ মনে হয় কিন্তু প্রকৃতপক্ষে এটা স্বাধীন  সিএসএস attribute। নিচে ফন্ট এর কালার পরিবর্তনের উদাহরন দেয়া হলো।

1.h4 { color: red; }
2.h5 { color: #9000A1; }
3.h6 { color: rgb(0, 220, 98); }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a red h4 header.

This is a hexadecimal #9000A1 h5 header.
This is an rgb(0, 220, 98) h6 header.

উপরের উদাহরনে কালার নির্দেশ করতে আমরা কালারের তিন প্রকারের ফরমেট ব্যবহার করেছি।

সিএসএসফন্ট Family:

ফন্ট family দুইটি  group  এ বিভক্ত যেমন: serif and sans-serif । গবেষনায় দেখা গিয়েছে serif fonts হতে sans-serif fonts যা  computer monitor এ খুব সহজে পড়া যায় ।

1.h4 { font-family: sans-serif; }
2.h5 { font-family: serif; }
3.h6 { font-family: arial; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a header with sans-serif font

This is a header with a serif font
This is a header with an arial font

সিএসএসফন্ট আকার:

আপনি values, percentages বা key terms ব্যবহার করে ফন্ট আকার ঠিক করতে পারেন। যখন আপনি default ফন্ট পরিবর্তন করতে চাবেন তখন Percentages ব্যবহার করা ভাল কিন্তু static value সেট করা উচিত নয়।

1.p { font-size: 120%; }
2.ol{ font-size: 10px; }
3.ul{ font-size: x-large; }

Display:

This is a font size of 120%

  1. This is a font size of 10px
  • This is a font size of “x-large”

ফন্ট-weight এর অন্যান্য key terms গুলো হল: bold, bolder, and normal.

সিএসএসফন্ট Variant:

সিএসএস ফন্ট Variant এর সাহায্যে আপনি ফন্ট কে  small caps এ পরিবর্তিত করতে পারেন। Note: কিন্তু সকল ফন্ট,  সিএসএস ফন্ট Variant কে সাপোর্ট করে না তাই প্রকাশ করা আগে নিশ্চিত হয়ে নেয়া উচিত।

1.p { font-variant: small-caps; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

this text was written normally and converted to small-caps

সিএসএস টেক্সক্ট টিউটোরিয়াল (CSS Text)

সিএসএস টেক্সট এর মাধ্যমে আপনি  টেক্সট এর spacing, decoration,  এবং alignment নিয়ন্ত্রন করতে পারেন।

টেক্সট Decoration:

টেক্সট Decoration এর মাধ্যমে আমরা লিংক এর underline দুর করতে পারি।  তাছাড়া line-through,

overline এবং underline  ইত্যাদি টেক্সট এ ব্যব্হার করতে পারি।

1.h4{ text-decoration: line-through; }
2.h5{ text-decoration: overline; }
3.h6{ text-decoration: underline; }
4.a { text-decoration: none; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This header has a line through the middle

This header has an overline
This header has an underline

This is a link without an underline – See our CSS Link tutorial for more information

টেক্সট Indent:

সিএসএস text-indent কে আমরা এইচটিএমএল (<pre>)  ট্যাগ পরিবর্তে ব্যবহার করতে পারি। values

or percentages ব্যবহার করে আমরা text-indent নির্দিষ্ট করি।text indent মানে লেখাটি বাম দিকে থেকে কতটুকু

ছাড় দিয়ে শুরু হবে।

1.p { text-indent: 20px; }
2.h5 { text-indent: 30%; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a paragraph that uses a text indentation with the value of 20px. This is the recommended usage of text indentation.

This is a header that uses a text indentation of 30%. Webcoachbd does not recommend indenting your text with percentages.

টেক্সটAlign:

সাধারনত  website এ default হিসাবে টেক্সট Align: leftনিবার্চিত থাকে। টেক্সট Align attribute এর সাহায্যে

টেক্সট  এর বিভিন্ন Alignment দেয়া যায়।

1.p { text-align: right; }
2.h5{ text-align: justify; }

প্রদর্শন:

This paragraph is aligned to the right side of the HTML element. If you ever find a use

for using right justify, please let us know. Just kidding, we don’t really want to know.

This header is justified. We recommend that you either align your text to the left, which is the
default setting, or justify your text. But feel free to experiment with all the available
alignment options that are at your disposal.

টেক্সট Transform:

টেক্সট Transform এর মাধ্যমে টেক্সট এর দ্রুত capitalize করা যায়।

1.p { text-transform: capitalize; }
2.h5{ text-transform: uppercase; }
3.h6{ text-transform: lowercase; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

Hi, I am happy to see you.

Hi, I am happy to see you.

Hi, I am happy to see you.

সিএসএস White Space:

white-space attribute এর মাধ্যমে লেখাটি  এক লাইনে চলতে থাকবে যতক্ষন না আপনি break <br />

ট্যাগ না দিবেন।

1.p { white-space: nowrap; }

প্রদর্শন:

This paragraph will not wrap until I tell it to with a break tag.

</br> ট্যাগ দিলে তারপর থেকে নিচে লাইন যাবে।

সিএসএস Word Spacing:

সিএসএস Word Spacing attribute এর মাধ্যমে পাশাপাশি শব্দগলোর মধ্যে gap এর পরিমান নির্ধারন করে দেয়া যায়।

1.p { word-spacing: 10px; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph has a word-spacing value of 10px.

সিএসএস Letter Spacing:

সিএসএস letter-spacing attribute এর মাধ্যমে শব্দের মধ্যে বর্ণ গুলোর মধ্যে gap এর পরিমান নির্ধারন করে

দেয়া যায়।

1.p { letter-spacing: 3px; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a paragraph with letter-spacing of 3px.

সিএসএস প্যাডিং টিউটোরিয়াল (CSS Padding)

সিএসএস প্যাডিং ব্যবহার করে আপনি এইচটিএমএল এলিমেন্ট (paragraphs, tables ইত্যাদি ) এর  default প্যাডিং  পরিবর্তন করতে পারেন। আর  প্যাডিং বলতে বোঝায় এলিমেন্ট এর  border এবং তার content  এর মধ্যের অংশকে।

1.p {padding: 15px; border: 1px solid black; }
2.h5{padding: 0px; border: 1px solid red;}

This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left.

This header has no padding, which places the text right against the border!

সিএসএসপ্যাডিং: 1 Value

1 Value বিশিষ্ট প্যাডিং সকল (top, right, bottom, left.) পাশে uniform padding  তৈরী করে।

1.p {padding: 2%; border: 1px solid black; }
2.h5{padding: 0px; border: 1px solid red;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom.

This header has no প্যাডিং. It is only spaced away from the paragraph because the paragraph has a প্যাডিং of 5 pixels!

সিএসএসপ্যাডিং: padding-(direction):

প্রত্যেক  এইচটিএমএল এলিমেন্ট এর প্রকৃতপক্ষে চারটি ভিন্ন প্যাডিং থাকে যেমন top, right, bottom, এবং left । প্যাডিং direction  attribute এর মাধ্যমে পৃথক পৃথক প্যাডিং নির্দেশ করা যায়। এক direction (যেমন -left) এ নির্দেশ করলে অন্যগুলো অপরিবর্তিত থাকে।

p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph had one padding specified(left), using directional declaration.

This header had each padding specified separately, using directional declaration.

সিএসএসপ্যাডিং: 2 & 4 Values

যখন আমরা দুইটি প্যাডিং Value ব্যবহার করবো তখন প্রথম Value টি top এবং bottom প্যাডিং Value নির্দেশ করবে এবং দ্বিতীয়  Value টি  left and right প্যাডিং Value নির্দেশ করবে। মনে রাখতে হবে সাধারনত প্যাডিং Value টি  top দিয়ে শুরু হয় এবং clockwise ভাবে এটি left  এ শেষ হয়। প্যাডিং Value  এর ধারাবাহিকতা হল top, right, bottom এবং left ।

1.p {
2.padding: 5px 15px;
3.border: 1px solid black;
4.}
5.h5{
6.padding: 0px 5px 10px 3px;
7.border: 1px solid red;
8.}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15 pixels.

This header has a top padding of 0 pixels, a right padding of 5 pixels, a bottom padding of 10 pixels, and a left padding of 3 pixels.

সিএসএস Margin:

সিএসএস Margins  প্রায় সিএসএস প্যাডিং attribute এর মত। শুধু একটা গুরুত্বপূর্ন পাথর্ক্য হচ্ছে:Margin বলতে এইচটিএমএল এলিমেন্ট এর border এর  চারপাশের অংশকে বোঝায় আর প্যাডিং  বলতে border এর ভিতরের অংশকে বোঝায়। প্যাডিং এর মত Margin এর Value সেট করা যায়।

1.p {margin: 5px; border: 1px solid black; }
2.h5{margin: 0px; border: 1px solid red;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.

This header has a margin of 5 pixels.

সিএসএস Margin: 1 Value

এটা সিএসএস প্যাডিং: 1 Value এর মত

1.<b> </b>
2.p {margin: 2%; border: 1px solid black; }
3.h5{margin: 0px; border: 1px solid red;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.

This header has a margin of 5 pixels.

সিএসএস Margin: margin-(direction):

এটা সিএসএস প্যাডিং: padding-(direction) এর মত ।

1.p { margin-left: 5px; border: 1px solid black; }
2.h5{ margin-top: 0px;
3.margin-right: 2px;
4.margin-bottom: 13px;
5.margin-left: 21px;
6.border: 1px solid red; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph had one margin specified (left), using directional declaration. Note that there is still a margin below and above this paragraph. This is because our CSS only replaced one of the four margins, which didn’t effect the top and bottom margins.

This header had each margin specified separately, using directional declaration.

সিএসএস Margin: 4 Values

এটা সিএসএস প্যাডিং: 2 & 4 Values এর মত ।

1.p {margin: 5px 15px;
2.border: 1px solid black; }
3.h5{margin: 0px 5px 10px 3px;
4.border: 1px solid red;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph has a top and bottom margin of 5 pixels and a right and left margin of 15 pixels.

This header has a top margin of 0 pixels, a right margin of 5 pixels, a bottom margin of 10 pixels, and a left margin of 3 pixels.

সিএসএস বর্ডার টিউটোরিয়াল (CSS Border)

এইচটিএমএল এলিমেন্টs এর চারপাশে যে বর্ডার দেখা যায় তা সিএসএস বর্ডার এর মাধ্যমে সম্পুর্নভাবে customize করা যায়। সিএসএস বর্ডার এর মাধ্যমে বর্ডার এর স্টাইল পরিবর্তন করা যায়।

বর্ডার Style Types:

অসংখ্য প্রকারের বর্ডার Style রয়েছে যা আপনি আপনার পছন্দমত বিভিন্ন ধরনের বর্ডার তৈরী করতে পারেন।

এই টিউটোরিয়ালে সিএসএস ক্লাস ব্যবহার করেছি,ক্লাস সমন্ধে জনা না থাকলে আগে আমাদের সিএসএস ক্লাস টিউটোরিয়ালটি পরে আসুন। http://www.webcoachbd.com/css-tutorials/css-class

01.p.solid {border-style: solid; }
02.p.double {border-style: double; }
03.p.groove {border-style: groove; }
04.p.dotted {border-style: dotted; }
05.p.dashed {border-style: dashed; }
06.p.inset {border-style: inset; }
07.p.outset {border-style: outset; }
08.p.ridge {border-style: ridge; }
09.p.hidden {border-style: hidden; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a solid border

This is a double border

This is a grooved border

This is a dotted border

This is a dashed border

This is an inset border

This is an outset border

This is a ridged border

This is a hidden বর্ডার

বর্ডার Width:

বর্ডার-width attribute এর সাহায্যে বর্ডার এর পুরুত্ব পরিবর্তন করা যায়। বিভিন্ন key terms বা ভেলু দিয়ে বর্ডার-width নির্দিষ্ট করা যায়। বিভিন্ন term ব্যবহার করা যেতে পারে যেমন thin, medium, thick ইত্যাদি।

1.table { border-width: 7px;
2.border-style: outset; }
3.td { border-width: medium;
4.border-style: outset; }
5.p { border-width: thick;
6.border-style: solid; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This table has an outset border with a width of 7 pixels.
Each cell has an outset border with a “medium” width.

This paragraph has a solid border with a “thick” width.

বর্ডার Color:

border-color attribute এর মাধ্যমে আপনি পছন্দমত color combination করে বর্ডারকে দৃষ্টি নন্দন করে তুলতে পারেন।

01.table { border-color: rgb( 100, 100, 255);
02.border-style: dashed; }
03.
04.
05.td { border-color: #FFBD32;
06.border-style: ridge; }
07.
08.
09.p { border-color: blue;
10.border-style: solid; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This table has a dashed border with the RGB value ( 100, 100, 255).
Each cell has a ridged border with a hexadecimal color of #FFBD32.

This paragraph has a double border with a color of “blue”.

সিএসএস লিস্ট টিউটোরিয়াল (CSS List)

লিস্টs  মুলত দুই প্রকার যথা:  unordered এবং  ordered ।সিএসএস দিয়ে লিস্ট কে এইচটিএমএল হতে অনেক বেশি customize করা যায়। এমনকি image  কে bullet points হিসাবে unordered লিস্ট এর জন্য ব্যবহার করা যায়।

সিএসএসলিস্ট Style Type:

আপনি যদি default number এর ordered লিস্ট বা unordered লিস্ট এর  bullets/discs হতে ভিন্ন স্টাইল ব্যবহার  করতে চান তাহলে আপনি লিস্ট এর জন্য  বিভিন্ন ধরনের স্টাইল ব্যবহার করতে  পারেন। নিচে বিভিন্ন স্টাইল দেয়া হলো:

১. Unordered list styles: square, circle, disc (default), এবং none ।

২.  Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), এবং  none ।

1.ol { list-style-type: upper-roman; }
2.ul { list-style-type: circle; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

Here is an ordered list:

  • This list is
  • using roman
  • numerals
  • with CSS!

and now an unordered list:

  1. This list is
  2. using circle types
  3. with CSS!

সিএসএস লিস্ট ইমেজের সাথে:

আমরা আগেই বলেছি  normal bullet এর পরিবর্তে image  কে  ব্যবহার করা যায়।

1.ul { list-style-image: url("listArrow.gif"); }
2.ol { list-style-image: url("listArrow2.gif"); }

প্রদর্শন:

(নোট প্যাডে দেখুন)

Here is an unordered list:

  • This list is
  • using a picture with CSS!

and now an ordered list:

  1. This list is
  2. using a picture
  3. with CSS!

সবচেয়ে ভাল হয় Unordered লিস্ট  এর ক্ষেত্রে  image  কে ব্যবহার করা।

সিএসএসলিস্ট Position:

list-style-position এর ভেলু  inside দিলে তখন লিস্টগুলো মার্জিন হতে ভিতরের দিকে থাকবে আর Outside দিলে normal লিস্ট Position এ থাকবে। Outside ভেলুটি একটি default setting ।

1.ul { list-style-position: inside; }
2.ol { list-style-position: outside; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

  • This list is
  • using inside
  • positioning with CSS!

and now an ordered list:

  1. This list is
  2. using outside
  3. positioning with CSS!

লিস্ট:সব একটাতে

এই  list-style-type এর মাধ্যমে এমন একটা ব্যবস্থা করা যায় যখন আপনার list-style image লোড নিবে না তখন অন্য list-style দেখাবে।

1.ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}

প্রদর্শন:

(নোট প্যাডে দেখুন)

  • This list’s image did
  • NOT load correctly
  • But because we chose to include
  • A CSS list type, we avoided a bland list!

সিএসএস লিংক টিউটোরিয়াল (Pseudo Class)

সিএসএস এর মাধ্যমে এনকর ট্যাগ বা  লিংকে এ আমরা ইফেক্ট যোগ করতে পারি।

সিএসএস এনকর/লিংক অবস্থা:

আপনি কি জানেন  লিংক এর চারটি ভিন্ন অবস্থা আছে। সিএসএস এর মাধ্যমে প্রতিটি অবস্থাকে    customize করা যায়। নিচের keyword গুলো আলাদা অবস্থা নির্দেশ করে।

১ link –এটি একটি লিংক যেটি ব্যবহার হয়নি ।

২ visited – এটি একটি লিংক যা পূর্বে ব্যবহার হয়েছে কিন্তূ লিংকের ঊপর mouse রাখা হয়নি।

৩ hover – এটি একটি লিংক যার ঊপর মাউস রাখার সাথে সাথে visual ইফেক্ট দেখাবে।

৪ active – এটি একটি লিংক যেটা বর্তমানে সক্রিয় আছে

সিএসএস Pseudo-Classes:

সিএসএস Pseudo-Classe এর মাধ্যমে আমরা  সিএসএস লিংক এর চারটি অবস্থাকে(state)modify করতে পারি।

1.a:(STATE'S NAME) { attribute: value; }

state বা অবস্থার নাম হল pseudo class যা এইচটিএমএল এলিমেন্ট দেখতে কেমন হবে তা নির্দেশ করে। link, visited এবং hover এই order মেনে চললে আমরা সঠিকভাবে কার্যকর সিএসএস লিংক তৈরী করতে পারবো।

1.a:link { color: red; }
2.a:visited { color: red; }
3.a:hover { color: blue; }
1.<a href="/">This is a special CSS Link</a>!

প্রদর্শন:

মাউস রাখার আগে

before_mouse

মাউস রাখার পর

after_mouse

আমরা লিংকের Underline দুর করতে text-decoration এর ভেলু none করে দেই।

1.a:link { color: red; text-decoration: none; }
2.a:visited { color: red; text-decoration: none; }
3.a:hover { color: blue; }

প্রদর্শন:

মাউস রাখার পূর্বে

মাউস রাখার পরে

লিংকের Underline দুর করার সময় সর্তক হওয়া ঊচিত কেননা normal text এবং লিংক চিনতে সমস্যা সৃস্টি হতে পারে। সেজন্য লিংকের দুটি অবস্থা যেমন লিংক এবং hover এর কালার ভিন্ন হওয়া উচিত।

01.a:link {
02.color: white;
03.background-color: black;
04.text-decoration: none;
05.border: 2px solid white;
06.}
07.a:visited {
08.color: white;
09.background-color: black;
10.text-decoration: none;
11.border: 2px solid white;
12.}
13.a:hover {
14.color: black;
15.background-color: white;
16.text-decoration: none;
17.border: 2px solid black;
18.}

প্রদর্শন:

মাউস রাখার পূর্বে

This link is a almost over-the-top

মাউস রাখার পরে

01.a:link {
02.color: blue;
03.background-color: red;
04.font-size: 26px;
05.border: 10px outset blue;
06.font-family: sans-serif;
07.text-transform: lowercase;
08.text-decoration: none;
09.}
10.a:visited {
11.color: blue;
12.background-color: red;
13.font-size: 26px;
14.border: 10px outset blue;
15.font-family: sans-serif;
16.text-transform: lowercase;
17.text-decoration: none;
18.}
19.a:hover{
20.color: blue;
21.background-color: red;
22.font-size: 27px;
23.border: 10px inset blue;
24.font-family: serif;
25.text-transform: uppercase;
26.text-decoration: line-through;
27.letter-spacing: 3px;
28.word-spacing: 6px;
29.font-weight: normal;
30.}

প্রদর্শন:

মাউস রাখার পূর্বে

মাউস রাখার পরে

সিএসএস কার্সর (CSS Cursor)

আমরা   উইন্ডোজ, লিনাক্স ব্যবহার সময় বিভিন্ন মাউস কার্সর আইকন দেখেছি। বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস কার্সর এর আইকন বিভিন্ন হয়। জনসাধারন যখন আপনার site visit করবে সেখানেও  বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস এর আইকন বিভিন্ন করে তৈরী করা যায়। যা সিএসএস দ্বারা করা সম্ভব ।

সিএসএস কার্সর আইকন:

এবার আপনাদের দেখাবো কিভাবে বিভিন্ন এইচটিএমএল এলিমেন্ট এর জন্য মাউস কার্সর আইকন পরিবর্তন করা যায়।

১ default –  normal mouse cursor icon প্রদর্শন করে।

২wait –   এই  mouse icon নির্দেশ করে যে computer চিন্তা করছে।

৩crosshair –  cross hair চিহ্ন প্রদর্শন করে।

৪text –   এই “I” shape icon   টি   নির্দেশ করে যে, যখন আপনি কোন text কে select  করবেন।

৫pointer – এই hand icon  টি   নির্দেশ করে যে, যখন আপনি কোন এইচটিএমএল link ঊপর hover করবেন।

৬help- এই  icon  টি   নির্দেশ করে যে  আপনি কোন বিষয়ে সাহায্য বা প্রশ্ন করতে চাচ্ছেন (question mark)

1.p { cursor: wait }
2.h4 { cursor: help }
3.h5 { cursor: crosshair }

প্রদর্শন:

(নোট প্যাডে দেখুন)

Please Wait While this Web Page Loads

How May I Help You?

Stick Your Hands in the Air!

সিএসএস প্রোপর্টিজ টিউটোরিয়াল(CSS Properties)

 

এইচটিএমএল এ তার ট্যাগ ( <b>, <body>, <a>, ইত্যাদি) গুলো হল এইচটিএমএল language এর গোসত এবং আলু। সিএসএস এ আপনারা tutorial পড়ার সময় অনেক গুলো property ( Font, Text, Box, Color ইত্যাদি) লক্ষ্য করেছেন ।নিচে আলোচনা করা হলো।

সিএসএসফন্টপ্রোপার্টিজ:

সিএসএস ফন্ট প্রোপার্টিজ এর সাহায্যে এর টেক্সট এর  graphical representation কে নিয়ন্ত্রন করা যায়।

নিচে সিএসএস ফন্ট property  গুলো দেয়া হলো ।

  • font
  • font-family
  • font-size
  • font-style
  • font-weight
  • font-variant

সিএসএসটেক্সটপ্রোপার্টিজ:

সিএসএস টেক্সট প্রোপার্টিজ যা টেক্সট এর spacing, alignment, decoration ইত্যাদি বিষয়গুলো নিয়ন্ত্রন করে। নিচে সিএসএস টেক্সট property  গুলো দেয়া হলো ।

  • letter-spacing
  • word-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • text-align
  • text-indent
  • line-height

সিএসএস বক্স প্রোপার্টিজ:

সিএসএস বক্স প্রোপার্টিজ যা এইচটিএমএল এলিমেন্ট এর ভিতরে এবং চারপাশের অংশকে নির্দেশ করে।এদের মধ্যে  Border, Margin এবং Padding property  গুলোর আবার চারটি property রয়েছে সেগুলো হল top, right, bottom এবং left ।নিচে সিএসএস box property  গুলো দেয়া হলো ।

  • Margin
  • Padding
  • Border
  • Border-width
  • Border-color
  • Border-style
  • Width
  • Height
  • Float
  • Clear

সিএসএস কালার প্রোপার্টিজ:

সিএসএস কালার property নির্দেশ করে যে, কি ধরনের কালার আমরা নির্দিষ্ট এইচটিএমএল এলিমেন্ট এর টেক্সট এর জন্য ব্যবহার করবো। নিচে সিএসএস কালার property  দেয়া হলো ।

Color

সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিজ:

সিএসএস background প্রোপার্টিজ যা background এর এমন বিষয় নিয়ন্ত্রন করে ,তা হলো যদি background টি single color বা image হয়ে থাকে । যদি তা image হয়ে থাকে তাহলো আপনি image  এর position ঠিক করতে পারেন । আপনি image কে    repeat left-to-right      অথবা top-to-bottom করতে পারেন। নিচে সিএসএস background property  গুলো দেয়া হলো ।

  • Background
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position

সিএসএস Classification প্রোপার্টিজ:

Display

Whitespace

List Style

List Style Type

List Style Image

List Style Position

সিএসএস পজিশন টিউটোরিয়াল (CSS Position)

সিএসএস পজিশন এর মাধ্যমে আমরা এইচটিএমএল এলিমেন্টs  এর exact পজিশন নির্দেশ করতে পারি।

Position Relative:

Relative position  দ্বারা  এইচটিএমএল এলিমেন্ট এর position  অন্য এলিমেন্ট এর সাপেক্ষে পরিবর্তন করা যায়।

01.h3 {
02.position: relative;
03.top: 15px;
04.left: 150px;
05.}
06.p {
07.position: relative;
08.left: -10px;
09.}

Move Left –   এক্ষেত্রে left এর জন্য negative value ব্যবহার করতে হবে।

Move Right – এক্ষেত্রে left এর জন্য positive value ব্যবহার করতে হবে।

Move Up –     এক্ষেত্রে top এর জন্য negative value ব্যবহার করতে হবে।     .

Move Down – এক্ষেত্রে left এর জন্য positive value ব্যবহার করতে হবে।

উদাহরন:

সিএসএস দেয়ার আগে            সিএসএস দিয়ে পজিশন ঠিক করার পর

Position Absolute:

absolute position  দ্বারা  এইচটিএমএল এলিমেন্ট এর exact position (pixel value) নির্দেশ করা যায়।

01.h3 {
02.position: absolute;
03.top: 50px;
04.left: 45px;
05.}
06.p{
07.position: absolute;
08.top: 75px;
09.left: 75px;
10.}

উদাহরন:

সিএসএস দেয়ার আগে            সিএসএস দিয়ে পজিশন ঠিক করার পর

Position Fixed

একটা এলিমেন্টের পজিশন যদি ফিক্সড করে দেন তাহলে সেটা ব্রাউজারের উইন্ডো সাপেক্ষে অবস্থান করবে এবং ব্রাউজার যদি স্ক্রল করেন তবুও সেটা স্থির (fixed) থাকবে।

উদাহরন:এখানে দেখুন “স্ক্রল করলেও আমি সরবনা” এই লাইনটির পজিশন ফিক্সড করে দেয়া হয়েছে তাই স্ক্রল করলেও এটি তার অবস্থান থেকে সরবেনা।

স্ক্রল করলেও আমি সরবনা

Note: Internet Explorer 7 (and higher) supports the fixed value if a !DOCTYPE is specified.

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

নোট:Internet Explorer এ এটি support করবে যদি এর !DOCTYPE নির্দিষ্ট করে দেন।

সিএসএস লেয়ার (CSS Layers)

এবার আমরা দেখবো  লেয়ার ব্যবহার করার মাধ্যমে কোন এলিমেন্ট  টি উপরে দেখাবে, যা সিএসএস লেয়ার এর মাধ্যমে আমরা নিয়ন্ত্রন করতে পারি।  সিএসএস এ প্রত্যেক এলিমেন্ট কে priority দেয়া হয়ে  থাকে। যদি দুটি  overlapping      CSS positioned         elements  থাকে, তাহলে যার priority বেশি তাকে আগে উপরে দেখাবে।

Priority নির্ধারন করতে আমরা z-index value সেট করে থাকি ।যার z-index value যত বেশি তার priority  তত বেশি।

01.h4{
02.position: relative;
03.top: 30px;
04.left: 50px;
05.z-index: 2;
06.background-color: #336699;
07.}
08.
09.
10.p {
11.position: relative;
12.z-index: 1;
13.background-color: #FFCCCC;
14.}

প্রদর্শন:

সিএসএস ফ্লট টিউটোরিয়াল (CSS Float)

ফ্লট দ্বারা ছবি কে এক পাশে  বা অন্য পাশে অবস্থান করানো যায়। ছবি এর চারপাশে টেক্সক্ট থাকে । যেমনটি দেখা যায় magazines বা সংবাদপত্রে বিভিন্ন আকারের ছবির চারপাশে টেক্সট এর অবস্থান ।

Float Image:

সিএসএস Float attribute এর সাহায্যে খুব সহজে টেক্সট কে ছবির চারপাশে Wrapping করা যায়।

আপনি ইচ্ছামত ছবি কে বাম বা ডানে Float করতে পারেন। নিচে ঊদাহরন দেয়া হলো ।

1.img.floatLeft {
2.float: left;
3.margin: 4px;
4.}
5.img.floatRight {
6.float: right;
7.margin: 4px;
8.}
1.<body>
2.<img src="/sunset.gif">
3.<p>The images are contained with...</p>
4.
5.
6.<img src="/sunset.gif">
7.<p>This second paragraph has an...</p>
8.</body>

প্রদর্শন:

The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely. The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely.

This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content. This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content.

Floating Multiple Images:

যদি আমরা অনেক গুলো ছবি কে float করতে চাই যেন একটার নিচে আরেকটা অবস্থান করবে সেক্ষেত্রে আমরা সিএসএস Clear attribute এর মাধ্যমে তা করতে পারি। নিচের ঊদাহরনে আমরা ডানদিকে float করেছি ।

1.img.floatRightClear {
2.float: right;
3.clear: right;
4.margin: 4px;
5.}
1.<body>
2.<img src="/sunset.gif">
3.<img src="/sunset.gif">
4.<p>The images are appearing...</p>
5.<p>If we had specified...</p>
6.<p>The number of paragraphs...</p>
7.</body>

প্রদর্শন:

The images are appearing below one another because the CSS clear attribute was used with the value of “right”. This forces all right floating items to appear below any previous right floating items.

If we had specified clear:left in our CSS code, then there would be no effect on the images, and they would appear in their default pattern, next to each other, all on one line.

The number of paragraphs, and the size of the paragraphs, will not effect how these images will appear.

ক্লিয়ার প্রোপার্টিজ এর আরও তথ্য

কোন একটা এলিমেন্টের left বা right এ যদি অন্য কোন এলিমেন্ট ফ্লট (float) করা থাকে আর আপনি যদি চান floated এলিমেন্টগুলি না দেখাক তাহলে clear:both এভাবে দিতে হবে।যদি বাম দিকের floated এলিমেন্ট টি না দেখানো হোক এটা চান তাহলে clear:left এভাবে বাকিগুলি।যেমন

<html>
<head>
<style type="text/css">
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:left;
margin-bottom:2px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img src="Image 1.jpg" width="107" height="90">
<img src="Image 1.jpg" width="107" height="80">
<h3>Second row</h3>
<img src="Image 1.jpg" width="107" height="90">
<img src="Image 1.jpg" width="107" height="80">
<img src="Image 1.jpg" width="116" height="90">
</body>
</html>

এখানে 
 .text_line
 {
 clear:left;
 } 
 দেয়ার কারনে Second row লেখাটির বামে floated এলিমেন্ট গুলি সরে গেছে।এই প্রোপার্টিজ উঠিয়ে দিয়ে দেখুন ছবিগুলি বরাবর Second row লেখাটি দেখাবে।
 *html ফাইলটি যেখানে রাখবেন সেখানে Image 1.jpg নামে একটা ছবি থাকতে হবে।

সিএসএস প্রদর্শন টিউটোরিয়াল (CSS Display)

সিএসএস ঊদাহরনে দেখেছেন আমরা মেনুর শ্রী বৃদ্ধির জন্য বিভিন্ন কাজ করেছি। এইচটিএমএল এ কিছু ঊদাহরনে কোন line break নেই ।তবে আমরা কিছু নির্দিষ্ট ঊদাহরনের anchor ট্যাগ এর line break তৈরী  করেছি ।এই line break গুলো block valueএর মাধ্যমে তৈরী করা হয়েছে।

1.a { display: block; }
2.p { display: inline; }
01.<a href="http://www.tizag.com/" target="_blank">Tizag.com - Learn to Whip the Web
02.</a>
03....
04.<a href="http://www.webcoachbd.com/" target="_blank">Webcoachbd - Learn to Whip the Web
05.</a>
06.<br />
07.<p>These paragraph </p>
08.<p>elements</p>
09.<p>have been </p>
10.<p>inlined.</p>

প্রদর্শন:

(নোট প্যাডে দেখুন)

These paragraph

elements

have been

inlined.

Display None (Hidden):

কিছু সময় আপনার কোন content,   Hide করে রাখার প্রয়োজন হতে পারে বা দেখানো প্রয়োজন  হতে পারে । none value এর মাধ্যমে কোন কিছু যেকোন content,  Hide করে রাখা যায়।

1.p.show { display: block }
2.p.hide { display: none; }
1.<p>This paragraph is displayed correctly because
2.it has a display value of "block".</p>
3.<p>This paragraph is hidden because
4.it has a display value of "none".  Why am I even
5.writing anything in here?</p>

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph is displayed correctly because it has a display value of “block”.

পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল (PSD to XHTML/HTML)

পৃষ্ঠা 1 মোট পৃষ্ঠা 7

পিএসডি থেকে এইচটিএমএল/এক্সএইচটিএমএল (PSD to XHTML/HTML) করার ক্ষেত্রে প্লানিং টাই সবচেয়ে গুরত্বপূর্ন বাকি কাজ অর্থ্যাৎ কোড লেখা সহজ।নিচে একটা পুর্নাঙ্গ পিএসডি থেকে এইচটিএমএল (আসলে এক্সএইচটিএমএল) তৈরী করার প্রক্রিয়া ধাপে ধাপে দেখানো হল-

প্রজেক্ট ডাউনলোড লিংক

প্রথম কাজ হচ্ছে পিএসডি ফাইলটি দেখে আপনাকে ভাবতে হবে।সাইটের পুরো স্ট্রাকচার আপনাকে div ভিত্তিক চিন্তা করতে হবে।সব div একটা div এর ভিতর থাকবে এরপর সাইটের প্রতিটি অংশ এক একটি div এর ভিতর থাকবে।এভাবে..

পিএসডি ফাইলটিকে স্লাইস (ফটোশপে slicing tool দিয়ে) করতে হবে।স্লাইস করার ব্যাপারটি সম্পূর্ন নিজের উপর।ইচ্ছে করলে স্লাইস না করেও কাজ করতে পারেন।ইচ্ছে করলেই করতে পারেন তার মানে এই নয় যে এটাই করা উচিৎ।বরং স্লাইসিং করা দরকার।স্লাইসিং করাটাও প্লানিং করে করতে হবে।সাইটকে ভাগ ভাগ করে নিবেন।স্লাইসিং করার মুল উপকার হচ্ছে অন্য কোন ডিজাইনার যখন এই পিএসডি ফাইল দেখবে তখন সে বুঝতে পারবে যে কিভাবে কাজটি (প্লান) করতে হবে।

একটা ফোল্ডার তৈরী করুন যেমন আমি করেছি XHTML_Coach_Lee এই নামে এবার এখানে মোট ৩টি ফোল্ডার (css, images এবং js) ও ২টি ফাইল index.html এবং style.css নামে থাকবে।css ফোল্ডারে style-ie.css নামে একটা সিএসএস ফাইল থাকবে।এখানে ঐসব কোড থাকবে যেগুলি শুধুমাত্র ইন্টারনেট এক্সপ্লোরার ব্রাউজার এর কমপিটাবল করার জন্য লেখা হবে।তবে এই প্রজেক্টটিতে এমন কোন কোড নেই।এরপর images ফোল্ডারে সব ইমেজগুলি থাকবে।আর js ফোল্ডারে জাভাস্ক্রিপ্ট এর ফাইল থাকবে।যেমন এই প্রজেক্টের এই ফোল্ডারে কিছু জাভাস্ক্রিপ্ট ফাইল আছে যেগুলি IE তে png ছবি দেখানোর জন্য ব্যবহৃত হবে (অবশ্য এই প্রজেক্টে কোন png ইমেজ নেই তবে থাকলে এই জাভাস্ক্রিপ্ট ফাইলগুলি তখন কাজ করত)।

index.html ফাইলে সব এইচটিএমএল কোড থাকবে।index.html ফাইলে নিচের কোড কপি করে পেস্ট করুন।

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>Coach Lee Green :: Home</title>
06.<meta name="description" content="content" />
07.<meta name="keywords" content="keywords" />
08.<link rel="stylesheet" type="text/css" media="screen,projection" href="/style.css"/>
09.<!--[if lte IE 6]>
10.<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/style-ie.css"/>
11.<script type="text/javascript" src="/js/ie6PngFix.js" ></script>
12.<![endif]-->
13.</head>
14.<body>
15.<!--OUR ALL CODE GOES HERE -->
16.</body>
17.</html>

এই কোডগুলি সম্পর্কে আগের এইচটিএমএল এবং সিএসএস টিউটোরিয়ালে যেহেতু আলোচনা হয়েছে তাই এখানে পুনরায় ব্যাখ্যা করা হলনা।body ট্যাগের ভিতর আমাদের সব কোড লিখতে হবে।

এখানে শুধু if স্টেটমেন্ট (৯ থেকে ১২ নম্বর লাইন পর্যন্ত)এর ভিতর কিছু নতুন কোড আছে,যদি IE ‘র জন্য কোন সিএসএস ফাইল থাকে বা কোন png ইমেজ থাকে তাহলেই শুধু এই কোডটুকু দ্বারা index.html এর সাথে ফাইলদুটি যক্ত হবে (style-ie.css এবং ie6PngFix.js)।

পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল (PSD to XHTML/HTML) – ফটোশপ থেকে এক্সএইচটিএমএল টিউটোরিয়াল-২

পৃষ্ঠা 2 মোট পৃষ্ঠা 7

সব আগে একটা wrapper নামে div নেব যেখানে বাকি সব div গুলি থাকবে (শুধু footer ডিভটি ছাড়া)।

1.<div id="wrapper">
2.<!--- All div goes here (Ekhane Sob div rakhte hobe)-->
3.</div>

style.css ফাইলে এই wrapper এর জন্য নিচের কোড লিখুন।প্রজেক্টটির এই ফাইলে wrapper ডিভের কোড লেখার আগে যেসব কোড আছে তা কমন কিছু স্টাইল দেয়ার জন্য রাখা হয়েছে এসব না রাখলে হবে শুধু body এর জন্য যেটুকু কোড আছে সেটা প্রয়োজনীয়।

1.#wrapper{
2.margin:0 auto;
3.overflow:hidden;
4.width:1007px;
5.}

margin:0 auto; এর দ্বারা wrapper এর এলাইনমেন্ট মাঝখানে করা হয়েছে।এটার কারনে যে ব্রাউজারেই ইউজার সাইট ব্রাউজ করুক না কেন,সাইটের সব কিছু মাঝামাঝি দেখাবে।width:1007px; দিয়েছি কারন পিএসডিতে মুল স্ট্রাকচার এর width 1007px. overflow:hidden; এর দ্বারা এই div টি এর ভিতর সব floated div গুলির পাত্র হিসেবে কাজ করবে।কোন div এর ভিতর যদি একাধিক div থাকে এবং এই ভিতরের div গুলিতে যদি float থাকে তাহলে অবশ্যই parent div টির overflow:hidden দিতে হয়।

এবার পিএসডি দেখুন একটা বক্সে সবকিছু রেখেছে যে বক্সটির ব্যাকগ্রাউন্ড সাদা এবং এর উপরের ও নিচের অংশে shadow আছে।সিএসএস ৩ ব্যবহার করে এখন বক্সে shadow দেয়া যায় তবে এটা এখনও সব ব্রাউজার সাপোর্ট করেনা তাই এই প্রজেক্টের ক্ষেত্রে এই বক্সটির তৈরীর কৌশল দেখাচ্ছি।৩ ভাগের একটি বক্স তৈরী করব,বক্সটি এমন হবে যে এর ভিতরে কনটেন্ট বাড়লে বক্সটিও অটোমেটিক বড় হবে।আর বক্সটির উপরে নিচে হুবহু পিএসডি ফাইলের মত shadow থাকবে।

এইচটিএমএল কোড:

1.<div id="main_bg">
2.<div id="bg_top">
3.<div id="bg_bottom"><!--Baki sob div ekhane dite hobe--></div>
4.</div>
5.</div>

প্রথমে main_bg ডিভের ভিতর bg_top ডিভ এবং এই ডিভটির ভিতর bg_bottom ডিভ নিয়েছি।এটাই ৩ ভাগের বক্স বানানোর কৌশল (তবে png ইমেজ হলে এই কৌশলটি একটু ভিন্ন)

ডিভ ৩টির জন্য সিএসএস

01.#main_bg,
02.#bg_top,
03.#bg_bottom{
04.width:1007px;
05.float:left;
06.}
07.#main_bg{
08.background:url(images/main_bg.jpg) repeat-y;
09.}
10.#bg_top{
11.background:url(images/bg_top.jpg) no-repeat top left;
12.}
13.#bg_bottom{
14.background:url(images/bg_bottom.jpg) no-repeat bottom left;
15.padding:10px 0;
16.}

ফটোশপ থেকে স্লাইসিং করে ছবি কেটেছি,images ফোল্ডারে দেখুন bg_top.jpg নামে যে ছবি আছে তা পিএসডির উপর থেকে ১০০৭x৬ পিক্সেলের করে কেটেছি (shadow টুকু নেয়ার জন্য)।এভাবে bg_bottom.jpg কেটেছি।ফটোশপে ছবি কাটা সহজ,Rectangular Marquee Tool বাম থেকে সিলেক্ট করে যতটুকু ছবি কাটতে চান ড্রাগ করে ততটুকু ছবি সিলেক্ট করে Shift+C দিলেই ছবি কপি হয়ে যাবে।এরপর Ctrl+N দিলে নতুন উইন্ডো আসবে এখানে Ctrl+V দিলে ছবিটুকু পেস্ট হয়ে যাবে।সেভ করার জন্য (Save for web) Ctrl+Alt+Shift+S দিলে সেভিং উইন্ডো আসবে এখান প্রয়োজনীয় নামে সেভ করুন।

bg_top ডিভের সিএসএস এ no-repeat top left দেয়াতে ছবিটি main_bg ডিভের উপরে গিয়ে বসে যাবে এবং রিপিট হবেনা।এভাবে bg_bottom কে নিচে দিয়েছি এবং এর padding উপরে নিচে ১০ পিক্সেল দেয়াতে মুল কনটেন্টে থেকে ১০ পিক্সেলের দুরত্ব থাকবে সবসময় (কারন সব কনটেন্ট এখন এই bg_bottom ডিভে থাকবে)।আর প্রথমে main_bg তে পিএসডি থেকে ১০০৭x২ পিক্সেলের একটা সাদা ছবি কেটে রিপিট দিয়েছি অপনি চাইলে ছবি না কেটে ব্যাকগ্রাউন্ড সিএসএস থেকে সাদা দিয়ে দিলেও কাজ হবে।

পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল (PSD to XHTML/HTML) – ফটোশপ থেকে এক্সএইচটিএমএল টিউটোরিয়াল -৩

পৃষ্ঠা 3 মোট পৃষ্ঠা 7

এবার main_background নামে একটা ডিভ নিয়েছি,কারন পিএসডিতে দেখুন সবার নিচে সাদা ব্যাকগ্রাউন্ডের উপরে একটা নীল রংয়ের ব্যাকগ্রাউন্ড আছে।এই ডিভে শুধু main_wrapper নামে একটা ডিভ থাকবে।এটার জন্য সিএসএস

1.#main_background{
2.background-color:#003698;
3.width:990px;
4.margin:0 auto;
5.}

margin:0 auto; দিলে কোন একটা ডিভের এলাইমেন্ট সেন্টারে হয়ে যায়।

এই ডিভের ভিতর main_wrapper ডিভ এর সিএসএস

1.#main_wrapper{
2.width:971px;
3.margin:0 auto;
4.padding:10px 0;
5.overflow:hidden;
6.}

main_background ডিভ থেকে যেহেতু চারদিকে ১০ পিক্সেলের মত জায়গা ফাকা আছে তাই main_wrapper ডিভের width কমিয়ে দুপাশ থেকে নিচের ডিভটির ব্যাকগ্রাউন্ড বের করে আনলাম আর padding দিয়ে উপর নিচ থেকে নিচের ডিভের ব্যাকগ্রাউন্ড বের করলাম।আপনি ইচ্ছে করলে main_background ডিভের padding দিয়ে এটা একবারেই করতে পারেন।

এখন main_wrappper ডিভের ভিতর ৩টি ডিভ নিন।

1.<div id="header"></div>
2.<div id="menu"></div>
3.<div id="container"></div>

এবং ডিভ ৩টির সিএসএস

01.#header{
02.width:971px;
03.height:146px;
04.overflow:hidden;
05.margin:0 auto;
06.}
07.#menu{
08.height:37px;
09.background:url(images/menu_bg.jpg) no-repeat;
10.margin:10px 0;
11.}
12.#container{
13.margin:0 auto;
14.overflow:hidden;
15.}

XHTML করার সময় এটা একটা কৌশল যে আপনি পুরো সাইটকে আগে আনুভূমিকভাবে (Horizontally) কল্পনা করবেন এরপর প্রয়োজন অনুযায়ী ডিভ গুলিকে আপনি উল্লম্বভাবে (Vertically) ভাগ করবেন।যেমন header ডিভে দুটি অংশ আছে প্রথমে লোগো এবং এরপর একটা ছবি।এজন্য এই ডিভটিকে এবার দুভাগ করে দুইদিকে জিনিসদুটি(লোগো এবং ছবি) বসিয়ে দেবো।header ডিভের ভিতর নিচের ডিভ দুটির কোড লিখুন।

1.<div id="logo"><a href="/index.html"><img src="/images/logo.jpg"/></a></div>
2.<div id="header_img"><img src="/images/header.jpg"/></div>

এই ডিভদুটির সিএসএস

01.#logo{
02.width:492px;
03.height:146px;
04.float:left;
05.cursor:pointer;
06.}
07.#header_img{
08.width:479px;
09.height:146px;
10.float:left;
11.}

*এই ডিভদুটির ফ্লট left দিয়েছি তাই এদের parent ডিভ header এর overflow:hidden; দিতে হয়েছে।

ব্যাস header এর কাজ শেষ এবার menu ডিভের কাজ শুরু।যেহেতু এই ডিভে একটা মেনু থাকবে তাই <ul> এবং <li> দিয়ে এখানে একটা মেনু তৈরী করুন।menu ডিভের ভিতরের কোড

01.<ul>
02.<li><a href="#">Home</a></li>
03.<li><a href="#">Meet Lee Green</a></li>
04.<li><a href="#">Coach Lee Media</a></li>
05.<li><a href="#">Duke Basket Ball</a></li>
06.<li><a href="#">Camps and Clinics</a></li>
07.<li><a href="#">Share</a></li>
08.<li><a href="#">Contact Info</a></li>
09.</ul>

menu ডিভে এই কোডটুকু লিখুন।মেনু করার সময় সবসময় খেয়াল রাখবেন যে মেনু স্ট্রাকচার এভাবে একটি ডিভের ভিতর <ul> এরপর <li> এবং এর ভিতর লিংক <a> ট্যাগ দিয়ে করতে হয়।এখন এই মেনুকে পিএসডি ফাইলের মত করতে নিচের সিএসএস লিখুন।

01.#menu ul{
02.}
03.#menu ul li{
04.float:left;
05.}
06.#menu ul li a{
07.font-family:Verdana;
08.font-size:16px;
09.display:block;
10.float:left;
11.padding:10px 15px;
12.text-decoration:none;
13.color:#000;
14.}
15.#menu ul li a:hover{
16.color:#003698;
17.}

এই সিএসএস গুলি খুব ভালভাবে মনে রাখতে হবে কারন মেনু তৈরীর সময় এই ধরনের কোডগুলিই ঘুরেফিরে ব্যবহৃত হয়।মুল কোড #menu ul li a তে লিখেছি, <a> যেহেতু একটা ইনলাইন এলিমেন্ট তাই এটাকে একটা ব্লক লেভেল এলিমেন্ট তৈরীর জন্য display:block; দিয়েছি।এরপর float:left; দেয়াতে floated এলিমেন্ট এর বৈশিষ্ট্য অনুযায়ী বাম দিকে থেকে একটার পর একটা বসে গেছে।#menu ul li এ ফ্লট না দিলেও হবে তবে IE (Internet Explorer) সমস্যা করবে তাই দেয়া হয়েছে।

** উল্লেখ্য যে এই টিউটোরিয়ালে শুধু গুরত্বপূর্ন কোডগুলির ব্যাখ্যা দেয়া হচ্ছে,যেগুলি দিয়ে মুল স্ট্রাকচার টি তৈরী হচ্ছে।সৌন্দর্য আনার জন্য যেসব সিএসএস ব্যবহার করা হয়েছে সেসবের ব্যাখ্যা দেয়া হলনা কারন এগুলি টিউটোরিয়াল সাইটের আগের অধ্যায়গুলিতে দেয়া আছে।

একটা জিনিস লক্ষ্য করেছেন নিশ্চয় যে menu ডিভের সিএসএস এ overflow :hidden; নেই,একটাই কারন এই ডিভে এমন একাধিক ডিভ নেই যেগুলির ফ্লট দেয়া আছে।

পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল (PSD to XHTML/HTML) – ফটোশপ থেকে এক্সএইচটিএমএল টিউটোরিয়াল-৪

পৃষ্ঠা 4 মোট পৃষ্ঠা 7

এবার সাইটের সবচেয়ে গুরত্বপূর্ন ডিভ টি নিয়ে কাজ শুরু হবে।container ডিভ।এই ডিভটির ভিতরে মুলত দুটি ডিভ থাকবে একটা content এবং অপরটি sidebar ডিভ।

1.<div id="container">
2.<div id="content"></div>
3.<div id="sidebar"></div>
4.</div>

container ডিভের সিএসএস

1.#container{
2.margin:0 auto;
3.overflow:hidden;
4.}

content ডিভে ব্যানার সহ এর নিচে যা আছে (পিএসডি ফাইলে) সব থাকবে আর sidebar ডিভে ডানদিকের ছবিগুলি সহ এর নিচে যা আছে।

content এবং sidebar ডিভদুটির সিএসএস

01.#content{
02.float:left;
03.width:662px;
04.margin-right:8px;
05.overflow:hidden;
06.}
07.#sidebar{
08.width:280px;
09.float:left;
10.padding:10px;
11.background:#fff;
12.overflow:hidden;
13.}

এখানে ডিভদুটিতে width দেয়ার সময় হিসেব করে দিয়েছি।ডিভদুটির width যোগ করলে যেন এদের কোন parent ডিভের width  এদের যোগকৃত width এর চেয়ে বেশি না হয় অথবা সমান হতে পারে।৬৬২+২৮০=৯৪২ এটা হচ্ছে ডিভদুটির width.এখন দেখুন এদের parent ডিভের width কত?এদের parent ডিভ হচ্ছে container আর এর কোন width দেয়া নেই অর্থ্যাৎ এখন এই container ডিভ তার যে parent ডিভ আছে তার width টাই তার নিজের width হবে।container এর parent ডিভ হচ্ছে main_wrapper এবং এর width ৯৭০ পিক্সেল।৯৭০-৯৪২=২৮ এখন এই ২৮ পিক্সেল গেল কোথায়?২০ পিক্সেল প্যাডিং এ আর ৮ পিক্সেল মার্জিন।

padding এর এটা একটা নিয়ম যে ডানে বামে (padding-right বা padding-left) যত padding দিবেন তা মুল width থেকে বিয়োগ করতে হবে।sidebar ডিভের padding:10; এর অর্থ হচ্ছে এর চারিদিকে padding আছে তাই মুল width ৩০০ থেকে ২০ বিয়োগ দিয়ে width:280px; করেছি।

এখন content ডিভের কাজ শুরু করা যাক,এখানে মুলত দুটি ডিভ থাকবে banner_holder এবং অপরটি text_holder.প্রথম ডিভে ব্যানার banner.jpg ছবিটি থাকবে আর পরের ডিভটিতে টেক্সটগুলি।content ডিভের ভিতরের ডিভদুটি

1.<div id="banner_holder"></div>
2.<div id="text_holder"></div>

ডিভদুটির সিএসএস

01.#banner_holder{
02.float:left;
03.width:642px;
04.padding:10px;
05.background:#fff;
06.}
07.#text_holder{
08.float:left;
09.width:642px;
10.padding:10px;
11.background:#fff;
12.margin-top:10px;
13.overflow:hidden;
14.}

এখানে কোন নতুন কোড যোগ হয়নি তাই ব্যাখ্যা দিলামনা।শুধু margin-top:10px; আছে।মার্জিনের ব্যাপারে খেয়াল রাখতে হবে যে মার্জিন দিলে ডিভসহ সরে যায় আর প্যাডিং দিলে ডিভের height/width এর সাথে তা যোগ হয়।

banner_holder ডিভের ভিতর শুধু একটা ছবি থাকবে।

1.<div id="banner">
2.<img alt="" src="/images/banner.jpg"/>
3.</div>

banner_holder ডিভের সিএসএস

1.#banner{
2.width:640px;
3.height:265px;
4.}

এবার গুরত্বপূর্ন ডিভ text_holder এর কাজ হবে।এখানে মোট ৫টি ডিভ থাকবে,প্রথম ৪টি ডিভের একই স্টাইল তাই এখান থেকে শুধু একটি ডিভের কোডের ব্যাখ্যা দেব।আর এরপর ৫ম ডিভের ব্যাখ্যা থাকবে।text_holder ডিভের ভিতর ৫টি ডিভ

1.<div class="content_text remove"></div>
2.
3.<div class="content_text"></div>
4.<div class="content_text"></div>
5.<div class="content_text"></div>
6.<div id="pagination"></div>
পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল (PSD to XHTML/HTML) – ফটোশপ থেকে এক্সএইচটিএমএল টিউটোরিয়াল-৫
পৃষ্ঠা 5 মোট পৃষ্ঠা 7

যেহেতু প্রথম ৪টি ডিভে একই স্টাইল দেব তাই ডিভ ৪টির আলাদা আলাদা id না দিয়ে class দিয়েছি এতে করে এই class টির জন্য  সিএসএস লিখলে বাকি সব ডিভগুলিতে এই প্রভাব গিয়ে পড়বে।content_text নামে যে ৪টি ডিভ আছে তাদের প্রতিটিতে নিচের কোড লিখুন।

** এখানে প্রথম ডিভটিতে class দেয়ার সময় content_text এর পর একটি স্পেস দিয়ে remove দিয়েছি।এখন এই remove এমন একটি ক্লাস হিসেবে কাজ করবে যেখানে শুধু আমি ঐ ডিভটির জন্য আলাদা কোন সিএসএস দিতে পারব।এটা এজন্য দিয়েছি কারন content_text ডিভগুলির margin-top:10px; আছে (নিচে content_text এর সিএসএস এ দেখুন) কিন্তু আমার প্রথম ডিভটির মার্জিন সরানো দরকার তাই নিচের সিএসএস দেখুন remove  ক্লাসে margin-top:0!important; করেছি।

01.<div class="date_text">
02.<div class="date">18</div>
03.<div class="month">OCT<br/>2011</div>
04.<div class="auth_text">
05.<p>AUTHOR</p>
06.<a href="#">Mike McAlister</a>
07.<p>COMMENTS</p>
08.<a href="#">3 Comments</a>
09.<img alt="" src="/images/icon.jpg"/>
10.</div>
11.</div>
12.<div class="main_text">
13.<a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
14.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><br/>
15.
16.
17.<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  </p>
18.</div>

content_text এবং এর ভিতর যা কিছু আছে সেসবের জন্য সিএসএস

01..remove{
02.margin-top:0!important;
03.}
04..content_text{
05.float:left;
06.background:#e9eaee;
07.width:622px;
08.padding:10px;
09.margin-top:10px;
10.}
11..date_text{
12.float: left;
13.width:110px;
14.}
15..date{
16.float:left;
17.font-size:48px;
18.font-family:Arial;
19.font-weight:bold;
20.padding-right:3px;
21.}
22..month{
23.float:left;
24.font-size:20px;
25.color:#5a5a5a;
26.font-family:Arial;
27.font-weight:bold;
28.padding-top:4px;
29.}
30..auth_text{
31.float:left;
32.font-family:Verdana;
33.font-size:12px;
34.line-height:20px;
35.border-top:1px solid #a6a6a6;
36.}
37..auth_text p{
38.text-align:left;
39.font-weight:bold;
40.padding-top:5px;
41.}
42..auth_text a{
43.text-align:left;
44.padding-bottom: 10px;
45.display:block;
46.}
47..main_text{
48.width:480px;
49.float:right;
50.background:#fff;
51.padding:10px;
52.text-align:left;
53.}
54..main_text a{
55.color: #2251a6;
56.font-family:Verdana;
57.font-size: 22px;
58.line-height:23px;
59.}
60..main_text p{
61.font-family: Verdana;
62.font-size: 12px;
63.line-height: 20px;
64.padding-top:5px;
65.text-align: left;
66.}

remove ক্লাসটি যেহেতু শুধু প্রথম ডিভে আছে তাই margin-top:0!important; এটি শুধু প্রথম ডিভটির জন্য কাজ করেছে।সিএসএস এ কোন প্রোপার্টিজ এর সামনে !important এভাবে দিলে এই প্রোপার্টিজটি বেশি গুরত্ব পায়।যেমন

.remove{margin-top:0!important;} এটার কারনে শুধু প্রথম ডিভটিতে margin-top শুন্য হয়ে গেছে (যদিও সাধারনভাবে এই ডিভটিরও margin-top:10px; ছিল)।

এখানে অন্যান্য সিএসএস গুলির ব্যাখ্যা সাইটের টিউটোরিয়ালে আছে,উপরেও করা হয়েছে তাই দ্বিতীয়বার ব্যাখ্যা দিলামনা।মুল কাজটি এখানে আসলে এইচটিএমএল বা সিএসএস কোড নয় বরং প্ল্যানিং।আপনি আগে দেখে চিন্তা করবেন এবং সে অনুযায়ী এইচটিএমএল বসানোর পর সিএসএস এ মার্জিন, প্যাডিং, ফ্লট ইত্যাদি দিয়ে স্ট্রাকচার ঠিক করবেন।

pagination ডিভের ভিতরের কোড

01.<a href="#">Page 1 of 22</a>
02.<a href="#">1</a>
03.<a href="#">2</a>
04.<a href="#">3</a>
05.<a href="#">>></a>
06.<a href="#">10</a>
07.<a href="#">20</a>
08.<a href="#">...</a>
09.<a href="#">Last>></a>

pagination ডিভের সিএসএস

01.#pagination{
02.float:right;
03.padding: 18px 0 15px;
04.}
05.#pagination a{
06.border: 1px solid #CBCDD2;
07.padding: 5px;
08.background:#e9eaee;
09.margin: 0 3px;
10.font-family:Verdana;
11.font-size:12px;
12.text-decoration:none;
13.color:#003698;
14.}
15.#pagination a:hover{
16.background:#003698;
17.color:#fff;
18.}

এবার sidebar ডিভের কাজ শুরু।এখানে মোট ৭টি ডিভ থাকবে

01.<div class="advertise remove"><img alt="" src="/images/advert1.jpg"/></div>
02.
03.<div class="advertise"><img alt="" src="/images/advert2.jpg"/></div>
04.<div class="advertise"><img alt="" src="/images/advert3.jpg"/></div>
05.<div id="subscribe">
06.<h2>Weekly Basketball Tips</h2>
07.<p class="sub">For weekly busketball tips please subscribe to us.</p>
08.<div id="subcribe_form">
09.<form action="#" method="post">
10.<input type="text" value="Name:"/>
11.<input type="text" value="Email:"/>
12.<input class="sub_button" type="submit" value="SUBMIT"/>
13.</form>
14.</div>
15.<img alt="" src="/images/icon2.jpg"/>
16.</div>
17.<div id="quotes">
18.<h2>Coach Lee Green Quotes</h2>
19.<p class="quotation">“Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.”  - Lee Green</p>
20.<a class="more" href="#">+More Quotes</a>
21.</div>
22.<div id="news">
23.<h2>Basketball News</h2>
24.<p class="sidebar_date"> 18 oct 2011</p><br/>
25.<a href="#">Lorem ipsum dolor sit amet consect. </a>
26.<p class="sidebar_date">18 oct 2011</p><br/>
27.<a href="#">Lorem ipsum dolor sit amet consect. </a>
28.<p class="sidebar_date">18 oct 2011</p><br/>
29.<a href="#">Lorem ipsum dolor sit amet consect. </a>
30.<p class="sidebar_date">18 oct 2011</p><br/>
31.<a href="#">Lorem ipsum dolor sit amet consect. </a>
32.</div>
33.<div id="stories">
34.<h2>Lee Green Storeis</h2>
35.<a href="#">Time out</a>
36.<a href="#">One of the Most Influential People in </a>
37.<a href="#">My Life</a>
38.<a href="#">Home for Christmas</a>
39.<a href="#">Following my dream</a>
40.<a class="last" href="#">Supporting Ray Mullis</a>
41.</div>

এখানে কোডগুলি ইনডেন্টটেশন করা হয়নি তাই একটু জটিল মনে হতে পারে আসলে এগুলি খুব সহজ।প্রজেক্টের মুল কোডটিতে ভালমত ইনডেন্টটেশন করা আছে,কোন ভাল এডিটরে খুলে দেখলেই বুঝতে পারবেন।

যাইহোক প্রথম ৩টি ডিভ এর আকৃতি একই এবং ভিতরে একটি করে ছবি ছাড়া কিছুই নেই তাই ডিভ ৩টি একই class(advertise) এ নিয়ে এদের এদের জন্য একই সিএসএস দিয়ে দিয়েছি।যেহেতু এখানেও প্রথম ডিভটির মার্জিন উপর থেকে দরকার নেই সুতরাং এখানেও প্রথম ডিভটিতে remove ক্লাসটি জুড়ে দিয়েছি।

পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল (PSD to XHTML/HTML) – ফটোশপ থেকে এক্সএইচটিএমএল টিউটোরিয়াল-৬

পৃষ্ঠা 6 মোট পৃষ্ঠা 7

ডিভগুলির সিএসএস

001..advertise,
002.#subscribe,
003.#quotes,
004.#news,
005.#stories{
006.float:left;
007.width:280px;
008.margin-top:10px;
009.}
010..advertise{
011.height:106px;
012.}
013.#subscribe{
014.background:url(images/subscribe_bg.jpg) repeat-y;
015.height:195px;
016.position:relative;
017.}
018.#subscribe h2,#quotes h2,#stories h2,#news h2{
019.background:#000;
020.color:#bfbfbf;
021.padding:10px;
022.font-family:Verdana;
023.text-align:left;
024.font-size:18px;
025.}
026..sub{
027.color: #FFFFFF;
028.font-family: Verdana;
029.font-size: 14px;
030.padding: 10px 10px 0;
031.text-align: left;
032.}
033.
034.
035.#subcribe_form{
036.float:left;
037.text-align:left;
038.}
039.#subscribe img{
040.position: absolute;
041.right: 5px;
042.top: 94px;
043.}
044..more{
045.float:right;
046.padding-bottom:10px;
047.font-family:Verdana;
048.font-size:12px;
049.}
050.#subscribe input{
051.background: none;
052.border: 1px solid #FFFFFF;
053.color: #FFFFFF;
054.display: block;
055.height: 24px;
056.margin-left: 10px;
057.margin-top: 8px;
058.padding-left: 5px;
059.width: 195px;
060.}
061..sub_button{
062.background:url(images/button_bg.jpg) no-repeat!important;
063.border:none!important;
064.width:84px!important;
065.color:#000!important;
066.font-weight:bold!important;
067.}
068.#quotes{
069.border-bottom:4px solid #000;
070.}
071..quotation{
072.font-family:Verdana;
073.font-size:12px;
074.font-style:italic;
075.line-height:15px;
076.color:#5a5a5a;
077.padding:10px;
078.text-align:left;
079.}
080.#news{
081.border-bottom:4px solid #000;
082.}
083.#news a{
084.display:block;
085.text-align:left;
086.padding-left:23px;
087.font-family:Verdana;
088.color:#5a5a5a;
089.font-size:12px;
090.padding-bottom:10px;
091.}
092..last{
093.padding-bottom:10px!important;
094.}
095..sidebar_date{
096.background: url("images/bullet.jpg") no-repeat 6px 12px;
097.color: #949494;
098.font-family: Verdana;
099.font-size: 11px;
100.padding-left: 20px;
101.padding-top: 10px;
102.text-align: left;
103.}
104.#stories{
105.border-bottom:4px solid #000;
106.}
107.#stories a{
108.background: url("images/bullet.jpg") no-repeat 8px 50% ;
109.color: #5A5A5A;
110.display: block;
111.padding: 6px 0 6px 25px;
112.font-family:Verdana;
113.font-size:12px;
114.text-align:left;
115.}

সিএসএ দেয়ার সময় এখানে কিছু কৌশল অবলম্বন করা হয়েছে এতে করে কোড কমে গেছে।যেহেতু এখানকার সব ডিভগুলির width,float ইত্যাদি একই তাই ডিভগুলির সিলেক্টর এর মাঝে কমা দিয়ে দিয়ে এই কমন প্রোপার্টিজ গুলি দিয়েছি।

এখানে নতুন কোন সিএসএস নেই শুধু পজিশনিং আছে।পজিশনিং করে “হাতের উপর বল ঘুরছে” এই ছবিটি প্রয়োজনীয় স্থানে বসিয়েছি।পজিশন করার সময় এটা খেয়াল রাখতে হবে যে,যখন কোন একটা ছবি বা এলিমেন্ট কে কোন ডিভের নির্দিষ্ট জায়গায় নিয়ে যাওয়ার প্রয়োজন হবে তখন ঐ ডিভটির পজিশন relative দিবেন এবং যেটা সরাতে চাচ্ছেন সেটার পজিশন absolute করে দিলে এই এলিমেন্টটিকে এখন এই ডিভটির (যেটার পজিশন relative করলেন) সাপেক্ষে top,right ইত্যাদি প্রোপার্টিজ দ্বারা উপরে নিচে সরানো যাবে।

পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল (PSD to XHTML/HTML) – ফটোশপ থেকে এক্সএইচটিএমএল টিউটোরিয়াল -৭

পৃষ্ঠা 7 মোট পৃষ্ঠা 7

সবশেষে footer ডিভটি wrapper ডিভটির বাইরে দিয়ে দিন।

1.<div id="footer">
2.<p>&copy; Copyright 2011 Coachleegreen.com. All rights reserved.</p>
3.</div>

footer ডিভের সিএসএস

1.#footer{
2.width:100%;
3.color:#5a5a5a;
4.font-family:Verdana;
5.font-size:12px;
6.padding:10px 0 21px 0;
7.}

কাজ শেষ ,সব যদি ঠিকমত এতক্ষন করে থাকেন তাহলে   index.html ফাইল রান করালে পিএসডি ফাইলের মত এইচটিএমএল ওয়েব পেজটি পাবেন।কোথাও বুঝতে সমস্যা হলে ফোরামে প্রশ্ন করুন।

আরেকটি বিষয় বাদ আছে তাহল পিএসডি ফাইলের মত পেজের ব্যাকগ্রাউন্ড আনতে একটা ছবি (images ফোল্ডারে দেখুন ব্যাকগ্রাউন্ড এর জন্য body_bg.jpg নামে একটা কত ছোট ছবি কেটেছি) কেটে সিএসএস এ  body সিলেক্টরে ছবিটি ব্যাকগ্রাউন্ড দিয়ে রিপিট দিয়েছি।

শেষ নির্দেশনা:

** আসলে টিউটোরিয়ালটি আমি যেভাবে লিখেছি,নিজে কাজটি করার সময় সেভাবে করিনি।আমি প্রথমে প্লান করে মুল কয়েকটি ডিভে ভাগ করেছি এরপর সিএসএস এ প্রয়োজন মত ফ্লট,মার্জিন,প্যাডিং,ওভারফ্লো ইত্যাদি দিয়ে ঠিক করেছি।আপনিও তাই করুন অর্থ্যাৎ প্লান করুন,ভাবুন এরপর সিএসএস দিয়ে স্টাকচার দাড় করান।এই দৃষ্টিভঙ্গি থেকে দেখলে আসলে এই টিউটোরিয়ালটি অপ্রয়োজনীয় শুধুমাত্র যে কৌশলগুলি আলোচনা করা হয়েছে সেগুলি ছাড়া।

**স্লাইস করার নিয়ম:ফটোশপে বামদিকে টুলবার থেকে Slice tool সিলেক্ট করলে এখানে দুটি অপশন আছে (সিলেক্ট করে একটু নিচের দিকে ড্রাগ করলে অপশন দুটি দেখায়)।দ্বিতীয় অপশনটি (Slice Select Tool) সিলেক্ট করলে পিএসডি ফাইলে নিচের মত একটি সাদাকালো চারকোনা ছোট বক্স দেখাবে।

psd to xhtml slice

এখানে রাইট বাটন ক্লিক করে Promote to User Slice  এ ক্লিক করে পিএসডি ফাইলে যেকোন জায়গা ক্লিক করুন তাহলে পুরো পিএসডি ফাইলটি খয়েরি রঙ্গের একটি বর্ডারের ভিতর চলে আসবে।

এই বর্ডারটি মাউস দিয়ে ড্রাগ করে করে স্লাইস করতে হয়।যেমন আমার স্লাইস করা ফাইলটি দেখবেন ১ নম্বর স্লাইসটি উপর থেকে মাত্র কয়েক পিক্সেল নিচে এনে ছেড়ে দিয়েছি (যেখান থেকে shadow শুরু হয়েছে তার আগ পর্যন্ত)।এরপর সাদাকালো চারকোনা বক্সটি যেখানে এসেছে সেখানে রাইট বাটন ক্লিক করে আবার Promote to User Slice এ ক্লিক করে আরেকটি স্লাইস করুন এভাবে বাকিগুলি।স্লাইসিং খুব সহজ,বুঝতে সমস্যা হলে ইউটিউবে সার্চ দিয়ে ২/১ টি টিউটোরিয়াল দেখে নিতে পারেন।

** পিএসডি ফাইল ফটোশপে খুলে Ctrl+H দিয়ে স্লাইসিং উঠাতে পারেন এবং একইভাবে আবার স্লাইসিং আনতে পারেন।

**w3 validator এ গিয়ে এক্সএইচটিএমএল এবং সিএসএস ভেলিডেটরে যথাক্রমে index.html এবং style.css ফাইলদুটি আপলোড করে কোডে কোন ভুল আছে কিনা দেখতে পারেন।

XHTML ভেলিডেশন http://validator.w3.org/

CSS ভেলিডেশন jigsaw.w3.org/css-validator/

ধন্যবাদ।

Leave a comment

Blog at WordPress.com.