দুই একে দুই
ওয়েবসাইট মেকআপের সবকিছু <style> </style > এর ভিতর থুই
দুই দুই গুনে চার
কোলন(:) দিয়ে বুঝাবো কে কাহার
কোলনের বামপাশ জায়গাটা বৈশিষ্ট বা প্রপার্টি রাখার
আর ডানপাশটা value বা মানের আধার
সেমিকোলন(;) দিয়ে শেষ করি যুগলের বাহার
{ } এর ভিতরে রাখি সব যুগলের সমাহার
{ } এর আগে লিখি স্টাইলগুলা কার জন্যে উপহার
তিন দুই গুনে ছয়
রং কে ইংরেজিতে color কয়
হায় হায়, এই জিনিস শিখতে কইলে লাগে ভয়
h1 হেডারকে সবুজ করতে h1{ color: green; } লিখতে হয়
চার দুই গুনে আট
শিখে গেলাম html element এর সাথে কেমনে স্টাইল করব ফিটফাট
নতুন element যোগ করলে আগের স্টাইল করে ফেলবে কুপোকাত
পাচ দুই গুনে দশ
কোনো একটা element কে id দিয়ে স্টাইল দিলে, অন্যদের হবে লস
<h3 id=”laltu”></h3 >লিখেই ভাব ধরে তুই রেস্ট নিতে চাস
#laltu { color : red; } টা বুঝলে সত্যিই হয়ে যাবি বস
ছয় দুই গুনে বারো
class দিয়ে অনেক element কে একসাথে স্টাইল দিতে পারো
<p class=”putu”></p >লিখে element এ class যোগ করো
.putu { color:navy;} দিয়ে <style></style > এর ভিতর ধাক্কা মারো
সাত দুই গুনে চৌদ্দ
কোনো element কে background-color:pink; দিয়ে হই মনোমুগ্ধ
একইভাবে id বা class এর পিছনে রং দিতে জানে সব আবালবৃদ্ধ
আট দুই গুনে ষোল
কোনোদিনও ভুলোনা, কত্তো আদ্দর ছিলো বাবা মায়ের কোলো
border:1px solid red; দিয়ে সীমানা দেখায়, তা আগেই জানা ছিলো
margin দিয়ে একটা element অন্য element থেকে দূরে সরানো হলো
padding দিয়ে border থেকে লেখাগুলোকে দূরে ঠেলে দেয়া গেলো
border-radius:10px দিলে চোখা কোনোকানিগুলো রাউন্ড হয় কিনা বলো
নয় দুই গুনে আঠারো
width:500px; দিলে নিদৃষ্ট প্রস্থ দিতে পা পা পা পা পারো
দশ দুই গুনে বিশ
background-image:url(‘feb.jpg’); একটা কঠিন জিনিস
feb.jpg একটা ছবির নাম সেটাতো বুঝতে পারিস
না হলে ভিডিও দেখে বুঝে নিস
অথবা কচিকাচাদের স্কুলে (http://www.w3schools.com/css/css_background.asp) ঘুরে আছিস
শেষকথা
স্টাইল সম্পর্কে আরো জানতে কচিকাচাদের স্কুল (http://www.w3schools.com/css/css_intro.asp)
সব কালারের নাম পাবেন এইখানে (http://www.w3schools.com/cssref/css_colornames.asp)
ইচ্ছে মতো কালার করতে কালার পিকার (http://www.colorpicker.com/) থেকে কালার নাম্বার নিন
তার পরে {color:#163035;} লিখুন
অথবা R,G,B, ভ্যালু জেনে লিখুন {color:rgb(255,5,0);}
সলিড বর্ডার না দিয়ে dashed বা dotted স্টাইলও দিতে পারেন
কিচ্ছু করার নাই, তাইলে গুগলের তেলেসমাতি দেখুন ইউটুবে (http://youtu.be/EG95SVwxJnE) বা ফেইসবুকে (https://www.facebook.com/photo.php?v=10151209448421891)
প্রশ্ন থাকলে কমেন্ট করুন, শিখতে পারলে শেয়ার করুন
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন