Learn CSS

Learn CSS

Type Selector
Class Selector
Id Selector
Text Color
Background Color
Text Align
Text Decoration
Font Wieght
Font Family
Text-Transform
Margin
Padding
Display-inline
Display-block
Display-none
Opacity Set-1
Opacity Set-2
Opacity Set-3
Border Style
Border Width and Color
Advance Level Border
Border Radius

<style>
    
    div{
    border:2px solid black;
    background-color: lightpink;
    }
    
    .a{
    border:2px solid green;
    background-color:lightblue;
    
    margin-top:10px;
    }
    .b{
    border:2px solid green;
    background-color:lightblue;
    
    margin-left:10px;
    }
    
    .c{
    border:2px solid green;
    background-color:lightblue;
    
    margin-right:10px;
    }
    
    .d{
    border:2px solid green;
    background-color:lightblue;
    
    margin-bottom:10px;
    }
    
    .all{
    border:2px solid green;
    background-color:lightblue;
    
    margin:10px;
    }
    
    </style>
    
    
    <h2>Margin - Individual Sides</h2>
    <div>
    <h1 class="a">Margin Top</h1>
    </div>
    
    <br/>
    
    <div>
    <h1 class="b">Margin Left</h1>
    </div>
    
    <br/>
    
    <div>
    <h1 class="c">Margin right</h1>
    </div>
    
    <br/>
    
    <div>
    <h1 class="d">Margin Bottom</h1>
    </div>
    
    <h2>All Side Margin</h2>
    
    <div>
    <h1 class="all">Margin All</h1>
    </div>

<style type="text/css">
    .solid {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: solid;
    }
    </style>
    <h3>Solid</h3>
    <div class="solid"></div>
    
    <style type="text/css">
    .dashed {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: dashed;
    }
    </style>
    <h3>Dashed</h3>
    <div class="dashed"></div>
    
    <style type="text/css">
    .dotted {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: dotted;
    }
    </style>
    <h3>Dotted</h3>
    <div class="dotted"></div>
    
    <style type="text/css">
    .double {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: double;
    }
    </style>
    <h3>Double</h3>
    <div class="double"></div>
    
    <style type="text/css">
    .inset {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: inset;
    }
    </style>
    <h3>Inset</h3>
    <div class="inset"></div>
    
    <style type="text/css">
    .outset {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: outset;
    }
    </style>
    <h3>Outset</h3>
    <div class="outset"></div>

<style type="text/css">
    .solid-2 {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: solid;
    border-width: 10px;
    border-color: blue;
    background-color: yellow;
    }
    </style>
    <h3>Solid</h3>
    <div class="solid-2"></div>
    
    <style type="text/css">
    .dashed-2 {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: dashed;
    border-width: 10px;
    border-color: blue;
    background-color: yellow;
    }
    </style>
    <h3>Dashed</h3>
    <div class="dashed-2"></div>
    
    <style type="text/css">
    .dotted-2 {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: dotted;
    border-width: 10px;
    border-color: blue;
    background-color: yellow;
    }
    </style>
    <h3>Dotted</h3>
    <div class="dotted-2"></div>
    
    <style type="text/css">
    .double-2 {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: double;
    border-width: 10px;
    border-color: blue;
    background-color: yellow;
    }
    </style>
    <h3>Double</h3>
    <div class="double-2"></div>
    
    <style type="text/css">
    .inset-2 {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: inset;
    border-width: 10px;
    border-color: blue;
    background-color: yellow;
    }
    </style>
    <h3>Inset</h3>
    <div class="inset-2"></div>
    
    <style type="text/css">
    .outset-2 {
    width: 250px;
    height: 200px;
    margin-left:20px ;
    border-style: outset;
    border-width: 10px;
    border-color: blue;
    background-color: yellow;
    }
    </style>
    <h3>Outset</h3>
    <div class="outset-2"></div>

<style type="text/css">
    .R1{
    width: 300px;
    height: 100px;
    margin-left:20px ;
    background-color:yellow ;
    border: 5px solid red;
    border-radius: 125px;
    }
    </style>
    <h3>Exampl~1</h3>
    <div class="R1"></div>
    
    <style type="text/css">
    .R2{
    width: 200px;
    height: 200px;
    margin-left:20px ;
    background-color:yellow ;
    border: 5px solid red;
    border-radius: 110px;
    }
    </style>
    <h3>Exampl~2</h3>
    <div class="R2"></div>
    
    <style type="text/css">
    .R3{
    width: 200px;
    height: 200px;
    margin-left:20px ;
    background-color:purple ;
    border: 5px solid blue;
    border-radius: 0px 125px 125px 125px;
    }
    </style>
    <h3>Exampl~3</h3>
    <div class="R3"></div>
    
    <style type="text/css">
    .R4{
    width: 200px;
    height: 200px;
    margin-left:20px ;
    background-color:purple ;
    border: 5px solid blue;
    border-radius: 0px 125px 0px 125px;
    }
    </style>
    <h3>Exampl~4</h3>
    <div class="R4"></div>
    
    <style type="text/css">
    .R5{
    width: 300px;
    height: 150px;
    margin-left:20px ;
    background-color:purple ;
    border: 5px solid blue;
    border-radius: 20px 0px 20px 0px;
    }
    </style>
    <h3>Exampl~5</h3>
    <div class="R5"></div>

Comments