এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস টিউটোরিয়াল -CSS tuotorial


CSS


সিএসএস টিউটোরিয়াল


সিএসএস একটি প্রোগ্রামিং ভাষা যা এইচটিএমএল ডকুমেন্টকে সুদর্শনীয় করে তোলার জন্য ব্যবহৃত হয়।

একটি এইচটিএমএল এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা সিএসএসের মাধ্যমে নির্ধারণ করে দেওয়া হয়।

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



আমাদের প্রতিটি পরিচ্ছেদে রয়েছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copyকরার একটি অপশন দেখতে পাবেন। copyঅপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।

আপনি আপনার এডিটর ওপেন করে copyকরা কোড pasteকরতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।



উদাহরণ

<
         !DOCTYPE html>
        <
        html>
        <
        head>
        <
        title>
        সিএসএস উদাহরণ</title>
        <
        style>

        body {
            background-color: lightskyblue;
        }

        h1 {
            color: white;
            text-align: center;
        }

        p {
            font-family: Siyam Rupali;
            font-size: 20px;
        }

        </style>
        </head>
        <
        body>

        <
        h1>
        এটি সিএসএস এর প্রথম উদাহরণ</h1>
        <
        p>
        আমাদের সিএসএস টিউটোরিয়ালে অসংখ্য উদাহরণ রয়েছে।</p>

        </body>
        </html>

        

ফলাফল


সিএসএস কি?



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

একটি ওয়েব পেজের ডিজাইন করা, গঠন তৈরি করা এবং বিভিন্নভাবে প্রদর্শনীর জন্য সিএসএস ব্যবহার করা হয়।

সবচেয়ে গুরুত্বপূর্ণ বিষয়টি হল সিএসএস এর মাধ্যমে আপনি ভিন্ন ভিন্ন ডিভাইসে একটি ওয়েব পেজকে সুন্দরভাবে উপস্থাপন করতে পারবেন।



সিএসএসের মাধ্যমে বড় সমস্যার সমাধান

একটি ওয়েব পেজকে সাজানোর উদ্দেশ্য নিয়ে এইচটিএমএলের মধ্যে কোনো ট্যাগ নাই।

একটি ওয়েব পেজে শুধুমাত্র কন্টেন্ট বা পেজের গঠন তৈরির জন্যই এইচটিএমএল তৈরি করা করা হয়েছে। যেমনঃ


<h1>ইহা একটি হেডিং ট্যাগ</h1>
<p>ইহা একটি প্যারাগ্রাফ ট্যাগ।</p>

সর্বপ্রথম এইচটিএমএল ৩.২ এ যখন <font> ট্যাগ এবং color এট্রিবিউট সংযুক্ত করা হয়েছিল, তখন ইহা ওয়েব ডেভেলপারদের মধ্যে আতঙ্ক ছড়াতে শুরু করেছিল।

কারণ তখন বড় বড় ওয়েবসাইট ডেভেলপমেন্টের জন্য প্রত্যেকটি পেজে ফন্ট বা কালারের তথ্যসমুহ আলাদা আলাদা ভাবে লিখতে হত, যা একটি বড় সমস্যার কারণ হয়ে দাঁড়িয়েছিল।

এই সমস্যা সমাধানের জন্য World Wide Web Consortium (W3C) সিএসএস তৈরি করে।



সিএসএসের মাধ্যমে সময় ও কাজ সাশ্রয়

সাধারনত এক্সটার্নাল সিএসএস ফাইলকে .css এক্সটেনশন দিয়ে সংরক্ষণ করতে হয়। যেমনঃ- external.css

আপনি চাইলে শুধুমাত্র একটি এক্সটার্নাল সিএসএস ফাইল পরিবর্তনের মাধ্যমে খুব সহজেই একটি সম্পূর্ণ ওয়েবসাইটের স্টাইল পরিবর্তন করতে পারেন।



সিএসএস রেফারেন্স

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


সিএসএস প্রোগ্রামিং টিউটোরিয়াল লিস্ট


সিএসএস বেসিক টিউটোরিয়াল

সিএসএস হোম-HOME সিএসএস পরিচিতি-Introduction সিএসএস গঠনপ্রণালী-Syntax সিএসএস ব্যবহার পদ্ধতি-Use সিএসএস কালার-Color সিএসএস ব্যাকগ্রাউন্ড-Background সিএসএস বর্ডার-Border সিএসএস মার্জিন-Margin সিএসএস প্যাডিং-Padding সিএসএস উচ্চতা/প্রস্থ-Height/Width সিএসএস বক্সমডেল-BoxModel সিএসএস আউটলাইন-Outline সিএসএস টেক্সট-Text সিএসএস লিংক-Link সিএসএস লিস্ট-List সিএসএস টেবিল-Table সিএসএস প্রদর্শনী-Display সিএসএস সর্বোচ্চ উচ্চতা-Maxwidth সিএসএস পজিশন-Position সিএসএস ওভারফ্লো-Overflow সিএসএস ফ্লট-Float সিএসএস ইনলাইন-ব্লক-Inlineblock সিএসএস এলাইন-Align সিএসএস কম্বিন্যাটর-Combinator সিএসএস সুডো-ক্লাস-PseudoClass সিএসএস সুডো-এলিমেন্ট-PseudoElement সিএসএস প্রোপার্টি-Opacity সিএসএস ন্যাভিগেশনবার-NavigationBar সিএসএস ড্রপডাউন-Dropdown সিএসএস টুলটিপ-Tooltip সিএসএস ইমেজ গ্যালারী-ImageGallery সিএসএস ইমেজ স্প্রাইট-ImageSprite সিএসএস এট্রিবিউট সিলেক্টর-AttrSelector সিএসএস ফর্ম-Form কাউন্টার-Counter টিউটোরিয়াল

সিএসএস-৩ টিউটোরিয়াল

সিএসএস ভূমিকা-Introduction সিএসএস রাউন্ডেড কর্নার-RoundedCorner সিএসএস বর্ডারইমেজ-Border Image সিএসএস ব্যাকগ্রাউন্ড-Background সিএসএস কালার-Color সিএসএস গ্র্যাডিয়েন্ট-Gradient সিএসএস স্যাডো-Shadow সিএসএস টেক্সট-Text সিএসএস 3ফন্ট-Font সিএসএস 2D ট্রান্সফর্ম-Transform সিএসএস 3D ট্রান্সফর্ম-Transform সিএসএস ট্রানজিশন-Transition সিএসএস এনিমেশন-Animation সিএসএস ইমেজ-Image সিএসএস বাটন-Button সিএসএস পেজিনেশন-Pagination সিএসএস মাল্টি-কলাম-MultColumn সিএসএস ইউজার ইন্টারফেস-UserInterface সিএসএস বক্স সাইজিং-BoxSizing সিএসএস ফ্লেক্সবক্স-Flexbox সিএসএস মিডিয়া কুয়েরি-MediaQuery সিএসএস মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ টিউটোরিয়াল

সিএসএসরেসপন্সিভ পরিচিতি-Introduction সিএসএস রেসপন্সিভ ভিউপোর্ট-Viewport সিএসএস রেসপন্সিভ গ্রাইড ভিউ-Grid View সিএসএস রেসপন্সিভ মিডিয়া কুয়েরি-Media Query সিএসএসরেসপন্সিভ ইমেজ-Image সিএসএস রেসপন্সিভভিডিও-Video সিএসএস ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স টিউটোরিয়াল

সিএসএস রেফারেন্স-Reference সিএসএস সিলেক্টর-Selector সিএসএস ফাংশন-Function সিএসএস রেফারেন্স আউরাল-ReferenceAural সিএসএস ওয়েব সেফ ফন্ট-WebSafeFont সিএসএস এনিমেটেবল-Animatable সিএসএস ইউনিট-Unit সিএসএস PX-EM কনভার্টার-Converter সিএসএস কালার-Color সিএসএস কালার ভ্যালু-ColorValue সিএসএস ডিফল্ট ভ্যালু-DefaultValue সিএসএস ব্রাউজার সাপোর্ট-BrowserSupport