Pure.CSS একটি হালকা এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক যা মোবাইল-প্রথম ডিজাইনের ধারণায় কাজ করে এবং রেসপন্সিভ ওয়েব ডিজাইন তৈরির জন্য বেশ সহজ। Breakpoints এবং কাস্টম Responsive Layouts তৈরি করা Pure.CSS-এ খুবই সহজ এবং এর গ্রিড সিস্টেম ও মিডিয়া কোয়েরি ব্যবহারের মাধ্যমে এটি অর্জন করা সম্ভব।
Pure.CSS এর Breakpoints এবং কাস্টম Responsive Layouts তৈরি
1. Pure.CSS Grid System এবং Breakpoints
Pure.CSS একটি ১২ কলামের গ্রিড সিস্টেম প্রদান করে, যা রেসপন্সিভ ডিজাইন তৈরিতে খুব কার্যকর। গ্রিড সিস্টেমটি ছোট এবং বড় স্ক্রীনের জন্য ওয়েব পেজের লেআউট পরিবর্তন করতে সাহায্য করে। Pure.CSS এ ব্রেকপয়েন্ট বা মিডিয়া কোয়েরির মাধ্যমে এই গ্রিড সিস্টেমটি ব্যবহার করা যায়, যার মাধ্যমে অ্যাপ্লিকেশনটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে ফিট হয়।
Pure.CSS এর ডিফল্ট গ্রিড সিস্টেমে তিনটি ব্রেকপয়েন্ট (বড় স্ক্রীন, ট্যাবলেট, মোবাইল) রয়েছে। এই ব্রেকপয়েন্টগুলো media queries দ্বারা কন্ট্রোল করা হয়।
2. Pure.CSS ব্রেকপয়েন্টস:
Pure.CSS এর ব্রেকপয়েন্টস সাধারণত তিনটি প্রধান সাইজে কাজ করে:
- small (
@media (max-width: 40em)): মোবাইল ডিভাইসের জন্য। - medium (
@media (min-width: 40em)): ট্যাবলেট ডিভাইসের জন্য। - large (
@media (min-width: 64em)): ডেস্কটপ ডিভাইসের জন্য।
এগুলি মোবাইল ফার্স্ট পদ্ধতি অনুসরণ করে, অর্থাৎ প্রথমে মোবাইল ডিভাইসের জন্য ডিজাইন করা হয় এবং পরে বড় স্ক্রীনগুলোর জন্য ডিজাইন অ্যাডজাস্ট করা হয়।
3. কাস্টম Responsive Layouts তৈরি করা:
Pure.CSS এ কাস্টম রেসপন্সিভ লেআউট তৈরি করতে আপনি নিম্নলিখিত কৌশলগুলি অনুসরণ করতে পারেন:
(i) গ্রিড সিস্টেম ব্যবহার:
Pure.CSS এর ১২ কলামের গ্রিড সিস্টেম ব্যবহার করে সহজেই রেসপন্সিভ লেআউট তৈরি করা যায়। এখানে একটি উদাহরণ দেওয়া হলো, যেখানে একটি রেসপন্সিভ লেআউট তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 1</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 2</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 3</div>
</div>
</div>
<style>
.panel {
background-color: lightgray;
padding: 20px;
margin: 10px;
text-align: center;
font-size: 18px;
}
</style>
</body>
</html>
এখানে:
- pure-u-1: প্রতিটি কলাম পূর্ণ প্রস্থ নেবে।
- pure-u-sm-1-2: স্ক্রীনের সাইজ sm (মোবাইল) এর জন্য প্রতিটি কলাম অর্ধেক প্রস্থ নিবে।
- pure-u-md-1-3: স্ক্রীনের সাইজ md (ট্যাবলেট) এর জন্য প্রতিটি কলাম এক-তৃতীয়াংশ প্রস্থ নিবে।
এই কাস্টম গ্রিড সিস্টেমটি আপনার ওয়েবসাইটের লেআউটকে রেসপন্সিভ করে তুলবে, এবং এটা বিভিন্ন স্ক্রীন সাইজে ঠিকমতো কাজ করবে।
(ii) কাস্টম মিডিয়া কোয়েরি এবং ব্রেকপয়েন্ট তৈরি:
Pure.CSS এর ডিফল্ট মিডিয়া কোয়েরি এবং ব্রেকপয়েন্ট সিস্টেমের সাথে আপনি কাস্টম ব্রেকপয়েন্ট তৈরি করতে পারেন, যাতে আপনার সাইট আরো কাস্টমাইজড এবং ফ্লেক্সিবল হয়।
উদাহরণস্বরূপ, যদি আপনি একটি নতুন ব্রেকপয়েন্ট তৈরি করতে চান, তাহলে আপনাকে একটি নতুন মিডিয়া কোয়েরি ব্যবহার করতে হবে। নিচে একটি কাস্টম মিডিয়া কোয়েরি তৈরি করার উদাহরণ দেওয়া হল:
@media (min-width: 768px) {
/* Tablet and larger devices */
.my-class {
background-color: lightblue;
}
}
@media (min-width: 1024px) {
/* Desktop devices */
.my-class {
background-color: lightgreen;
}
}
এখানে, min-width: 768px এবং min-width: 1024px মিডিয়া কোয়েরির মাধ্যমে আমরা ট্যাবলেট এবং ডেস্কটপ ডিভাইসের জন্য কাস্টম লেআউট তৈরি করেছি।
(iii) Flexbox ব্যবহার:
Pure.CSS এর গ্রিড সিস্টেমের পাশাপাশি আপনি Flexbox ব্যবহার করতে পারেন কাস্টম লেআউট তৈরি করার জন্য, যা অনেক বেশি ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য। Flexbox মাধ্যমে আপনি উপাদানগুলিকে আরও বেশি নিয়ন্ত্রণ করতে পারবেন।
Flexbox উদাহরণ:
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 1</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 2</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 3</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 4</div>
</div>
</div>
এখানে pure-u-1, pure-u-sm-1-2 এবং pure-u-md-1-4 ব্যবহার করে আপনার ওয়েব পেজে চারটি কলাম তৈরি হয়েছে, এবং এটি রেসপন্সিভভাবে কাজ করবে।
Pure.CSS খুবই হালকা এবং ব্যবহারযোগ্য একটি ফ্রেমওয়ার্ক, যা ব্রেকপয়েন্ট এবং কাস্টম রেসপন্সিভ লেআউট তৈরি করার জন্য বেশ কার্যকরী। এর গ্রিড সিস্টেম এবং মিডিয়া কোয়েরি ব্যবহার করে আপনি আপনার ওয়েবসাইটের ডিজাইনকে বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত করতে পারেন। এই ফ্রেমওয়ার্কটি বিশেষভাবে দ্রুত লোড হওয়া ওয়েবসাইট তৈরির জন্য উপযুক্ত, এবং এটি সিম্পল, ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য লেআউট ডিজাইন করতে সহায়তা করে।
Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডিজাইন সহজ এবং দ্রুত করে তোলে। এটি বিভিন্ন মৌলিক স্টাইলিং ফিচার প্রদান করে, যার মধ্যে Typography এবং Font Styling অন্যতম। এই ফিচারগুলি ব্যবহার করে আপনি আপনার ওয়েব পেজের টেক্সট এবং ফন্টের দৃশ্যমানতা এবং পাঠযোগ্যতা উন্নত করতে পারবেন।
Pure.CSS এর Typography এবং Font Styling
Pure.CSS স্বয়ংক্রিয়ভাবে একটি বেসিক টেক্সট স্টাইলিং সেটআপ প্রদান করে, তবে আপনি চাইলে কাস্টমাইজড ফন্ট স্টাইলিং এবং টাইপোগ্রাফি ব্যবহার করতে পারেন। Pure.CSS-এ টাইপোগ্রাফি ও ফন্ট স্টাইলিংয়ের জন্য কিছু প্রাথমিক স্টাইলিং পদ্ধতি রয়েছে, যা দ্রুত ওয়েব পেজের লেআউট তৈরি করতে সাহায্য করে।
1. Basic Typography in Pure.CSS
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 Typography Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<h1 class="pure-u-1-1">This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<p>This is a paragraph of text styled using Pure.CSS. The font and spacing are set to a default style provided by Pure.CSS.</p>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</body>
</html>
ব্যাখ্যা:
- Headings: Pure.CSS দ্বারা হেডিংগুলির জন্য কিছু ডিফল্ট স্টাইলিং প্রযোজ্য।
- Paragraphs: Pure.CSS স্বয়ংক্রিয়ভাবে প্যারাগ্রাফের জন্য বেসিক মার্জিন এবং লাইন হাইট সেট করে দেয়।
- Lists: লিস্ট আইটেমগুলির জন্য স্টাইলিংও অন্তর্ভুক্ত থাকে।
2. Font Styling in Pure.CSS
Pure.CSS কোনো নির্দিষ্ট ফন্টের জন্য ডিফল্ট স্টাইলিং প্রদান করে না, তবে আপনি এটি কাস্টমাইজ করতে পারেন। সাধারণত, ফন্ট স্টাইলিংয়ের জন্য আপনি font-family, font-size, font-weight, এবং line-height ব্যবহার করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Font Styling Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
body {
font-family: 'Arial', sans-serif; /* Custom font-family */
font-size: 16px; /* Set font size */
line-height: 1.6; /* Adjust line height for readability */
}
h1 {
font-family: 'Georgia', serif; /* Different font for h1 */
font-size: 2em; /* Larger font size for headings */
font-weight: bold; /* Bold font for h1 */
}
p {
font-size: 1em;
font-style: italic; /* Italicize paragraphs */
}
a {
font-family: 'Verdana', sans-serif;
text-decoration: underline; /* Underline links */
}
</style>
</head>
<body>
<h1>This is a Custom Heading Style</h1>
<p>This is a paragraph with custom font style and size. It uses Arial as the font-family, with an increased line height for better readability.</p>
<p><a href="#">This is a link with custom font styling.</a></p>
</body>
</html>
ব্যাখ্যা:
- Font-family: আপনি
Arial,Georgia, এবংVerdanaএর মতো কাস্টম ফন্ট ব্যবহার করতে পারেন। আপনি যদি Google Fonts বা অন্য কোনো ফন্ট উৎস ব্যবহার করতে চান, তাহলে সেই ফন্ট যোগ করা যায়। - Font-size: এটি পাঠ্যের আকার নির্ধারণ করতে ব্যবহৃত হয়, যেমন
1em,2emইত্যাদি। - Font-weight: এটি টেক্সটের বোল্ডনেস কন্ট্রোল করে।
bold,normal, বা একটি নির্দিষ্ট সংখ্যা (যেমন400,700) ব্যবহার করা যেতে পারে। - Font-style: প্যারাগ্রাফ বা কোনো নির্দিষ্ট এলিমেন্টকে ইটালিক বা নরমাল করার জন্য ব্যবহার হয়।
3. Google Fonts Integration
Pure.CSS-এর মাধ্যমে আপনি সহজেই Google Fonts ইন্টিগ্রেট করতে পারেন, যা আপনার ওয়েব পেজের জন্য কাস্টম ফন্ট ব্যবহার করতে সহায়ক। Google Fonts ব্যবহার করে আপনি আরও বেশি ভিন্ন ধরনের ফন্ট অ্যাড করতে পারবেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts with Pure.CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <!-- Import Google Font -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
body {
font-family: 'Roboto', sans-serif; /* Apply Google Font */
font-size: 16px;
line-height: 1.6;
}
h1 {
font-size: 2.5em;
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a Heading with Roboto Font</h1>
<p>This is a paragraph with the Roboto font family. The font is being loaded from Google Fonts.</p>
</body>
</html>
ব্যাখ্যা:
- Google Fonts: এখানে Roboto ফন্ট ব্যবহার করা হয়েছে। ফন্টের স্টাইল লোড করার জন্য Google Fonts API ব্যবহার করা হয়েছে এবং সেই ফন্টটি
font-familyহিসেবে প্রয়োগ করা হয়েছে।
4. Adjusting Line Height and Letter Spacing
Pure.CSS-এ টেক্সটের line-height এবং letter-spacing কাস্টমাইজ করা খুবই সহজ। এটি টেক্সটের পড়ার অভিজ্ঞতাকে উন্নত করতে সাহায্য করে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Height and Letter Spacing Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
p {
font-size: 1.2em;
line-height: 1.8; /* Increase line height for better readability */
letter-spacing: 0.5px; /* Add some spacing between letters */
}
</style>
</head>
<body>
<p>This paragraph has a custom line height and letter spacing applied to improve readability and visual appeal.</p>
</body>
</html>
ব্যাখ্যা:
- line-height: এটি টেক্সটের লাইনের মধ্যে জায়গা বাড়ায়, যাতে প্যারাগ্রাফগুলি বেশি পরিষ্কার এবং পড়তে সহজ হয়।
- letter-spacing: এটি টেক্সটের মধ্যে অক্ষরের মাঝে জায়গা বাড়ায়, যাতে টেক্সট দেখতে আরও প্রফেশনাল লাগে।
Pure.CSS-এ Typography এবং Font Styling করার মাধ্যমে আপনি দ্রুত এবং সহজে আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েব পেজের টেক্সট স্টাইলিং করতে পারেন। Font-family, Font-size, Line-height, এবং Letter-spacing এর মতো স্টাইলিং প্রপার্টিগুলি ব্যবহার করে আপনি আপনার কন্টেন্টকে আরও আকর্ষণীয় এবং পাঠযোগ্য করতে পারবেন। Google Fonts-এর মাধ্যমে আপনি কাস্টম ফন্ট ইন্টিগ্রেট করেও Pure.CSS এর বেসিক স্টাইলিং আরও উন্নত করতে পারেন।
Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা অনেক দরকারী এবং সাধারণ ডিজাইন উপাদান প্রদান করে। এতে Text Alignment এবং Text Transformation এর জন্য প্রিমেড স্টাইলস রয়েছে, যেগুলি ওয়েব পেজে টেক্সটের স্টাইল ও বিন্যাস সহজে কাস্টমাইজ করতে সাহায্য করে।
এখানে Pure.CSS ব্যবহার করে Text Alignment এবং Text Transformation কীভাবে করা যায়, তা নিয়ে বিস্তারিত আলোচনা করা হলো।
1. Text Alignment in Pure.CSS
Text Alignment হল টেক্সটের অবস্থান নির্ধারণ করা, যেমন লেফট, সেন্টার, রাইট বা জাস্টিফাই করা। Pure.CSS আপনাকে এই কাজটি সহজে করতে দেয়।
Text Alignment Class in Pure.CSS:
pure-text-left: টেক্সটকে বাম দিকে (left) সাজাতে ব্যবহার করা হয়।pure-text-center: টেক্সটকে মাঝখানে (center) সাজাতে ব্যবহার করা হয়।pure-text-right: টেক্সটকে ডান দিকে (right) সাজাতে ব্যবহার করা হয়।pure-text-justify: টেক্সটকে দুটি প্রান্তে (justify) সাজাতে ব্যবহার করা হয়।
Text Alignment Example in Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Alignment in Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-text-left">
<h2>This is Left-Aligned Text</h2>
<p>This paragraph is aligned to the left.</p>
</div>
<div class="pure-text-center">
<h2>This is Center-Aligned Text</h2>
<p>This paragraph is aligned to the center.</p>
</div>
<div class="pure-text-right">
<h2>This is Right-Aligned Text</h2>
<p>This paragraph is aligned to the right.</p>
</div>
<div class="pure-text-justify">
<h2>This is Justified Text</h2>
<p>This paragraph is justified. It stretches across the full width of its container, aligning both the left and right edges.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-text-left: বাম পাশে টেক্সট সাজাতে ব্যবহার করা হয়েছে।pure-text-center: মাঝখানে টেক্সট সাজানো হয়েছে।pure-text-right: ডান দিকে টেক্সট সাজানো হয়েছে।pure-text-justify: টেক্সট পুরো প্যারাগ্রাফে সম্প্রসারিত হয়ে দুই পাশেই সোজা হয়ে যায়, যা একটি প্যারাগ্রাফের জন্য খুবই উপকারী।
2. Text Transformation in Pure.CSS
Text Transformation হল টেক্সটের কেস (uppercase, lowercase, capitalize) পরিবর্তন করা। Pure.CSS এর মাধ্যমে আপনি খুব সহজেই টেক্সটের কেস পরিবর্তন করতে পারেন।
Text Transformation Class in Pure.CSS:
pure-text-uppercase: সমস্ত টেক্সটকে বড় হাতের অক্ষরে (uppercase) রূপান্তরিত করে।pure-text-lowercase: সমস্ত টেক্সটকে ছোট হাতের অক্ষরে (lowercase) রূপান্তরিত করে।pure-text-capitalize: প্রথম অক্ষরটি বড় (capitalize) করে।
Text Transformation Example in Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transformation in Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-text-uppercase">
<h2>This Text is Uppercase</h2>
<p>this paragraph will be displayed in uppercase letters.</p>
</div>
<div class="pure-text-lowercase">
<h2>This Text is Lowercase</h2>
<p>THIS PARAGRAPH WILL BE DISPLAYED IN LOWERCASE LETTERS.</p>
</div>
<div class="pure-text-capitalize">
<h2>This Text is Capitalized</h2>
<p>this paragraph will have each word's first letter capitalized.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-text-uppercase: সমস্ত টেক্সটকে বড় হাতের অক্ষরে রূপান্তরিত করা হয়েছে।pure-text-lowercase: সমস্ত টেক্সটকে ছোট হাতের অক্ষরে রূপান্তরিত করা হয়েছে।pure-text-capitalize: প্রথম অক্ষরটি বড় (capitalize) করা হয়েছে।
অতিরিক্ত স্টাইলিং:
Pure.CSS এর স্টাইলগুলি মূলত লাইটওয়েট এবং মিনিমালিস্ট, তাই আপনি টেক্সটের রূপান্তর এবং_ALIGNMENT_ কাস্টমাইজ করার জন্য CSS দিয়ে আরও উন্নত স্টাইল দিতে পারেন।
Example with Custom Styling:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Text Styling with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.custom-heading {
font-size: 2rem;
color: #3498db;
text-align: center;
}
.custom-paragraph {
font-size: 1.2rem;
color: #2ecc71;
text-align: justify;
}
</style>
</head>
<body>
<h1 class="custom-heading pure-text-uppercase">Custom Heading with Uppercase</h1>
<p class="custom-paragraph pure-text-justify">This is a paragraph that is both styled with custom CSS and justified using Pure.CSS. It's important to make sure that text alignment and transformation are applied based on the content context.</p>
</body>
</html>
ব্যাখ্যা:
- এখানে custom CSS ব্যবহার করে টেক্সটের স্টাইল এবং রঙ কাস্টমাইজ করা হয়েছে।
- Pure.CSS ক্লাসগুলির সাথে CSS কাস্টমাইজেশন একত্রিত করে আরও উন্নত লেআউট ও ডিজাইন তৈরি করা হয়েছে।
Pure.CSS দিয়ে Text Alignment এবং Text Transformation খুবই সহজ। আপনি পূর্বনির্ধারিত CSS ক্লাসগুলো ব্যবহার করে দ্রুত টেক্সটের অবস্থান এবং কেস পরিবর্তন করতে পারেন, এবং সহজেই সুন্দর এবং সুসংগত ডিজাইন তৈরি করতে পারেন। এই ফিচারগুলো আপনার ওয়েব পেজের টেক্সটের দেখাশোনা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করবে।
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 আপনাকে দ্রুত এবং কার্যকরী উপায়ে সুরক্ষিত এবং সুন্দর ওয়েব ডিজাইন তৈরি করতে সহায়তা করে, যেখানে কম কোড ব্যবহার করেও প্রাথমিক স্টাইল এবং লেআউট তৈরি করা সম্ভব।
Pure.CSS একটি ছোট এবং মিনিমালিস্ট সিএসএস লাইব্রেরি, যা অনেকটা সহজ এবং দ্রুত ওয়েব ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। এর মধ্যে Default Typography Classes অন্তর্ভুক্ত করা হয়েছে, যা ওয়েব পৃষ্ঠার টেক্সট এবং ফন্টের স্টাইলিং সহজ এবং সুন্দরভাবে করার জন্য ব্যবহৃত হয়। নিচে Pure.CSS এর ডিফল্ট টাইপোগ্রাফি ক্লাসগুলির বিস্তারিত আলোচনা করা হলো।
Pure.CSS এর Default Typography Classes
Pure.CSS তে কিছু ডিফল্ট টাইপোগ্রাফি ক্লাস দেওয়া আছে যা আপনাকে সহজেই হেডিং, প্যারাগ্রাফ, লিস্ট, বোল্ড, ইটালিক, লাইন হাইট এবং টেক্সট অ্যালাইনমেন্টসহ অন্যান্য স্টাইলিং প্রোপার্টি প্রয়োগ করতে সহায়তা করে।
1. Basic Text Classes
.pure-text: এই ক্লাসটি একটি সাধারণ পাঠ্য (text) সেট করতে ব্যবহৃত হয়।<p class="pure-text">This is a basic text styled using Pure.CSS.</p>
2. Font Size and Line Height
Pure.CSS এর line height এবং font size খুবই সহজভাবে কাস্টমাইজ করা যায়। আপনি এই ক্লাসগুলো দিয়ে আপনার ওয়েবসাইটে স্টাইল করা টেক্সটের উচ্চতা এবং আকার নিয়ন্ত্রণ করতে পারবেন।
.pure-font-size-small: ছোট আকারের ফন্ট।<p class="pure-font-size-small">This is small text.</p>.pure-font-size-large: বড় আকারের ফন্ট।<p class="pure-font-size-large">This is large text.</p>.pure-line-height-tight: কম লাইন হাইট।<p class="pure-line-height-tight">This paragraph has tight line spacing.</p>.pure-line-height-loose: বেশি লাইন হাইট।<p class="pure-line-height-loose">This paragraph has loose line spacing.</p>
3. Text Alignment
Pure.CSS তে আপনার টেক্সটকে সহজেই left, center, এবং right অ্যালাইন করা যায়:
.pure-text-align-left: বাম দিকে টেক্সট অ্যালাইন করবে।<p class="pure-text-align-left">This text is aligned left.</p>.pure-text-align-center: সেন্টারে টেক্সট অ্যালাইন করবে।<p class="pure-text-align-center">This text is aligned center.</p>.pure-text-align-right: ডান দিকে টেক্সট অ্যালাইন করবে।<p class="pure-text-align-right">This text is aligned right.</p>
4. Text Decoration
Pure.CSS তে text decoration এর জন্যও ডিফল্ট ক্লাস রয়েছে। এতে টেক্সটের নিচে রেখা, স্ট্রাইকথ্রু, অথবা আন্ডারলাইন যোগ করা যায়।
.pure-text-decoration-underline: টেক্সটের নিচে আন্ডারলাইন।<p class="pure-text-decoration-underline">This text is underlined.</p>.pure-text-decoration-line-through: টেক্সটের উপর স্ট্রাইকথ্রু (line-through)।<p class="pure-text-decoration-line-through">This text has a strike-through.</p>
5. Font Style
Pure.CSS তে font style নিয়ন্ত্রণের জন্য কয়েকটি ক্লাস রয়েছে, যা আপনার টেক্সটের স্টাইল পরিবর্তন করতে সাহায্য করে:
.pure-font-style-italic: ইটালিক ফন্ট স্টাইল।<p class="pure-font-style-italic">This text is italicized.</p>.pure-font-style-normal: সাধারণ ফন্ট স্টাইল।<p class="pure-font-style-normal">This text is normal.</p>
6. Text Weight (Font Weight)
.pure-font-weight-bold: বোল্ড ফন্ট।<p class="pure-font-weight-bold">This text is bold.</p>.pure-font-weight-normal: সাধারণ ফন্ট (অথবা নরমাল ওয়েট)।<p class="pure-font-weight-normal">This text is normal weight.</p>
7. Text Transform
Pure.CSS এর মধ্যে text-transform প্রপার্টি ব্যবহার করার জন্য কিছু ক্লাসও রয়েছে, যা টেক্সটের কেস পরিবর্তন করতে সাহায্য করে:
.pure-text-transform-uppercase: টেক্সটকে সব কেপিটাল (uppercase) করবে।<p class="pure-text-transform-uppercase">This text is uppercase.</p>.pure-text-transform-lowercase: টেক্সটকে সব ছোট (lowercase) করবে।<p class="pure-text-transform-lowercase">This text is lowercase.</p>.pure-text-transform-capitalize: প্রতিটি শব্দের প্রথম অক্ষর বড় (capitalize) করবে।<p class="pure-text-transform-capitalize">This text is capitalized.</p>
8. Heading Classes
Pure.CSS এ আপনার হেডিংগুলির জন্য কিছু স্টাইল আছে। এই হেডিং ক্লাসগুলো পেজে বড় হেডিং তৈরি করতে সহায়ক।
.pure-heading: সাধারণ হেডিং।<h1 class="pure-heading">This is a heading.</h1>.pure-heading-2: দ্বিতীয় স্তরের হেডিং।<h2 class="pure-heading-2">This is a level 2 heading.</h2>
9. Lists
Pure.CSS এ ordered এবং unordered লিস্টের জন্য স্টাইল রয়েছে:
.pure-list: সাধারণ লিস্ট।<ul class="pure-list"> <li>Item 1</li> <li>Item 2</li> </ul>.pure-ol: অর্ডার্ড লিস্ট।<ol class="pure-ol"> <li>First item</li> <li>Second item</li> </ol>
Pure.CSS এর default typography classes ওয়েব ডেভেলপমেন্টে স্টাইলিং করার জন্য সহজ এবং সিম্পল পদ্ধতি প্রদান করে। এই ক্লাসগুলির মাধ্যমে আপনি টেক্সট সাইজ, লাইন হাইট, টেক্সট অ্যালাইনমেন্ট, টেক্সট স্টাইল, বোল্ড, ইটালিক, কেস ট্রান্সফরমেশন, ফন্ট-ওয়েট ইত্যাদি খুব সহজে কাস্টমাইজ করতে পারেন। আপনি সহজেই এই ক্লাসগুলো আপনার HTML পৃষ্ঠায় ব্যবহার করতে পারেন, যা ওয়েবসাইটের ডিজাইন এবং পাঠযোগ্যতা উন্নত করতে সাহায্য করবে।
Read more
