বেশি কিছু না, সিএসএস (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;
}

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

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

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

CSS টিউটরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)

সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) CSS পাঠ-২

ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা

সুন্দর সুন্দর বক্স মডেল

সহজেই বানিয়ে ফেলি ছবির গ্যালারী

বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস

৭ টি সিএসএস গরম মসলা
কৃতজ্ঞতা
hongkiat
queness

8 thoughts on “বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস দেখুন:সিএসএস টিউটরিয়াল-৫”

  1. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » ৭ টি সিএসএস গরম মসলা

  2. আরমানের সমস্যার সমাধানটা দেয়ার জন্য ধন্যবাদ। আশা করি আপনি টিউটরিয়ালবিডিতে লিখবেন। আশা করি আমরা বাংলা ভাষায় মানসম্পন্ন শিক্ষাদানে ভাল অবস্থান রাখতে পারবো।

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

  3. ভাইয়া,em ভ্যালু বলতে আসলে কি বুঝায় ? আর !important কি কাজ করে ঠিক বুঝতে পারলাম না…

    1. @আরমান, Font-size এর বিভিন্ন unit এর মধ্যে সম্পর্ক জানার জন্য এই লিংকটি দেখুন।
      আর !important যেই style টার সাথে দেয়া হবে display এর ক্ষেত্রে সেটাকেই অগ্রাধিকার দেয়া হবে। যেমন উপরের example এর ক্ষেত্রে background-color red না দেখিয়ে blue দেখাবে। এক্ষেত্রে সুবিধা হচ্ছে আপনার পরবর্তীতে red color দেখানোর প্রয়োজন হলে !important টার্মটি red এর সাথে জুড়ে দিন। ফলে Code পরিবর্তনের ঝামেলা কমে গেল।

    2. @আরমান,
      em বলতে emphasis বুঝায়। HTML-এ যাকে আপনি i দিয়ে লিখবেন। এর মানে হচ্ছে italics . অর্থাৎ লেখাকে বাঁকা করে দেখানোর জন্যে এটা ব্যবহৃত হয়।

      1. @saklayee,শহীদ, আপনাদের মতামতের জন্য ধন্যবাদ, সময়ের অভাবে অনেক প্রশ্নেরই উত্তর দিতে পারি নি। আপনারা কাছে থাকলে এ সমস্যা হবে না।

Comments are closed.