style.css

/*JIS TAG KI PROPERTY HAI,USI TAG ME CSS LAGEGI */


*{
    font-family: 'Times New Roman';
}

/* 
3 ways to add CSS in html 
1. Inline CSS
<h1 style="color: red; font-size: 20px;">This is an h1 heading</h1>

2. Internal CSS
<head>
  <style>
    h1 {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

3. External CSS
Add below code in html 
<head>
  <link rel="stylesheet" href="style.css">
</head>
Then create .css file
    h1 {
      color: red;
      font-size: 20px;
    }
*/

/*

SELECTORS
1. Universal Selector(Apply on Whole Document)
    *{}
2. Element Selector
    h1 { }
3. Id Selector
    #Id { }
4. Class Selector
    .Class { }

*/

/* Element Selectors */
.heading1{
    text-align: center;
    text-decoration: underline;
}

h2{
    color: green;
}

/* class */

h3{
    background-color: rgb(121, 145, 224);
    font-weight: lighter;
}
#heading3{
    background-color: rgba(121, 145, 224, 0.25);
    font-weight: lighter;

}
/* 
R= 00-ff Red
G= 00-ff Green
B= 00-ff Blue
A= 0-1 Opticity
*/
h4{
    background-color: #7991e0 ;
}
button{
    color: rgb(0, 39, 43);
    background-color: pink;

}

#box{
    background-color: blue;
}
.heading{
    color: red;
}

#para1{
    text-align: center;
    font-family:arial;
    font-size: 20px;
    line-height: 45px;
    text-transform: capitalize;

    /* if not browser does not support Segoe UI then Tahoma,
    if Tahoma not supported then  Geneva,
    .........................sans-serif.
    if none supports then Times New Roman (serif) */
}

#para2{
    text-align: left;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 110%;
    line-height: 80%;
    text-transform: lowercase;
    height: 200px;
}

#para3{
    height: 50vh;/*Responsive height*/
    width: 60vw;/*Responsive width*/
    background-color: pink;
    border-width: 10px;
    border-style:ridge;
}

.boxmodel{
    height: 100px;/*height of the box */
    width: 140px;/*width of the box */
    background-color: #21c766;
    color: white;
    /* border-width: 4px;
    border-style:dashed;
    border-color: black; */
    border: 4px dashed rgb(0, 0, 0);/* Border shorthand= width style color*/
    border-radius: 10px;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 10px;/* space between lines */
    font-weight : lighter;
    /* padding-top: 10px;USED TO ADD SPACE b\w BORDER and CONTENT
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 50px; */
    padding: 10px 0px 10px 50px; /* Padding Shorthand= top | right | bottom | left -> clockwise*/
    /* margin-right:00px; USED TO ADD SPACE b\w CONTENT AND CONTENT
    margin-left:100px;
    margin-top:100px;
    margin-bottom:100px; */
    margin: 1px 2px 3px 4px;/* Margin Shorthand top | right | bottom | left -> clockwise */
}

.link1{
    text-decoration: none;
    font-weight : lighter;
}
#doubleid1.three{ color: blue; }
.three{ color: red; }

#navbar{
   height: 60px; 
   background-color: black;
   

}

#navbarlink{
    margin-right: 200px;
    color: orange;
}

#navbaraccount{
    margin-right: 200px;
    color: white;
}

#navbarmycart{
    margin-right: 200px;
    color: white;

}

#navbarcontactus{
    margin-right:200px;
    color: white;
}

#navbarbutton{
    color: white;
    background-color: #f08804;
}

#divblock{
    background-color: pink;
    display: inline;/*Only take space required by the element. (no margin/ padding) */
}

#buttoninline{
    background-color: pink;
    display: block;
}

#box1{
    background-color: red;
    height: 100px;
    width: 100px;
    display: inline-block;/*Only take space required by the element with margin and padding*/
    background-image: url(img/Sanskar.png);
    background-size: contain;
}

#box2{
    background-color: blue;
    height: 100px;
    width: 100px;
    display:none;/* document is hidden and no space is reserved for the element.*/
}

#box3{
    background-color: green;
    height: 100px;
    width: 100px;
    visibility:hidden;/* document is hidden but space is reserved for the element.*/
    display: inline-block;

}

#box4{
    background-color: green;
    height: 100px;
    width: 100px;
    text-align: center;
    display: inline-block;
    background-image: url(img/Sanskar.png);
    background-size:cover;
}

#box5{
    background-color:turquoise;
    height: 100px;
    width: 100px;
    border: 3px solid black;
    text-align: center;
    display: inline-block;
    position: static;/*Default,koi farak ni padta*/
}
#box6{
    background-color:cornflowerblue;
    height: 100px;
    width: 100px;
    border: 3px solid black;
    text-align: center;
    display: inline-block;
    position: relative;/*change w.r.t it's own current position */
    bottom: 60px;

}
#box7{
    background-color:#f08804;
    height: 100px;
    width: 100px;
    border: 3px solid black;
    text-align: center;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position:fixed;/* element removed for the workflow(sequence),change w.r.t it's ancestors/parents/previous.MOVE on scrolling  */

}
/* Absolute depends on it's all parents and sometimes browser...DOGLA BTC*/
#box8{
    background-color:blueviolet;
    height: 100px;
    width: 100px;
    border: 3px solid black;
    text-align: center;
    display: inline-block;
    position: fixed;/*changes are applied w.r.t viewport/browser,removed from the workflow,not move on scrolling*/
    bottom: 0px;
}

#box9{
    background-color:blueviolet;
    height: 100px;
    width: 100px;
    border: 3px solid black;
    text-align: center;
    display: inline-block;
    position: sticky;
    /* Will be fixed as soon as it is seen */
}


#flexcontainer{
    height: 500px;
    width: 800px;
    border: 5px solid black;
    text-align: center;
    display:flex;
}

#headinglast{
    text-align: center;
}

#Dibba1{
        height: 100px;
        width: 100px;
        border: 2px solid red ;
        background-color:chocolate;
}
#Dibba2{
        height: 100px;
        width: 100px;
        border: 2px solid red ;
        background-color:rgb(51, 87, 232);
}
#Dibba3{
        height: 100px;
        width: 100px;
        border: 2px solid red ;
        background-color:violet;
}
#Dibba4{
        height: 100px;
        width: 100px;
        border: 2px solid red ;
        background-color:rgb(0, 255, 162);
}
#Dibba5{
    height: 100px;
    width: 100px;
    border: 2px solid red ;
    background-color:rgb(81, 255, 0);
}


/*
units of sizes

1.px
2.em - x times of parent value/size
3.vh/vw
4.%

*/

/* viewport is:

Width: The width of the viewport is the width of the browser window.
Height: The height of the viewport is the height of the browser window. */

/* z-index 
z-index: auto; (Default=0)
z-index: 0;
z-index: -1;

*/


/* Sizes */
/*

%- it totally depends upon its immediate parent
vh-viewport height
vw-viewport width

*/


/* ID must start with a letter (a-z or A-Z).*/
/* ID can contain alphabets numbers - . _ : */
/* ids and class names does not contain spaces */
/* it is adviced to use background-size: cover; 
/* Default size is 16px */