Welcome to TrickBD
কেমন আছেন সবাই। আশা করি অনেক ভাল আছেন, আমিও ভাল আছি। আমরা আগেই ৩টা পার্ট দেখেছি, আর সমাপ্ত পর্ব। TrickBD তে কোড দিলে প্রবলেম হয় অনেকেই জানেন। তাই আমারও সমস্যা হচ্ছে এ নিয়ে। তাই ভাবছি HTML & CSS নিয়ে একটা চমৎকার Apps উপহার দেব শিগ্রই। আজ আমরা CSS এর নিয়মটা শিখে নেই, তাহলে নিজে নিজেই যেকোন CSS বানাতে পারবেন। তাহলে আর অপেক্ষা কেন, চলুন শুরু করা যাক।

CSS এর Elements সমুহকে আমি কয়েকটি ভাগে ভাগ করে নিয়েছি সুবিধার জন্য।

  • Main Css
  • Css for Fonts
  • Other Elements
Main Css

.rakhib{background: #ddd;
color: #5D6D7E;
border: 2px solid #eee;
margin: 6px 6px 6px 6px;
padding: 6px 6px 6px 6px;

}

Eelemets ব্যাখ্যা

background: #ddd;
এটা দিয়ে ব্যাক-গ্রাউন্ড কালার কে বুঝানো হয়। #ddd হল
color-code, এখানে আপনার ইচ্ছামত কালার কোড নিতে পারবেন।
যেমন__
background: #4f5d7c;
background: red;
background: black;

border: 2px solid #eee;
এটা দিয়ে Boder কে ডিটেক্ট করা হয়। অর্থাৎ, #eee কালারের 2px মোটা চারদিকে বর্ডার হবে।

margin: 6px 6px 6px 6px;
margin সম্পর্কে আগে লিখেছি। এটা border এর বাহিরের অংশ। 6px হল তার আকার, কতটুকু মোটা হবে, left, top, bottom, right.
px যত বাড়ানো হবে বাহিরে তত বেশি জায়গা দখল করবে।

padding: 6px 6px 6px 6px;
padding সম্পর্কে আগে লিখেছি। এটা border এর ভেতরের অংশ। 6px হল তার আকার, কতটুকু মোটা হবে, left, top, bottom, right.
px যত বাড়ানো হবে ভেতরে তত বেশি জায়গা দখল করবে।

[note: আমরা কালার কোড & px পরিবর্তন করে নিজে নিজে Run করাতে চেষ্টা করি।]

Css for Fonts

.rakhib{background: #ddd;
border:2px solid #eee;
margin: 6px 6px 6px 6px;
padding: 6px 6px 6px 6px;

color: #5D6D7E;
font-family:serif,cursive;
font-size: 14px;
font-weight:normal;
text-align:center;
line-height: 1.0em;
}

Eelemets ব্যাখ্যা

color: #5D6D7E;
এটা দিয়ে ওই class এর font color কেমন হবে তা বুঝায়।
ইচ্ছা মত কালার দিতে পারবেন।

font-family: serif, cursive;
font-family হল লেখা গুলো কোন ফন্টে show হবে তা বলে দেয়। নানা রকম ফন্ট নেম আছে। যা আপনি ব্যবহার করতে পারেন।

font-size: 14px;
এটা দিয়ে ফন্টের আকার বুঝায়, বড় হবে নাকি ছোট হবে।

font-weight: normal;
এটা দিয়ে ফন্ট সমুহ কেমন হবে তা বুঝায়, নরমাল হবে নাকি মোটা হবে, নাকি ইতালিক, (normal/bold/italic)

text-align:center;
লেখা গুলো class এর কোথায় প্রদর্শিত হবে তার কাজ করে। (left/right/center) ইচ্ছা মতো দেয়া যাবে।

line-height:1.0em;
line-height দিয়ে দুইটা লাইন পরস্পর কর দুরে হবে তা বলে দেয়।

Other Css

.rakhib{background: #ddd;
color: #5D6D7E;
margin: 6px 6px 6px 6px;
padding: 6px 6px 6px 6px;

font-family:serif,cursive;
font-size: 14px;
font-weight:normal;
text-align:center;
line-height:1.0em;

text-decoration:none;
display:block;
list-style:none;
opacity:0;
translation: 1s;
position:absulote;
over-flow-wrap: break-word;
}

আমার কাজ মোটামুটি শেষ। এখন আপনার কাজ, মানে ইলিমেন্ট px পরিবর্তন করবেন এবং HTML run করবেন বার বার।
কালার পরিবর্তন করবেন & run করাবেন। যতক্ষন না ওইটা মাথায় ডুকছে, খুজে বের করুন, ওই ইলিমেন্ট টা HTML এর কোথায় কেমন করে কাজ করে। তাহলেই আপনার আয়ত্বে চলে আসবে।
এভাবে ভিন্ন ভিন্ন Css class বানান,
যেমন,
.rakib{
}

.rakib2{
}

.rakib3{
}

.rakib4{
}

দেখবেন যেন সব গুলো মিল না থাকে। একটার 6px হলে আরেকটাই 8px/9px, একটা center হলে আরেকটা left ব্যবহার করুন। কমেন্ট করে জানাবেন, কে কত সুন্দর এবং কত ভাল CSS class বানিয়েছেন। একটা কথা মনে রাখবেন, যত Edit & run করাবেন, তত বেশি তাড়া-তাড়ি শিখতে পারবেন।

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

54 thoughts on "ওয়েব ডিজাইন হবে তোমার ইচ্ছে মতো, Html & CSS+ শিখার এটাই সুযোগ | আর নয় কোড কপি-পেস্ট Part-04 | (শেষ পর্ব)"

  1. Trickbd Support Trickbd Support Moderator says:
    Rewarded TK 50.
    Today is reward Day.
    Cheers….
    (:
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      Ohh My God. I can’t believe it.. It totally amazing. Thanks a lot TrickBD Team…
        1. pjtuhin Contributor says:
          আমার author id এর password ভুলে গেছি।এখন password forgott দিলে gmail এmail আসে না spam folder এও আসে নাই। please help me.
    2. Tanvir190 Tanvir190 Contributor says:
      এনার পোস্ট গুলোকে সংশোধন করতে বলুন
  2. JK JK Contributor says:
    osadharon
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      Tnx bro..
  3. HABIB99 HABIB99 Contributor says:
    খুব সুন্দর পোস্ট আর অভিনন্দন trickbd team এর প্রাইজ পাওয়ার জন্য
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      Hmm… Ekta amazing surprise.
  4. HABIB99 HABIB99 Contributor says:
    খুব সুন্দর পোস্ট আর অভিনন্দন trickbd team এর প্রাইজ পাওয়ার জন্য
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      👍👍👍
  5. SK SHARIF SK SHARIF Author says:
    পোস্ট কেমন সেটা পরের কথা! আপনার চেস্টা খুব ভাল, পদ্ধতিও খুব ভাল! আর পোস্ট গুলিও খুব ভাল! অভিনন্দন।
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      অনেক অনেক ধন্যবাদ একটা ভাল রিভিউ পাওয়ার জন্য।
      1. SK SHARIF SK SHARIF Author says:
        হুম স্বাগতম! চালিয়ে যান পাশে আছি! আর আমাদের মত অনেকেই আছে যারা সময়ের অভাবে সময় দিতে পারেনা এখানে! তাদের শুন্যতা পুরনে আপনারাই যথেষ্ট! 😍😍
        1. Tanvir190 Tanvir190 Contributor says:
          তোরা ভাল হবি না।
          1. SK SHARIF SK SHARIF Author says:
            দাদা ভাই কে আপনি?
  6. MD RAISUL ISLAM Firoj Contributor says:
    ওয়ার্ডপ্রেস সাইট এ কীভাবে HTML+CSS দিয়ে সাইট ডিজাইন করব এইরকম একটা পোস্ট দিলে ভালো হবে।
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      হুমম.. WordPress php হলেও Design কিন্তু HTML + Css দিয়েই করা হয়।
    2. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      আপনি কিসের ডিজাইন করতে চান, আমাকে বলতে পারেন।
  7. MD RAISUL ISLAM Firoj880 Contributor says:
    ??? ???? ?????? ???? ???? ?????? ?????? ???? ???? ???? ??? ??????? Whatsapp ????????? ??? ?? ???? ????? ?????? ??? ???????????
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      WhatsApp nai.. Bt fb/rh.devilzcoder.
  8. MD RAISUL ISLAM Firoj880 Contributor says:
    ??? ???? ?????? ???? ???? ?????? ?????? ???? ???? ???? ??? ??????? Whatsapp ????????? ??? ?? ???? ????? ?????? ??? ???????????
  9. MD RAISUL ISLAM Firoj Contributor says:
    Bai Ami Apnar sahte site design somporke Kico Kota bolte Cai Apnar whatsapp namber ta den na dite caile Amar ta nen 01642744782
  10. SH IMRAN SH IMRAN Contributor says:
    এগুলা কি ওয়াপকাতে কাজ করবে?
    —-অভিনন্দন——–
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      Jkono website a kaj kore..
    2. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      Wapka, WordPress.. Sob site a Html+css kaj kore..
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      Hmmm.. Fb te sms koro. Fb/rh.devilzcoder
  11. Labib Labib Author says:
    ভালো হয়েছে। এবং অভিনন্দন।
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      ধন্যবাদ ব্রো..
  12. এইচটিএমএল সিএসএস এর বেসিক জানা থাকলে ট্রিকবিডিতে কোড লিখায় কোন প্রব্লেম হবার কথা না ইউজ টু রাইট এনি কোড
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      হুমম
  13. kmriazahamed kmriazahamed Contributor says:
    apps কবে পাব????
    সবচেয়ে ভাল হয় যদি php এর উপর এমন সুন্দর করে একটা apps উপহার দেন।
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      PHP..? Ok, vebe dekbo.. Vabcilam Html & css Niye Apps debo…
      1. kmriazahamed kmriazahamed Contributor says:
        ভাই html css মোটামুটি সবাই পারে সহজও আছে
        আপনার পোষ্ট দেখে আরো ক্লিয়ার হয়ে গেছে।
        সবচেয়ে ভাল হয় এবং আমরা উপকৃত হব যদি php এর উপর এমন সুন্দর ও সহজ ভাবে টিউটোরিয়াল apps আকারে উপহার দেন
        ধন্যবাদ।
  14. TrickBD Lover Saimum Saimum Raihan Contributor says:
    প্লিজ আপনার ফেসবুক আইডি লিনক টা দিন অথবা আমাকে রিকুয়েস্ট দিন I am on fb
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      Fb/rh.devilzcoder
  15. jui3999 Contributor says:
    What is author vs contributor
  16. Tanvir190 Tanvir190 Contributor says:
    আপনার এই পোস্ট গুলো পড়ে আমার একটুও ভাল লাগেনি। বিষয়গুলো অস্পষ্ট এবং ভুল ভাবে উপস্থাপন করা হচ্ছে।
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      Opps. Its ok bro. Refresh your memory.
      1. Tanvir190 Tanvir190 Contributor says:
        ভাব লন, না।
        ট্রিকবিডি সাইটাই জানি কেমন।
  17. Tanvir190 Tanvir190 Contributor says:
    css এ elements পাইছেন কোথায় আপনি?
    1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
      To css a ki take.?? Bro?
      1. Tanvir190 Tanvir190 Contributor says:
        selector, property , value
        1. ⚠ Error Format ⚠ Error Format Author Post Creator says:
          নির্দেশক, সম্পত্তি, মু্ল্য??? অর্থ তো এটায় দাড়ায়.. Ha ha ha.. Bt css er modde ki নির্দেশক, সম্পত্তি, মু্ল্য থাকে???
          1. Tanvir190 Tanvir190 Contributor says:
            তা css কি থাকে?
            যা মনে চায় তাই বলেন, যত্তসব মাথা মোটার দল।
  18. ⚠ Error Format ⚠ Error Format Author Post Creator says:
    It was Spam bro!! Do Not spam in this website.
  19. Rasel Tips Rasel Tips Contributor says:
    Vai akta site desine korte hobe

    Apnar fb link den

Leave a Reply