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

ধাপে ধাপে সিএসএস টিউটরিয়াল শেখার প্রথম ক্লাসে সবাইকে স্বাগতম। এইচটিএমএল টিউটরিয়ালের পর এবার সবাইকে নিয়ে বসলাম সিএসএস (CSS) ক্লাসে। কলেজে পড়ার সময় দু'একটা টিউশনি করার মাধ্যমে যে শিক্ষকতা শুরু করেছিলাম তার অভ্যাস না ছাড়তে পারার কারনেই হয়তো টিউটরিয়ালবিডিতে লিখছি। তবে যে কথাটা সবাইকে বলতে চাই তা হলো-HTML এর উপর অসিম যে টিউটরিয়াল লিখেছেন তাতে সবাই অংশগ্রহন ছাড়া (বা HTMLজ্ঞান ছাড়া) এই টিউটরিয়াল বুঝতে পারবেন না। তাই এক পলকে দেখে নেই সেই টিউটরিয়ালগুলো।

css
"ছবিটিতে HTML কে কেক আর CSS কে ক্রিমের সাথে তুলনা করা হয়েছে"

HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)
HTMLপর্ব- দুই: রঙের ব্যবহার
HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার
HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১
HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২
HTML পর্ব-৬ HTML এ Font ট্যাগের ব্যবহার

CSS কি এবং কেন?

  • সিএসএস বলতে বুঝায় Cascading Style Sheets
  • HTML কোড গুলো কিভাবে (ডিজাইনে) প্রকাশিত হবে তাই প্রকাশ করে
  • HTML এর সাথে CSS কোড যুক্ত হয়ে প্রকাশিত হয়।
  • CSS এর কোড গুলো আলাদাভাবে আলাদা ফাইলেও রাখা যায় যা HTML এ কল করে সংযুক্ত করা যায়।
  • CSS এর মাধ্যমে কোড লিখতে সবচেয়ে বড় যে সুবিধা পাওয়া যায় তা হলো বার বার একই কোড লিখতে হয় না।

দেখুন ছোট একটি সিএসএস ও HTML প্রজেক্ট

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>

আউটপুট

এখানে লক্ষনীয় যে, হেড ট্যাগের মধ্যে <style type="text/css"> .... </style> এ সি এস এস কোড গুলো লিখতে হয়।

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

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

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

  3. এম.এস.মিজান

    ধন্যবাদ টিউটো ভাই। এত সুন্দর করে CSS এর টিউটোরিয়াল লেখার জন্য। আশা করি নিয়মিত লিখবেন।

  4. Pingback: ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস টিউটরিয়াল-৩ « টিউটোরিয়াল

  5. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » ব্যাগ্রাউন্ড ও টেক

  6. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » সুন্দর সুন্দর বক্স

  7. Pingback: বেশি কিছু বলবো না, সিএসএস (CSS) ১৫+ টিপস « টিউটোরিয়াল

  8. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » বেশি কিছু না, সিএসএস

  9. টিউটো ভাই এতো সুন্দর করে লিখার জন্য অসংখ্য ধন্যবাদ। আমি টেকটিউন্সের একজন নিয়মিত ভিজিটর ও সদস্য। আমি এইচটিএমএল মোটামুটি জানি এবং ওয়ার্ডপ্রেস এও ভাল ধারনা আছে। কিন্তু তার পরেও আমি একটি ভাল ওয়েব সাইট ডিজাইন করতে পাচ্ছি না। আমি আপনার সহযোগীতা কামনা করছি। আপনার সাথে আমি মোবাইল বা ম্যাসেন্জারে যোগাযোগ করতে চাই। আমার মোবাইল নাম্বার ও ম্যাসেন্জার আইডি হচ্ছে -০১৯২১৪১৮৫১৮ ; shaonbd2020@yahoo.com
    আমা করি আপনার সহযোগীতা পাব।

  10. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » সহজেই বানিয়ে ফেলি ছ

  11. Pingback: CSS Bangla Ebook | BoierVubon.Com - Free .pdf Books Download Store

Leave a Comment