grid تمرین

        
            ≪!DOCTYPE html≫
            ≪html lang="en"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
                ≪title≫Document≪/title≫
                ≪style≫
                    .container{
                        display: grid;
                        grid-template-columns: 20% 80%;
                        grid-template-rows: 25% 75%;
                        height: 600px;
                    }

                    .item{
                        background-color: grey;
                        border: 1px solid rgb(41, 41, 41);
                        margin: 5px;
                        border-radius: 5px;
                    }
                    .item-container{
                        display: grid;
                        grid-template-columns: 30% 70%;
                        grid-template-rows: 50% 50%;
                    }
                    .item-one{
                        background-color: rgb(46, 68, 61);
                        border: 1px solid white;
                        margin: 5px;
                        border-radius: 5px;
                    }
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪div class="container"≫
                    ≪div class="item"≫A≪/div≫
                    ≪div class="item"≫B≪/div≫
                    ≪div class="item"≫C≪/div≫
                    ≪div class="item item-container"≫
                        ≪div class="item-one"≫E≪/div≫
                        ≪div class="item-one"≫F≪/div≫
                        ≪div class="item-one"≫G≪/div≫
                    ≪/div≫    
                ≪/div≫
            ≪/body≫
            ≪/html≫
        
    

روش های مختلف برای فراخوانی تگ در استایل

        
            ≪!DOCTYPE html≫
            ≪html lang="en"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
                ≪title≫Document≪/title≫
                ≪style≫
                    div p{
                        font-size: xx-large;
                        color: blue;
                    }
                    section ≫ p{
                        font-size: xx-large;
                        color: yellow
                    }
                    h1 ~ a {
                        font-size: xx-large;
                        color: blueviolet;
                    }
                    ul:nth-child(2){
                        font-weight: bolder;
                        color: orange;
                    }
                    .my-class{
                        position: relative;
                    }
                    .my-class::after{
                        content: "NEW";
                        position: absolute;
                        right: -10px;
                        top: -10px;
                        color: white;
                        background-color: red;
                    }
                    .my-class::before{
                        content: "Hirad";
                        position: absolute;
                        left: -10px;
                        top: -10px;
                        color: white;
                        background-color: red;
                    }
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪div≫
                    ≪p≫Paragraph 1≪/p≫
                    ≪span≫
                        ≪p≫Paragraph 2≪/p≫
                    ≪/span≫
                ≪/div≫

                ≪section≫
                    ≪p≫Paragraph 3≪/p≫
                    ≪span≫
                        ≪p≫Paragraph 4≪/p≫
                    ≪/span≫
                ≪/section≫

                ≪h1≫Title≪/h1≫
                ≪p≫من اومدم≪/p≫
                ≪a href=""≫Link 1≪/a≫
                ≪a href=""≫Link 2≪/a≫

                ≪ul≫
                    ≪li≫First item≪/li≫
                    ≪li≫Second item≪/li≫
                    ≪li≫Third item≪/li≫
                    ≪li≫Forth item≪/li≫
                    ≪li≫Fifth item≪/li≫
                ≪/ul≫

                ≪button class="my-class"≫New Product≪/button≫
            ≪/body≫
            ≪/html≫
        
    

css تعریف کردن شرط در

        
            ≪!DOCTYPE html≫
            ≪html lang="en"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
                ≪title≫Document≪/title≫
                ≪style≫
                    :root{
                        --primary-color:#ad0707;
                        --secondary-color : #1abcc2;
                        --third-color:#942a2a;
                    }
                    body{
                        background-color: var(--primary-color);
                        display: flex;
                        justify-content: center;
                    }
                    div{
                        background-color: var(--secondary-color);
                        width: max(50% , 300px);
                        height: 1000vh;
                    }
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪div≫≪/div≫
            ≪/body≫
            ≪/html≫