Pure.CSS একটি লাইটওয়েট এবং প্রোগ্রামেবল CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টে ব্যবহৃত হয়। এতে বিভিন্ন স্টাইলিং এবং কম্পোনেন্ট রয়েছে, যা সহজেই আপনার ওয়েব পৃষ্ঠাগুলিতে ব্যবহৃত হতে পারে। এখানে আমরা Headers এবং Paragraphs স্টাইলিং নিয়ে আলোচনা করব।
Headers এবং Paragraphs Styling with Pure.CSS
1. Headers Styling
Headers (যেমন: <h1>, <h2>, <h3>, ইত্যাদি) সাধারণত ওয়েব পেজের প্রধান শিরোনাম বা বিভাগকে চিহ্নিত করার জন্য ব্যবহৃত হয়। Pure.CSS আপনাকে headers-এর জন্য প্রাথমিক স্টাইল দেয়, তবে আপনি এগুলির জন্য কাস্টমাইজড স্টাইলও তৈরি করতে পারেন।
Header Styling Example with Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Header Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
h1 {
font-size: 2.5em;
color: #3498db;
text-align: center;
font-weight: bold;
}
h2 {
font-size: 2em;
color: #2ecc71;
text-align: left;
}
h3 {
font-size: 1.5em;
color: #e74c3c;
text-align: right;
}
</style>
</head>
<body>
<h1>This is a main heading (h1)</h1>
<h2>This is a secondary heading (h2)</h2>
<h3>This is a tertiary heading (h3)</h3>
</body>
</html>
ব্যাখ্যা:
- এখানে Pure.CSS এর মাধ্যমে সাধারণ স্টাইল ব্যবহার করা হয়েছে, কিন্তু আমরা
font-size,color,text-align, এবংfont-weightপ্রপার্টি যোগ করে Headers এর স্টাইল কাস্টমাইজ করেছি। - h1 এর জন্য একটি বড় আকার, গা dark নীল রঙ, এবং center alignment করা হয়েছে।
- h2 এবং h3 এর জন্য আলাদা আকার এবং রঙ নির্ধারণ করা হয়েছে।
2. Paragraphs Styling
Paragraphs (যেমন: <p>) সাধারণত পৃষ্ঠার মূল কন্টেন্ট বর্ণনা করতে ব্যবহৃত হয়। Pure.CSS একটি সিম্পল প্যারাগ্রাফ স্টাইল দেয়, তবে আপনি এগুলির জন্য কাস্টম ডিজাইন তৈরি করতে পারেন।
Paragraph Styling Example with Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Paragraph Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
p {
font-size: 1.2em;
line-height: 1.6;
color: #34495e;
text-align: justify;
margin-bottom: 20px;
}
.highlighted-text {
background-color: #f39c12;
padding: 5px;
color: #fff;
}
.indent-text {
text-indent: 30px;
}
</style>
</head>
<body>
<p>This is a standard paragraph using Pure.CSS with custom styles applied to the text.</p>
<p class="highlighted-text">This paragraph has highlighted text with a custom background color.</p>
<p class="indent-text">This paragraph has text indentation applied for better readability.</p>
</body>
</html>
ব্যাখ্যা:
- Standard Paragraph:
font-size,line-height, এবংtext-alignব্যবহার করে প্যারাগ্রাফের পাঠ্যকে সুন্দরভাবে উপস্থাপন করা হয়েছে। - Highlighted Text: একটি ক্লাস
.highlighted-textব্যবহার করে প্যারাগ্রাফের মধ্যে বেছে নেওয়া অংশের জন্য background-color এবং text color পরিবর্তন করা হয়েছে। - Indent Paragraph:
.indent-textক্লাস ব্যবহার করে প্যারাগ্রাফের প্রথম লাইনে indentation দেওয়া হয়েছে, যা পাঠ্যকে আরও পরিষ্কার এবং পড়তে সহজ করে।
3. Using Pure.CSS Classes for Styling Headers and Paragraphs
Pure.CSS এর কিছু বিল্ট-ইন ক্লাস ব্যবহার করে আপনি দ্রুত headers এবং paragraphs এর স্টাইল দিতে পারেন।
Pure.CSS Classes Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Built-in Classes</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<h1 class="pure-u-1-2">Pure.CSS Header with Full Width</h1>
<h2 class="pure-u-1-3">This is a secondary header with custom width</h2>
<p class="pure-u-1">This paragraph uses Pure.CSS's responsive layout class to make it flexible.</p>
</body>
</html>
ব্যাখ্যা:
- এখানে Pure.CSS এর
pure-u-1-2এবংpure-u-1-3ক্লাসগুলি ব্যবহৃত হয়েছে যা বিভিন্ন এলিমেন্টকে বিভিন্ন প্রস্থে (width) প্রদর্শন করতে সহায়তা করে। - এই ধরনের ক্লাসগুলি আপনাকে দ্রুত ওয়েব পেজের লেআউট স্টাইল করতে সহায়তা করে, বিশেষ করে গ্রিড সিস্টেম ব্যবহার করে।
Pure.CSS এর মাধ্যমে আপনি সহজেই Headers এবং Paragraphs এর জন্য স্টাইল কাস্টমাইজ করতে পারেন। আপনি যদি ডিজাইনকে আরও সুশৃঙ্খল এবং পড়তে সহজ করতে চান, তাহলে:
- Font size এবং line-height সমন্বয় করুন।
- Text alignment এবং text-indent ব্যবহার করুন।
- Background color, padding এবং font weight ব্যবহার করে টেক্সট হাইলাইট করুন।
Pure.CSS আপনাকে দ্রুত এবং কার্যকরী উপায়ে সুরক্ষিত এবং সুন্দর ওয়েব ডিজাইন তৈরি করতে সহায়তা করে, যেখানে কম কোড ব্যবহার করেও প্রাথমিক স্টাইল এবং লেআউট তৈরি করা সম্ভব।
Read more
