বাংলা আমার প্রযুক্তির ভাষা
সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো লাইন হাইট এবং টেক্সট ইনডেন্ট নিয়ে। তো চলুন… Line Height: একটি প্যারাগ্রাফ বা একাধিক লাইনের মধ্যে (টপ টু বোটম) স্পাসিং/ফাঁকা রাখার জন্য line-height প্রোপার্টি ইউজ করা হয় এবং ভ্যালু হিসেবে length measurement (px/in etc)/percentage (10% etc) অ্যাপ্লাই করতে হবে। মনে রাখতে হবে, কোন ইলিমেন্টের লাইন হাইট উক্ত ইলিমেন্টের ফন্ট […]
সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো টেক্সট এ্যালাইনমেন্ট নিয়ে। তো চলুন… Horizontal Text Alignment: কোন প্যারাগ্রাফ বা লাইনে ডান থেকে বায়ে লিখাকে পদবিন্যাস বা এ্যালাইন করাই হছে হরিজন্টাল এ্যালাইনমেন্ট। পদবিন্যাস করতে text-align প্রোপার্টি এবং ভ্যালু হিসেবে left/right/center/justify ব্যবহার করতে হবে। কোন ইলিমেন্টে এর ফন্ট স্টাইল দিতে নিচের স্টাইলটি অ্যাপ্লাই করতে হবেঃ [html]<html> <head> <style type=”text/css”> […]
সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো List নিয়ে। লিস্ট অর্থ তালিকা। এইচটিএমএল এ ৩ ধরনের লিস্ট রয়েছে। যেমনঃ ১. Ordered list, ২. Unordered list এবং ৩. Definition list. Ordered list গুলোর ক্রম হচ্ছে সংখ্যাবাচক যেমনঃ 1, 2, 3 বা এ্যালফাবেটিক যেমনঃ A, B, C বা a, b, c বা রোমান স্টাইল যেমনঃ i, ii, iii […]
সিএসএস সিলেক্টর নিয়ে ২এ পর্বে স্বাগতম। এই পর্বে আলোচনা করবো আইডি এবং ক্লাস সিলেক্টর নিয়ে। তো চলুন… ID Selector: সিএসএস ID Selector “#” (হ্যাশ) সাইন সাথে কোন একটি সিঙ্গেল স্ট্রিং(ওয়ার্ড) বা ডাবল স্ট্রিং একসাথে দিয়ে প্রকাশ করা হয়। যেমনঃ #myStyle। পুরো আইডি সিলেক্টরের সিনট্যাক্স হয় #myStyle{propertiy:value;}। ধরুনঃ আপনি এইচটিএমএল এর h2 ট্যাগ এবং p ট্যাগ […]
সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো সিএসএস এর গঠন এবং কোডিং এর পদ্ধতি নিয়ে। তো চলুন… সিএসএস সিনট্যাক্সঃ সিএসএস সিনট্যাক্স বা পদবিন্যাস হচ্ছে সিএসএস কোড লিখার পদ্ধতি। নিচের ইমেজটি দিয়ে দেখানো হল সিএসএস কোড সিনট্যাক্স লিখতে হয়। প্রথমে সিলেক্টর, সিলেক্টর দিয়ে আমরা এইচটিএমএল এর বিভিন্ন ইলিমেন্টকে টার্গেট করে স্টাইল আপ্লাই করবো। সিএসএসে সিলেক্টর হল আপনার এইচটিএমএল ট্যাগ […]
সিএসএস সিলেক্টর নিয়ে ৩য় পর্বে স্বাগতম। এই পর্বে আলোচনা করবো গ্রুপ এবং ডিসেন্ডেন্ট সিলেক্টর নিয়ে। তো চলুন… Group Selector: নাম দেখেই বুঝায় যায় গ্রুপ সিলেক্ট্রর এর কাজ। গ্রুপ সিলেক্টর সাধারনত আলাদা আইডি বা ক্লাস সিলেক্টর কে একই ডিক্লেয়ারেশন প্রদান করতে ব্যবহার করা হয়। গ্রুপ করতে শুধু মাত্র “,” (কমা) ব্যবহার করে কাজ করতে হয়। পুরো […]
CSS কি এবং কেন? CSS এর পূর্ন নাম বা রূপ হচ্ছে Cascading Style Sheets. সহজ ভাষায় একটি ওয়েবসাইটের বিভিন্ন কনটেন্ট (এইচটিএমএল ইলিমেন্ট) যেমনঃ সাইটের গঠন, আকার(দৈর্ঘ্য, প্রস্থ এবং উচ্চতা), কনটেন্ট এর অবস্থান, ছবি, রং, ভিডিও, এ্যানিমেশন, বাটন কিভাবে ওয়েব ব্রাউজারে প্রদর্শন করবে এটার নির্দেশনা দান করাই হচ্ছে CSS এর কাজ। এইচটিএমএল কে যদি একটি ওয়েবসাইটের […]
সিএসএস সিলেক্টর নিয়ে ৪র্থ পর্বে স্বাগতম। এই পর্বে আলোচনা করবো সুডো ক্লাস এবং ইউনিভার্সাল সিলেক্টর নিয়ে। তো চলুন… Pseudo Class Selector: CSS এ সুডো ক্লাস ইউজ করা হয় কোন ইলিমেন্টকে স্পেশাল ইফেক্ট দেয়ার জন্য। ইফেক্ট দিতে সুডো ক্লাসকে আইডি বা ক্লাস সিলেক্টরের সাথে বা কোন ইলিমেন্ট সিলেক্টরের সাথে কম্বাইন করে ডিক্লেয়ারেশন দিতে হয়। সুডো ক্লাস […]
সিএসএস নিয়ে ধারাবাহিক টিউটোরিয়ালের এই পর্বে দেখবো এবং জানবো বিভিন্ন ধরনের সিএসএস সীট নিয়ে। সিএসএস এ ৩ ধরণের স্টাইলসীট রয়েছেঃ ১. External Style Sheet, ২. Internal Style Sheet, ৩. Inline Style Sheet. এগুলো ক্ষেত্র বিশেষে একেকটা একেক সময়ে বা কখনও প্রয়োজনে একই সাথে ব্যবহার করা হয়। নিচে উপরের কোন স্টাইলসীটের কোডিং কিভাবে লিখতে হয় তা […]
সিএসএস এ ফন্ট নিয়ে কাজ করার সময় আপনাকে অনেক ফন্ট এর নাম মুখস্ত রাখতে হবে। সচারচর একেক ওয়েবসাইটে একেক ফন্ট ইউজ হলেও কিছু ফন্ট আছে যেগুলো ব্যবহার প্রায় ওয়েবসাইট এর দেখা যায়। আসলে ফন্ট এর ব্যবহার ডিজাইনার এর ইচ্ছার উপরে নির্ভর করবে। ব্যক্তিগত ভাবে আমি ১টি ফন্ট ইউজ করি ওয়েবসাইট ডিজাইন এর জন্য। আর সেটি […]
সিএসএস সিলেক্টর বুঝাতে এখানে একটি বাস্তবিক উদাহরণ লক্ষ করুন। ধরুন, আপনি বাজারের একটি নির্দিষ্ট দোকানে গেলেন এবং সেখানে থেকে আপনার বাসার জন্য প্রয়োজনীয় ব্যবহার্য যেমনঃ তেল, সাবান এবং নিত্য দিনের জিনিস ক্রয় করলেন এবং অফিসের জন্য হ্যান্ড ওয়াস, টিস্যু পেপার, কলম ক্রয় করলেন। এখন দেখুন, আপনি একই দোকান থেকে বাসার জন্য এবং অফিসের জন্য প্রোডাক্ট […]
সিএসএস ফন্ট এর এই পর্বে আলোচনা করবো ফন্ট ওয়েট এবং ফন্ট স্টাইল নিয়ে। তো চলুন… Font weight: কোন ইলিমেন্টে এর ফন্টের ব্যাসার্ধ/প্রস্থ দিতে font-weight প্রোপার্টি এবং ভ্যালুই হিসেবে normal/bold/bolder/lighter/100-900 অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট ওয়েট অ্যাপ্লাই করতে নিচের মত কোড লিখুনঃ [html]<html> <head> <style type=”text/css”> #normal{ font-weight: normal; } #bold{ font-weight: bold; } #bolder{ […]
সিএসএস ফন্ট এর এই পর্বে আলোচনা করবো ফন্ট ভেরিয়েন্ট এবং ফন্ট কালার নিয়ে। তো চলুন এই পর্ব শুরু করা যাক… Font Variant: কোন ইলিমেন্টে ফন্ট স্টাইলের ভেরিয়েশন দিতে font-variant প্রোপার্টি এবং ভ্যালুই হিসেবে normal/ small-caps অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট স্টাইলের ভেরিয়েশন অ্যাপ্লাই করতে নিচের মত কোড লিখুন। [html]<html> <head> <style type=”text/css”> #normal{ font-variant: normal; […]
