Tag Archive for সিএসএস (CSS)

সিএসএস কি? [পর্ব-০১]

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

টেক্সট এলাইনমেন্ট (Text Alignment): সি এস এস (পর্ব-১১)

ওয়েব পেজে টেক্সটকে সাজানোর জন্য টেক্সট এলাইনমেন্ট ব্যবহার করা হয়। টেক্সটকে পেজের বাম পাশে রাখার জন্য Declaration করতে হবে text-align:left; অনুরূপভাবে ডান পাশে রাখার জন্য Declaration করতে হবে text-align:right; মধ্যস্থানে রাখার জন্য Declaration করতে হবে text-align:center; । যদি টেক্সট এর প্রতিটা লাইন একই আকারে সাজাতে চাই তাহলে Declaration করতে হবে text-align:justify । অনুশীলন প্রজেক্ট <html>…

টেক্সট (Text) : সি এস এস (পর্ব-১০)

ওয়েব সাইটের প্রধান উপাদান হচ্ছে টেক্সট। সৌন্দর্য বৃদ্ধির জন্য এবং বিশেষ কিছু সুবিধা পাবার জন্য css এর মাধ্যমে টেক্সট এর স্টাইল তৈরি করা হয়। টেক্সট এর স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে টেক্সট কালার (Text Color) টেক্সট এলাইনমেন্ট (Text Alignment) টেক্সট ডেকরেশন (Text Decoration) টেক্সট ট্রান্সফরমেশন (Text Transformation)…

ব্যাকগ্রাউন্ড (Background) : সি এস এস (পর্ব-৯)

ওয়েবপেজের বিভিন্ন উপাদান যেমন Body, Pragaph, Table ইত্যাদির জন্য ব্যাগ্রাউন্ড একটি অপরিহার্য উপাদান।এ সকল উপাদান সমূহের ব্যাকগ্রাউন্ড হিসেবে কালার অথবা ইমেজ ব্যবহার করা্ যায়। ব্যাকগ্রাউন্ড হিসেবে কালার ব্যবহার ব্যাকগ্রাউন্ড হিসেবে কালার ব্যবহারের জন্য Declaration হতে পারে background:#900; অথবা background-color:#900; । যেমন body{ background-color:#900; } । ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহার ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহারের জন্য Declaration…

এক্সটার্নাল স্টাইল শীট : সি এস এস (পর্ব-৭)

এ পদ্ধতিতে সি এস এস এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ আলাদা স্ক্রিপ্টে রাখা হয় এবং স্ক্রিপ্টটিকে বা স্টাইল শীটটিকে style.css বা এর অনুরূপ নামে save করা হয়। <head>………….</head> এর মধ্যে <link rel=”stylesheet” type=”text/css” href=”css.css”> যুক্ত করে এক্সটার্নাল স্টাইল শীট এর সাথে এইচ টি এম এল এর লিংক তৈরি করা হয়।     অনুশীলন…

ইমবেডেড স্টাইল শীট : সি এস এস (পর্ব-৬)

এইচ টি এম এল এর সাথে সি এস এস যুক্ত করার বিষয়টি খুবই গুরুত্বপূর্ণ। এইচ টি এম এল এর সাথে সি এস এস যুক্ত করার জন্য তিনটি পদ্ধতি রয়েছে। যথা ইমবেডেড স্টাইল শীট ইন-লাইন স্টাইল শীট এক্সটার্নাল স্টাইল শীট ইমবেডেড স্টাইল শীট এ পদ্ধতিতে <head>………….</head> এর মধ্যে <style>..</style> বা স্টাইল ট্যাগ ব্যাবহার করা হয়। এবং…

কোড লেখার পদ্ধতি : সি এস এস (পর্ব-৫)

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। সি এস এস এর  জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaver ব্যবহার করলে কাজ অনেক সহজ হয়ে যাবে। সি এস এস Syntax সি এস এস syntax…

আইডি সিলেক্টর: সি এস এস-(পর্ব-৪)

CSS এ ওয়েব পেজের কোন অংশ বা কোন উপাদানকে নির্দিষ্টভাবে চিহ্নিত করার একটি জনপ্রিয় পদ্ধতি আইডি সিলেক্টর । একাধিক উপাদানকে ক্লাস সিলেক্টর এর মত একই আইডি সিলেক্টর দ্বারা চিহ্নিত করা যায় না। যেমন <p id="post1"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.  information.…

ক্লাস সিলেক্টর: সি এস এস-(পর্ব-৩)

CSS এ ওয়েব পেজের কোন অংশ বা এক বা একাধিক উপাদানকে নির্দিষ্টভাবে চিহ্নিত করার একটি অন্যতম পদ্ধতি ক্লাস সিলেক্টর । একাধিক উপাদানকে একই ক্লাস সিলেক্টর দ্বারা চিহ্নিত করা যায়, তাই এটি কোডিং এর পরিমাণ হ্রাস করতে সাহায্য করে। যেমন <p class=”mar”> 24 / 7 Support</p> এর জন্য css কোড .mar{color: #C03; font-size:36px} ক্লাস সিলেক্টর নির্দেশ…

আপনি কি বাংলা ভাষায় সি এস এস এর পূর্ণাঙ্গ টিউটোরিয়াল খুঁজছেন?

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

ট্যাগ সিলেক্টর : সি এস এস-(পর্ব-২)

CSS এর মাধ্যমে HTML দ্বারা তৈরি করা ওয়েব পেজের বিভিন্ন অংশকে নির্দিষ্ট করে গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণ করা হয়। HTML দ্বারা তৈরি ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করার জন্য সিলেক্টর ব্যবহার করা হয়। CSS এ বেশ কয়েক ধরণের সিলেক্টর ব্যবহার করা হয় । এ গুলোর মধ্যে উল্লেখযোগ্য হচ্ছে …. ট্যাগ…

সিএসএস কি এবং কেন?- সি এস এস(পর্ব-১)

Cascading Style Sheets এর সংক্ষিপ্ত রূপ হচ্ছে CSS । সহজ ভাষায় ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণের সহজ কৌশল হচ্ছে CSS । সিএসএস কেন প্রয়োজন? একটা সময় ছিল যখন শুধুমাত্র HTML দিয়েই একটি ওয়েব সাইটের ডিজাইন করা হত । সে সময়ে ডিজাইন বলতে একটা ওয়েব পেজের বিভিন্ন ফন্ট এর…

নেভিগেশন বার তৈরি করুন খুব সহজেই

আপনি যদি একজন ভালো ওয়েব ডিজাইনার হতে চান তাহলে আপনাকে ভালো গ্রাফিক্স ডিজাইন জানার পাশাপাশি HTML, CSS, Javascript এবং jquery জানতে হবে। একটা ভালো ডিজাইনের টেমপ্লেট তৈরির ক্ষেত্রে নেভিগেশনের ফাংশন এবং এর ডিজাইন খুবই গুরুত্ব সহকারে বিবেচনা করতে হয়। যে কেউ সমান্য চেষ্টা করলেই খুব সহজেই HTML, CSS শিখতে পারেন, আর একটু সময় নিয়ে Javascript…

CSS 3 দিয়ে Gradient এর ব্যাবহার

ফটোশপে কাজ করেছেন অথচ Gradient এর নাম শোনেন নি। এমন কেউ থাকতে পারে বলে আমি বিশ্বাস করি না। এই সুবিধা এখন শুধু CSS ব্যাবহার করেই পাওয়া যাবে। তাই ভাবলাম এই নিয়ে একটা টিউটোরিয়ল লিখি। সামনের টিউটোরিয়ার গুলোতে এর ব্যাবহার বুঝতে পারবেন। ১. Linear Gradient এইটাতে ওপরে একটা এবং নিচে একটা রং। ব্যবহৃত CSS: -webkit-gradient(linear, left…

CSS দিয়ে আরও কয়েটা টেক্সটা স্টাইল

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