CSS Selecor

  • Common Selectors
  • Child Selectors
  • Sibling Selectors
  • Attribute Selectors
  • Pseudo-classes
  • Position Pseudo-classes
  • Target Pseudo-class
  • Empty Pseudo-class
  • Negation Pseudo-class
  • Textual Pseudo-elements
  • Content Pseudo-elements
  • Single Colon (:) versus Double Colons (::)
  • Selector Browser Support
  • Source: Check

Css Unit

  • 1em = font-size of parent size(x)
  • 2em = font-size of parent size(2x)
  • 1.5em = font-size of parent size(1.5x)
    • jodi first parent e font-size na thake then next parent
  • 1rem = browser font size(x)
  • 2rem = browser font size(2x)
  • 1.5rem = browser font size(1.5x)
    • how to find browser font size: setting then write: font-size browser font-size = 1rem; calculate of rem: let browser font-size: 16px; element size: 20px; then rem: 20/16=1.25rem;

CSS Inherit

  • Inherit: parent er style set korar jonno
  • style set na korle browser er style set kore. tokon inherit dile parrent er style nibe
  • Ex: color: inherit;
  • {*} eta global selector, inherit na. eta te style dile, all element e set hobe

CSS Box Model

  • ব্লক ইলিমেন্টে ধরি width:550px এবং padding: 10px, border: 5px তাহলে ব্লক এলেমেন্টের টোটাল width হবে = 550+ (10+10) + (5+5) =580px; এইটা ফিক্স করার জন্য box-sizing: border-box; ব্যবহার করলে ফিক্স হবে, তখন উইথ হবে: 550(with padding, border)
  • Inline এলিমেন্টে margin দিলে margin নেনা এটা ফিক্স করার জন্য display: inline-block; দিতে হবে, এর মানে কিছুটা inline, কিছুটা Block হিসেবে কাজ করে .
  • দুটি Block ইলিমেন্টের পাশাপাশি দিকে দুইটাতেই ভিন্ন ভিন্ন মার্জিন দেয়া যাবে না, দিলে যেটির বেশি মার্জিন সেটি কাজ করবে
  • box-sizing: border-box; dileo border er niche div er backroun-color gese, tai border er nise jaoa off korte, box-sizing: border-box;

CSS Positioning

CSS Grid


  • display:grid;
  • grid-template-columns: 200px 200px;
  • grid-template-rows: 100px 200px;
  • grid-template-columns: 100px auto 100px
  • grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr 1fr ;
  • grid-template: 1fr 2fr 1fr / 1fr 2fr 1fr;
    • grid-template: rows / colums
  • grid-gap: 2px; grid-column-gap: 1px; grid-row-gap: 2px;
  • grid-template: repeat(3 , 1fr) / repeat(4, 1fr);
    • line = column sonkha + 1 firts line thke suro korle 1, last line theke suro korle -1
  • .item{grid-column-start: 1; grid-column-end: -1; grid-column: 1 / 3; grid-column: 1 / -1; grid-column: 1 / span 3;
    grid-column: auto / span 3; grid-row: auto / span 3: এর মানে আইটেমটি যেখানে আছে সেখান থেকে শুরু করে ৩ লাইন পর্যন্ত যাবে Shortcut: grid-column: span 3; }
  • সাধারণভাবে 12 টি কলাম নিয়ে ওয়েবসাইট তৈরি করা হয়
    • Visualise layout:
    grid-template-areas: "h h h h h h h h h h h h h h"
    "m m m m i i i i i i i i i i"
    "f f f f f f f f f f f f f f" ;
    grid-area: h;
    grid-area for grid item
    কোন column অথবা row ফাঁকা রাখতে চাইলে ডট ব্যবহার করব grid-template-areas তে
  • Responsive Grid:
  • grid-template-columns: repeat(auto-fit, 200px);প্রত্যেকটি কলামের উইথ ২০০ করে ধরা হয়েছে এবং শেষের কলামের উইথ যদি ২০০ পিচ্ছিল খালি হয় তাহলে পরবর্তী একটি আইটেম নিবে।
  • কিন্তু যদি ধরে একশত ৫০ পিস দিলে খালি হয়েছে তাহলে দেখতে খারাপ দেখাবে তাই এটা ফিক্স করার জন্য minmax(min-width,max-width );
  • grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); যতক্ষণ পর্যন্ত ২০০ পিক্সেল না হবে ততক্ষণ পর্যন্ত কলামগুলো 1fr ধরা হবে
    auto-fit: দিলে কোন স্পেস(width) ফাঁকা থাকবে না, খালি(width) জায়গা হলে তা কলাম কে বন্টন করে দিয়ে পূরণ করবে কিন্তু auto-fill: দিলে খালি জায়গা থাকলে তা পূরণ করবে না . পূরণ না করে আরো width এর কলাম তৈরি করবে
  • auto-fit ব্যবহার করলে নিচে অটোমেটিক Row তৈরি হলে তার Height দেয়ার জন্য grid-auto-rows: 100px; বলে দিতে পারি (px, fr)
    Note: যদি অটো কলাম ফিক্স করতে = grid-auto-columns: 100px;
  • Grid Div Position(কোথায় Grid থাকবে) : justify-content, align-content
  • Grid itme এর content কোথা থেকে শুরু হবে: justify-items,align-items
  • কোন নির্দিষ্ট আইটেমের কনটেন্ট ঠিক করতে ওই কন্টেনে একটি ক্লাস ধরে ওই ক্লাসে ব্যবহার করতে হবে .itme{justify-self:value,align-self:value}
  • grid-auto-flow:dense;
    itme কলম বরাবর অথবা রো বাড়াবার বড় হলে তখন অন্য আইটেম না আসতে পারার জন্য খালি থাকে , তখন এটি ফিক্স করার জন্য এটি ব্যবহার করতে হয় .

    • CSS Dynamic Function

    Next Video