CSS দিয়ে স্ট্যাটিক ওয়েবসাইট তৈরির সম্পূর্ণ টিউটোরিয়াল

CSS (Cascading Style Sheets) হলো ওয়েব ডেভেলপমেন্টের একটি অপরিহার্য অংশ। এটি HTML এর সঙ্গে মিলিত হয়ে ওয়েবসাইটের ডিজাইন এবং লেআউট তৈরি করে। CSS ব্যবহার করে ওয়েবসাইটকে আকর্ষণীয় এবং ব্যবহারযোগ্য করা সম্ভব। এখানে CSS দিয়ে ওয়েবসাইট তৈরির একটি বিস্তারিত টিউটোরিয়াল দেওয়া হলো।

CSS কি এবং কেন এটি গুরুত্বপূর্ণ?

CSS এর পূর্ণ রূপ হলো Cascading Style Sheets। এটি একটি স্টাইলিং ল্যাঙ্গুয়েজ, যা HTML উপাদানগুলোর জন্য ডিজাইন এবং বিন্যাস নির্ধারণ করে। CSS এর প্রধান কাজ হলো ওয়েবসাইটের রঙ, ফন্ট, মার্জিন, প্যাডিং, লেআউট এবং অন্যান্য ভিজ্যুয়াল উপাদান নিয়ন্ত্রণ করা।

CSS কেন গুরুত্বপূর্ণ?

ডিজাইন উন্নত করে: HTML শুধুমাত্র ওয়েবপেজের কাঠামো নির্ধারণ করে, CSS এর মাধ্যমে সেই কাঠামোকে আকর্ষণীয় করা হয়।
ব্যবহারযোগ্যতা বৃদ্ধি: CSS ওয়েবসাইটের লেআউট ব্যবহারকারী-বান্ধব করতে সহায়তা করে।
সময় সাশ্রয়: একবার CSS ফাইল তৈরি করলে সেটি পুরো ওয়েবসাইটে প্রয়োগ করা যায়।
প্রতিক্রিয়াশীল ডিজাইন: CSS দিয়ে রেসপন্সিভ ওয়েবসাইট তৈরি করা সম্ভব, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।

CSS এর প্রকারভেদ

1. ইনলাইন CSS: HTML উপাদানের ভিতরে সরাসরি CSS কোড লেখা হয়।
<h1 style=”color: blue;”>এইচটিএমএল শিরোনাম</h1>

2. ইন্টারনাল CSS: HTML ফাইলের <head> ট্যাগের ভিতরে CSS কোড লেখা হয়।

CSS ফাইল তৈরি এবং সংযোগ

১. CSS ফাইল তৈরি করুন
আপনার প্রজেক্ট ফোল্ডারে একটি নতুন ফাইল তৈরি করুন এবং নাম দিন styles.css।

২. HTML ফাইলে CSS সংযুক্ত করুন
HTML ফাইলের <head> ট্যাগে নিচের কোডটি লিখুন:
<link rel="stylesheet" href="styles.css">

CSS এর মৌলিক সিনট্যাক্স

CSS এর মূল কাঠামো হলো:
   selector {
      property: value;
   }

উদাহরণ:
   h1 {
      color: blue;
      font-size: 24px;
   }

স্টাইল শীট তৈরির মূল উপাদান গুলো:

Selector: HTML উপাদান যেটির জন্য স্টাইল প্রয়োগ হবে (যেমন, h1)।
Property: CSS এর বৈশিষ্ট্য (যেমন, color)।
Value: বৈশিষ্ট্যের মান (যেমন, blue)।

CSS এর মাধ্যমে ওয়েবসাইট ডিজাইন

১. টেক্সট স্টাইলিং
CSS দিয়ে আপনার ওয়েবসাইটের টেক্সট আকর্ষণীয় করা যায়।
     p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

২. ব্যাকগ্রাউন্ড এবং রঙ
ওয়েবসাইটের ব্যাকগ্রাউন্ড সেট করতে নিচের কোডটি ব্যবহার করুন:
body {
    background-color: #f4f4f4;
    color: #000;
}

৩. বর্ডার এবং শেডিং
বর্ডার এবং বক্স শেডিং যোগ করার জন্য:
div {
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

লেআউট ডিজাইন

১. Flexbox ব্যবহার
CSS  এর একটি শক্তিশালী টুল  যার নাম  Flexbox, যা ওয়েবসাইটের লেআউট তৈরি করতে সাধারণত ব্যবহার করা হয় ।

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

২. গ্রিড লেআউট
CSS Grid দিয়ে আরও জটিল লেআউট তৈরি করা যায়।

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

CSS এর মাধ্যমে রেসপন্সিভ ডিজাইন

মিডিয়া কুয়েরি ব্যবহার

CSS দিয়ে বিভিন্ন ডিভাইসের জন্য আলাদা স্টাইল প্রয়োগ করতে মিডিয়া কুয়েরি ব্যবহার করা হয়।
মিডিয়া কুয়েরি কীভাবে কাজ করে?

মিডিয়া কুয়েরি ডিভাইসের নির্দিষ্ট বৈশিষ্ট্য (যেমন স্ক্রিনের প্রস্থ, উচ্চতা, রেজোলিউশন, অরিয়েন্টেশন) পরীক্ষা করে এবং সেই অনুযায়ী CSS নিয়ম প্রয়োগ করে। এটি @media রুল ব্যবহার করে লেখা হয়। উদাহরণস্বরূপ, যদি একটি ডিভাইসের স্ক্রিন প্রস্থ 768px এর কম হয়, তাহলে একটি নির্দিষ্ট CSS নিয়ম কার্যকর হবে।

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}
উপরে, যদি স্ক্রিনের প্রস্থ 768px বা তার কম হয়, তাহলে body ট্যাগের ফন্ট সাইজ ১৪px হবে।

CSS এর উন্নত ব্যবহার

১. ক্লাস এবং আইডি
CSS এ ক্লাস এবং আইডি ব্যবহার করে নির্দিষ্ট HTML উপাদানের জন্য স্টাইল নির্ধারণ করা যায়। ক্লাস কে (.) ডট দিয়ে এবং আইডিকে (#) হ্যাস দিয়ে নির্ধারণ করা হয়।

.highlight_class {
    background-color: yellow;
    font-weight: bold;
}	
<p class=" highlight_class ">এই টেক্সটটি হাইলাইট করা হয়েছে।</p>
#highlight_id {
    background-color: yellow;
    font-weight: bold;
}
<p class=" highlight_id ">এই টেক্সটটি হাইলাইট করা হয়েছে।</p>

২. পজিশনিং
উপাদানের অবস্থান নিয়ন্ত্রণ করতে পজিশন ব্যবহার করা হয়।

.box {
    position: absolute;
    top: 50px;
    left: 100px;
}

CSS দিয়ে ওয়েবসাইট তৈরির উদাহরণ

নিচে একটি সহজ HTML এবং CSS উদাহরণ দেওয়া হলো:

styles.css

/* General Styles */
body {
	font-family: 'Arial', sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.6;
	color: #fff;
	background: linear-gradient(to right, #ff7eb3, #ff758c);
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Header */
header {
	background: #6a11cb;
	background: linear-gradient(to right, #6a11cb, #2575fc);
	padding: 20px 0;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header h1 {
	margin: 0;
	font-size: 2.5rem;
}

header nav ul {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
	display: flex;
	justify-content: center;
	gap: 20px;
}

header nav ul li {
	display: inline;
}

header nav ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: bold;
	transition: color 0.3s;
}

header nav ul li a:hover {
	color: #ffd700;
}

/* Section Styles */
section {
	padding: 60px 0;
	text-align: center;
}

section#home {
	background: linear-gradient(to bottom, #ff758c, #ff7eb3);
	color: #fff;
}

section#about {
	background: linear-gradient(to bottom, #42e695, #3bb2b8);
}

section#services {
	background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
}

section#contact {
	background: linear-gradient(to bottom, #6a11cb, #2575fc);
}

/* Service Boxes */
.services {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

.service-box {
	background: #fff;
	color: #333;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	width: 250px;
	text-align: center;
}

.service-box h3 {
	margin: 0 0 10px;
}

/* Contact Form */
form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

form input,
form textarea {
	width: 100%;
	max-width: 400px;
	padding: 10px;
	border: none;
	border-radius: 5px;
	margin-bottom: 10px;
}

form button {
	background: #ff758c;
	border: none;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.3s;
}

form button:hover {
	background: #ff576e;
}

/* Footer */
footer {
	background: #333;
	color: #fff;
	text-align: center;
	padding: 20px 0;
	margin-top: 20px;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elab Single Page Design</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Colorful Website</h1>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="home">
        <div class="container">
            <h2>Welcome to Our Colorful World</h2>
            <p>Experience a vibrant and engaging design tailored just for you!</p>
            <button>Learn More</button>
        </div>
    </section>

    <section id="about">
        <div class="container">
            <h2>About Us</h2>
            <p>We specialize in creating visually stunning and user-friendly websites.</p>
        </div>
    </section>

    <section id="services">
        <div class="container">
            <h2>Our Services</h2>
            <div class="services">
                <div class="service-box">
                    <h3>Web Development</h3>
                    <p>Building responsive and modern websites.</p>
                </div>
                <div class="service-box">
                    <h3>Graphic Design</h3>
                    <p>Creative designs to bring your brand to life.</p>
                </div>
                <div class="service-box">
                    <h3>SEO Optimization</h3>
                    <p>Boost your online visibility effectively.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <p>We'd love to hear from you! Drop us a message anytime.</p>
            <form>
                <input type="text" placeholder="Your Name" required>
                <input type="email" placeholder="Your Email" required>
                <textarea placeholder="Your Message" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 encryptedlab.com All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

Output:

উপসংহার:

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