ADs by Techtunes ADs
ADs by Techtunes ADs

ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৯] :: সিএসএস কি, কেন? সিএসএস শেখার পূর্বপ্রস্তুতি

আসসালামু আলাইকুম । কেমন আছেন সবাই? আশা করি মহান আল্লাহ্‌ তা'আলার অশেষ রহমতে ভাল আছেন? আমিও আলহামদুলিল্লাহ্‌ ভাল আছি ।

ADs by Techtunes ADs

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

সিএসএস (CSS) এর পূর্ণরূপ হচ্ছে Cascading Style Sheets. সিএসএস এর সাহায্যে ওয়েবপেইজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, রং ইত্যাদি নির্ধারণ করা হয় । ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) নামে একটি অলাভজনক প্রতিষ্ঠান ১৭ ডিসেম্বর ১৯৯৬ সালে সিএসএস ডেভেলপ করেন ।

এইচটিএমএল এর সাহায্যে একটি ওয়েবপেইজের কাঠামো তৈরি করা যায় ।  কিন্তু, ওয়েবসাইট ডিজাইনের জন্য এইচটিএমএল-ই যথেষ্ট নয় । ওয়েবপেইজের ডিজাইন সিএসএস ছাড়া সম্ভব নয় । অর্থাৎ, সিএসএস ছাড়া এইচটিএমএল দ্বারা তৈরিকৃত একটি সাইট মানুষের কঙ্কালের মত দেখাবে । পূর্ণাঙ্গ ওয়েবসাইট তৈরি করতে অবশ্যই সিএসএস জানতে হবে । কিছু সিএসএস কোড পরিবর্তনের মাধ্যমে সমস্ত সাইটের ডিজাইন পরিবর্তন করা যায় ।  তবে, শুধু সিএসএস এর মাধ্যমে ওয়েবসাইট তৈরি করা যায় না । প্রথমে, এইচটিএমএল এর মাধ্যমে সাইটের কাঠামো অর্থাৎ গঠন তৈরি করা হয় । অতঃপর, সিএসএস এর মাধ্যমে সাইট ডিজাইন করা হয় । এটা মুলত ওয়েবসাইটের ডিজাইন টুল হিসেবে কাজ করে । এইচটিএমএল এর সাথে সিএসএস শিখলে একটি পূর্ণাঙ্গ স্ট্যাটিক ওয়েবসাইট তৈরি করা সম্ভব । সিএসএস শেখা শেখা তেমন কোন কঠিন কিছু নয় ।

সিএসএস শেখার প্রয়োজনীয়তা

ওয়েব ডিজাইন & ডেভেলপমেন্ট শেখার ক্ষেত্রে সিএসএস শেখার প্রয়োজনীয়তা অপরিসীম । এছাড়া, সিএসএস এর কিছু বিশেষ সুবিধা রয়েছে;

সময় বাঁচাতে সিএসএসঃ এইচটিএমএল এ একটি পেইজ ডিজাইন করতে যেখানে হাজার হাজার লাইন লিখতে হয় সেখানে সিএসএস এর মাধ্যমে মাত্র কয়েকটি লাইন লিখে একটি পেইজ ডিজাইন করা যায় এবং আপনার ওয়েবসাইট এ যতগুলো পেইজ থাকুক না কেন আপনি একটি মাত্র কোড ব্যবহার করে সমস্ত সাইট ডিজাইন করতে পারবেন যা এইচটিএমএল দ্বারা সম্ভব নয় ।

দ্রুত পেইজ লোডঃ আপনি যদি ওয়েবপেইজ এ সিএসএস ব্যবহার করেন তাহলে আপনাকে এইচটিএমএল ট্যাগ এর অ্যাট্রিবিউটগুলো বার বার ব্যবহার করতে হবে না । আপনি শুধু সিএসএস এর মাধ্যমে ট্যাগসমূহের ডিজাইন নির্ধারণ করে দিবেন তাহলেই তা সকল পেইজ এ প্রয়োগ হবে । এতে আপনার ওয়েবসাইটে কোডিং এর পরিমান অনেক কমে যাবে & দ্রুত সাইট লোড হবে ।

নিয়ন্ত্রন সুবিধাঃ এইচটিএমএল ট্যাগ এর মাধ্যমে প্রতিটি অ্যাট্রিবিউট এর ডিজাইন নির্ধারণ করে দিতে হয় । ফলে, পরিবর্তন করার সময় প্রতিটি অ্যাট্রিবিউট এ পরিবর্তন করতে হয় । কিন্তু সিএসএস এর মাধ্যমে মাত্র একটি কোড পরিবর্তন করে সমস্ত সাইটের ডিজাইন পরিবর্তন করা যায় । অর্থাৎ, ওয়েবসাইট এর ডিজাইন সহজে নিয়ন্ত্রন করা যায় ।

ব্যবহার উপযোগীঃ সিএসএস সব ধরনের ডিভাইস এ ব্যবহার উপযোগী । সিএসএস এর মাধ্যমে ওয়েবসাইটের কন্টেন্টগুলোকে অপটিমাইজ করে সব ধরণের ডিভাইসে ব্যবহারের উপযোগী করা যায় । যা এইচটিএমএল দ্বারা সম্ভব নয় ।

সিএসএস শেখার পূর্বপ্রস্তুতি

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

ADs by Techtunes ADs

নোটপ্যাড প্লাস প্লাস (Notepad ++) ডাউনলোড করতে এখানে ক্লিক করুন ।

এছাড়া, সিএসএস এ কালার কোড বেশ গুরুত্বপূর্ণ । সব ধরণের কালার কোড মনে রাখা সম্ভব নয় । তাই, কালার কোড জানার জন্য Pixie Color Picker ব্যবহার করতে পারবেন । এই সফটওয়্যার এর মাধ্যমে আপনি অনায়াসে-ই যেকোনো কালার কোড জানতে পারবেন ।

পিক্সি কালার পিকার (Pixie Color Picker) ডাউনলোড করতে এখানে ক্লিক করুন ।

আজকের টিউটোরিয়ালটি এখানেই শেষ করছি । টিউটোরিয়ালটি ভাল লাগলে কমেন্ট এর মাধ্যমে জানাবেন । সিএসএস সম্পর্কিত কোন প্রশ্ন থাকলে কমেন্ট করবেন । আমি উত্তর দেওয়ার চেষ্টা করবো - ইনশাল্লাহ্‌ ।

আজকের সেলফ ওয়ার্ক

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

১ । সিএসএস কি?

২ । সিএসএস কেন ব্যবহার করা হয়?

৩ । এইচটিএমএল শেখার পর কি শিখতে হয়?

৪ । সিএসএস শেখার আগে কি শিখতে হবে?

৫ । সিএসএস শিখতে কি কি লাগবে?

ADs by Techtunes ADs

যদি কোন প্রশ্নের উত্তর দিতে সমস্যা হয় তাহলে আমাকে কমেন্ট এর মাধ্যমে জানাবেন ।

ওয়েব ডিজাইন টিউটোরিয়াল এর ৯ম এখানেই শেষ করছি । আগামী টিউটোরিয়াল এ থাকছে;

আমার ফেইসবুক আইডিঃ এখানে

ধন্যবাদ সবাইকে আমার আজকের টিউটোরিয়ালটি মনোযোগ সহকারে পড়ার জন্য । ভাল থাকবেন সবাই । আল্লাহ্‌ হাফেজ ।

ADs by Techtunes ADs
Level 0

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 7 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


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


টিউমেন্টস

১।সিএসএস (CSS) এর পূর্ণরূপ হচ্ছে Cascading Style Sheets. সিএসএস এর সাহায্যে ওয়েবপেইজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, রং ইত্যাদি নির্ধারণ করা হয়।
২।সিএসএস এর মাধ্যম একটি সাইটের পরিপূর্ণ ডিজাইন করা যায়।
৩।এইচ টি এম এল শিখার পর সিএসএস শিখতে হয়।
৪।সিএসএস শেখার আগে এইচটিএমএল শিখতে হয়।
৫।একটি টেক্সট এডিটর ,একটি ইন্টারনেট ব্রাউজার (যেমন; মোজিলা ফায়ারফক্স, গুগল ক্রোম, অপেরা ইত্যাদি),পিক্সি কালার পিকার (Pixie Color Picker)

খুব ভালো। কিন্তু কিছু অজানা থেকে গেল,আপনার সাহায্য পাব আশা করি। চালিয়ে যান।

great

1. Cascading Style Sheet (CSS) is a StyleSheet Language used for describing the look and formatting of a document written in markup language( example: HTML[Hyper Text Markup Language], XML/xhtml etc.)
2. Use CSS to define style for your documents, including the design, layout and variations in display for different devices and screen sizes.
3. You Must have to learn CSS.
4. supposed to you, learn HTML (Hyper Text Markup Language)
5. of course, You need a text editor, like notepad and a Internet Browser, like Firefox, Chrome etc. Optional, you need, notepad++ or adobe dreamweaver etc. and Color Picker liker pixie, http://www.colorpicker.com for online color pick.

A Lot Of Thanks For Give Me A Nice Tutorial.