বেশি কিছু না সিএসএস CSS এর ১০টি টিপস দেখুন

কারনে অকারনে ছেলেবেলায়, ছাত্র জীবনে আর চাকুরী জীবনে বক্তব্য শুনতে হয়েছে অনেকবার। একটা কথা শুনেছি বেশি-তা হচ্ছে -"বেশি কিছু বলবো না" যারা এই কথা দিয়ে বক্তব্য শুরু করে তাদের বক্তব্যই বিরক্তকর লম্বা হয়। যাই হোক কিছুদিন আগে CSS টিউটরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)এর মাধ্যমে যে টিউটরিয়ালগুলো শুরু করেঝিলাম তা অনেকটা শেষ পর্যায়ে এসে পরেছে। এই সময়ে নতুন কোন আইডিয়ার দিকে হাত না বাড়িয়ে টিপসের দিকেই মনোযোগ দেই।

আগেই সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) এর মধ্যমে কোড লেখার প্রাথমিক পদ্ধতির কথার ফাকে অনেক গুরুত্বপূর্ণ কথাই বাদ পরে গেছে তার একটা অংশও আজ আলোচনা করবো। কথায় কথা না বাড়িয়ে শুরু হোক মূল আলোচনা

১. শর্ট হ্যান্ড কোডিং

কোড লিখুন শর্ট হ্যান্ডে এতে দ্রুত কাজ হয় যেমন-

/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}

h1 {margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em;}

/* BORDER */
h1 {border:1px solid #000;}

h1 {border-width:1px; border-style:solid; border-color:#000;}

/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}

h1 {border-top-width:1px; border-right-width:2px; border-bottom-width:3px; border-left-width:4px;}

/* BACKGROUND */
div	{background:#f00 url(background.gif) no-repeat fixed 0 0;}

div	{background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;}

/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande", sans-serif;}

h1 {font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande", sans-serif;}

/* LIST STYLE */
ul {list-style:square inside url(image.gif);}

ul {list-style-type:square; list-style-position:inside; list-style-image:url(image.gif);}

/* OUTLINE */
h1 {outline:#f00 solid 2px;}

h1 {outline-color:#f00; outline-style:solid; outline-width:2px;}

২. classএবং id 'র সঠিক ব্যবহার পদ্ধতি

id প্রকাশের ক্ষেত্রে # এবং class প্রকাশের ক্ষেত্রে. ব্যবহৃত হয়। এর যথাযথ ব্যবহার নিশ্চিত করুন।

৩. টেবিলের ব্যবহার ভুলে যান

টেবিল ব্যবহারের অনেক গুলো অসুবিধা আছে যা পরে বলবো। আপাতত: জেনে রাখুন, টেবিল অনেক স্লো এবং এর ব্যবহারে চেয়ে div ব্যবহার করুন।

৪. সিএসএস টুলের ব্যবহার

সিএসএস ভুলগুলো শুধরে নিন নিচের টুলগুলো ব্যবহার করে।
সিএসএস টুলের ব্যবহার

FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.

৫.!important এর ব্যবহার

আপনার মনে হতে পারে কোন কোড পরিবর্তনে সমস্যা হতে পারে সেই কোডের সাথে জুরে দিন!important ঠিক এইভাবে-.page {background-color:blue!important; background-color:red;}

৬. সিএসএস দিয়ে ফর্ম ডিজাইন করা

সিএসএস দিয়ে ফর্ম ডিজাইন করুন

৭. লিঙ্ক ও টেক্সট বক্সের হাইলাইট বন্ধ করুন

a, input {outline:none;}

৮. লিঙ্কের সৌন্দর্য বর্ধনের ব্যবস্থা করুন

নিচের মতো করে লিংকের ডিজাইন করুন
a:link {color: #000;
text-decoration: underline}
a:visited {color: #666;}
a:hover {color: #333;
text-decoration: none;}
a:active {color: #333;
text-decoration: none;}

a, input {outline:none;}

৯. একসাথে কোডিং করুন যেমন-

h1, h2, h3, h4, h5, h6 {font-family:arial;
margin:0.5em 0;
padding:0;}

১০. সিএসএস এর উপর অনলাইনে পড়ালেখা করুন

পড়ালেখার নাকি বিকল্প নেই। তাই পড়ালেখা করুন নিচের সাইটগুলো দেখুন

সিএসএস টিউটরিয়াল সূচিপত্র:

কৃতজ্ঞতা
hongkiat
queness

Level 0

আমি টিউটো। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 66 টি টিউন ও 476 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

তিনি দীর্ঘ দিন ধরে সাফল্যের সাথে টিটোরিয়াল বিডি ব্লগটি পরিচালনা করে আসছেন। বর্তমানে ব্লগিং এর পাশাপাশি একটি বেসরকারী প্রতিষ্ঠানে চাকরি করছেন। http://www.facebook.com/#!/mahbubpalash http://twitter.com/tuto_mahbub


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

খুবই ভাল লাগলো এই টিউন দেখে………………….
বহুদিন দরে এই রকম কিছু টিউন খুজতে ছিলাম………
আপনাকে অশেষ ধন্যবাদ।

    আপনাকেও ধন্যবাদ। আশা করি নিয়মিত টেকটিউনসের সাথে থাকবো।

    ভাই সুন্দর খুব ভালো ধন্যবাদ
    খুব ভালো ধন্যবাদ
    কেমন আছেন সবাই? নিশ্চই ভাল। আজ আমি আপনাদের কে মজার লিং শেয়ার করব। আশাকরি আপনাদের সবার এই লিং ি কাজে লাগবে। এই লিং ব্যবহার করে আপনারা অনেক কাজ করতে পারবেন। নিচে লিং গুলো লেখা হল- Today i find excellent web site name is http://www.moonbd.com

Level 0

আরো চাই….

সি এস এস শিখতে চাই।তাই আপনার লেখাটা চালিয়ে যান।

    আমিও শিখছি , শেখাচ্ছি না। যা শিখছি তা লিখছি।..সাথে থাকুন..শিখতে পারবো..হয়তো

Level 2

টিউটো ভাই নতুন CSS এবং DIV এর কাজ শিখেছি কিন্তু থিম বানাতে গেলে কিছু সমস্যায় পরছি। যেমন থিম এক এক ব্রাউজারে এক এক রকম লেআউট দেখাচ্ছে।

    আমার মনে হয় প্রথমে ছোট ছোট প্রজেক্ট নিয়ে কাজ শুরু করা উচিত। ব্রাউজারভেদে ভিন্নতার ব্যাপারে একটি পোস্ট করতে পারি।

    Level 2

    টিউটো ভাই খুব দ্রুত টিউনটি আশা করছি।

ধন্যবাদ । css এর উপর কিছু advance টিউন চাই।
“!important এর ব্যবহার” এই ব্যপারটা বুঝলাম না। একটু ব্যখ্যা করবেন please.
চালিয়ে যান ……………………..আপনার জন্য শুভকামনা।

    শহীদ বলেন: ( http://tutorialbd.com/bn/?p=3191 )
    Font-size এর বিভিন্ন unit এর মধ্যে সম্পর্ক জানার জন্য এই লিংকটি দেখুন।
    আর !important যেই style টার সাথে দেয়া হবে display এর ক্ষেত্রে সেটাকেই অগ্রাধিকার দেয়া হবে। যেমন উপরের example এর ক্ষেত্রে background-color red না দেখিয়ে blue দেখাবে। এক্ষেত্রে সুবিধা হচ্ছে আপনার পরবর্তীতে red color দেখানোর প্রয়োজন হলে !important টার্মটি red এর সাথে জুড়ে দিন। ফলে Code পরিবর্তনের ঝামেলা কমে গেল।

ধন্যবাদ । ভাল টিয়নস। আমার কাজের টিউনস।

    আমিও চেস্টা করছি…আপনাকে ধন্যবাদ।

Good post for the web developers.thanx..

খুব সুন্দর হয়েছে । ধন্যবাদ

CSS3 এর মজা দেখার জন্য ভিজিট করুন http://l4a.in/0m1i3v

পিএইচপি নিয়া কেউ কি দয়া করে সহজ ভাষায় কয়েকটা পোস্ট দিবেন? পিএইচপি নিয়া ঝামেলায় আছি।

Level 0

ভাল্লাগলো ভাই আফনের এই টিউনডা৷ খাইবেন কিছু???

মাইনডে লয়েননা৷ মজা করলাম৷

CSS শিখতেছি। দেখি টিউনটা টা থেকে কি কি কাজ শেখা যায়। 😀

Level 0

very good job man…………

css জিনিসটাই বুঝি না কি শিখমু?

হুম দেখলাম হালকা পাতলা শিখলাম টিউটো ভাইয়েরে মনে মনে ধন্যবাদ কইলাম।

Level 0

হুম, আমার মতে একটা সাইট/ ব্লগের লুকিং যেহেতু সিএসএস এর উপর নির্ভরশীল, তাই এর গুরুত্ব অনেক

ধন্যবাদ টিউনটি করার জন্য।