??? ?? ?? 2?? ?? ???? CSS ?????.

?? CSS ??

1. CSS ??(??? ?? ??):

   • --property ??? ???? ??? ??? ?? ???? ??? ?????.
   • ?:

    :root {  
        --main-color: #3498db;  
        --font-size: 16px;  
    }  
    h1 {  
        color: var(--main-color);  
        font-size: var(--font-size);  
    }  
   

2. CSS ??? ????:

   • ??? 2D ????? ?? ??? ??? ?? ???.
   • ???-???-?, ???-???-? ? ???-?? ?? ?? ?????.
   • ?:

    .container {  
        display: grid;  
        grid-template-columns: 1fr 2fr;  
        grid-gap: 10px;  
    }  
   

3. Flexbox(?? ??):

   • align-content, order ? ??? flex ????? ?? ??? ?????.

4. CSS ?? ?? ? ?? ???:

   • :nth-child, :not() ? ? ??? ?? ???? ?????.
   • ?:

    li:nth-child(odd) { background-color: #f4f4f4; }  
    div:not(.active) { opacity: 0.5; }  
   

5. ??? ???? ?? ??? ?? ???:

   • ??? ?? ?? ??.
   • ?:

    @media (max-width: 768px) {  
        body { font-size: 14px; }  
    }  
   

6. CSS ?????:

   • @keyframes ? ????? ??? ???? ???? ??? ????.
   • ?:

    @keyframes slideIn {  
        from { transform: translateX(-100%); }  
        to { transform: translateX(0); }  
    }  
    .box {  
        animation: slideIn 1s ease-in-out;  
    }  
   

7. CSS ??(?? ?? ??):

   • ?? ?? ? ?? ??.
   • ?:

    button:hover {  
        background-color: #3498db;  
        transition: background-color 0.3s ease;  
    }  
   

8. CSS ??:

   • ??, ?? ??, ???? ? ??? ?????.
   • ?:

    .card:hover {  
        transform: scale(1.1) rotate(5deg);  
    }  
   

9. CSS ?????(Tailwind, Bootstrap ?):

   • ?? ??? ?? ?????? ???? ??? ??? ?? ?????.

10. ???? ?? CSS:

    • ?? ??, ARIA ?? ???, ??? ??.
    • ?:

      a:focus { outline: 2px dashed #3498db; }  
    

11. ?? ??? CSS:

    • ??? ??? ?? @media(prefers-color-scheme)? ?????.
    • ?:

      @media (prefers-color-scheme: dark) {  
          body { background-color: #121212; color: #fff; }  
      }  
    

12. CSS ???:

    • ??? ??? ? ??? ??? ???? ??? ???? ??? ????.
    • ?:

      ol { counter-reset: section; }  
      li::before { content: counter(section) ". "; counter-increment: section; }  
    

13. CSS ?? ? ???:

    • ???? ????? ?? ?? ??? ??? ?????.
    • ?:

      .circle {  
          clip-path: circle(50%);  
      }  
    

14. CSS ??? ? ??? ??:

    • ??? ???? ?? ?? ??? ??? ???.
    • ?:

      .image {  
          mask-image: url(mask.png);  
          mix-blend-mode: multiply;  
      }  
    

15. CSS ??? ??:

    • ???-?? ?? ? ???-?? ??? ?? ???? ???.
    • ?:

     :root {  
         --main-color: #3498db;  
         --font-size: 16px;  
     }  
     h1 {  
         color: var(--main-color);  
         font-size: var(--font-size);  
     }  
    

16. CSS ?? ??:

    • ??? ????(??-???, ??-??)? ??? ??? ?????.

17. CSS ???:

    • ??? CSS ??? ???? ??? API? ?????.

18. CSS ?? ???:

    • ???? ??, GPU ?? ??, CSS ?? ???? ?? ?.

19. CSS ??? ?? ? ??:

    • ???? ??? ???? ????? ???? DevTools? ?????.

20. CSS? ??:

    • @container ??, ?? ???, ?? ??? ?? ??? ??? ?? ?????.

?????. ?? Abhay Singh Kathayat???!
?? ?????? ??? ?? ??? ?? ?? ??? ?? ??? ??????. ?? ????? ?? ???? ??? ???? ??????? ???? ?? ??? ????? ??? ?????? ???? ?????.
? ???? ???(kaashshorts28@gmail.com)? ???? ?????.

? ??? ?? CSS ??: ?? ? ??? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!