Awesome! টিউনস
সকল Awesome! টিউনস

সিএসএস শিখুন ক্যারিয়ার গড়ুন [পর্ব-০২] :: সিএসএস সিনট্যাক্স ও সিলেক্টর এর ব্যবহার

1,768 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 2

13 টিউনস 9 টিউমেন্টস 1 ফলোয়ার

সিএসএস শিখুন ক্যারিয়ার গড়ুন

হ্যালো বন্ধুরা আপনারা কেমন আছেন? আপনাদের জন্য আমার সিএসএস এর ২য় পর্ব নিয়ে এলাম। আমরা সিএসএস এর ২য় পর্বে সিএসএস এ সিনট্যাক্স ও সিলেক্টর এর ব্যবহার সম্পর্কে জানব। তো চলুন আমাদের আজকের আলোচনা শুরু করা যাক।

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


<!DOCTYPE html>
<html>
<head>

<img src="data:image/gif;base64, R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ap%20%7Bcolor%3A%20red%3B%20text-align%3A%20center%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>



Hello World!



These paragraphs are styled with CSS.


</body>
</html>

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

এবার দেখুন টেক্সটকে কীভাবে সিলেক্ট করে ইচ্ছা মতো ব্যবহার করা যায়।


<!DOCTYPE html>
<html>
<head>

<img src="data:image/gif;base64, R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ap%20%7Btext-align%3A%20center%3B%20color%3A%20red%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>



This paragraph will be affected by the style.



What's up!



Ohh Shit!


</body>
</html>

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

 

<!DOCTYPE html>
<html>
<head>

<img src="data:image/gif;base64, R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ap.center%20%7Btext-align%3A%20center%3B%20color%3A%20red%3B%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>


<h1 class="center">This heading will be Black</h1>



This paragraph will be red and center-aligned. 

</body>
</html>

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

এখন আপনি তো কোডিং পেয়ে গেলেন কাজ করবেন কীভাবে? সেটা হলো লক্ষ্য করুন স্টাইল ট্যাগের পর আপনাকে কালার এবং টেক্সট রাখার জন্য ট্যাগ ব্যবহার করতে হয়েছে। এরপর আপনাকে যে ট্যাগ ব্যবহার করতে হয়েছে তা হলো আপনার টেক্সটের জন্য ফন্ট সাইজ ঠিক করে দেয়া। এখানে আপনি আপনার ইচ্ছা মতো ফ্নট ঠিক করে নিতে পারবেন। এরপর ব্যবহার করা হয়েছে হেডিং করার জন্য হেডিং ট্যাগ এবং সাধারণ পেজ লেখার জন্য প্যারাগ্রাফ ট্যাগ।

তো আজকে টপিকের এইটুকুই আপনাদের দিলাম। আরো অকে আছে আপনারা প্রাকটিস করলেই তা পারবেন। এরপর অন্য কোনো টপিক নিয়ে আসব। আর অবশ্যই আপনারা ভালোভাবে প্রাকটিস করবেন আর কোনো সমস্যা হলে আমাকে জানাবেন। যথাসম্ভব চেষ্টা করব আপনার সমস্যা সমাধান করার জন্য।
আপনাদের অসংখ্য ধন্যবাদ।

Level 2

আমি মাহাদী হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 5 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 9 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।

নতুন কিছু শিখতে ভীষণ আগ্রহী

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস