CSS Learnings with Examples

if we want to move the child in the website page then we give position:relative to the parent and position:absolute to the child.

and if we want to see child in background of the parent we use z-index:9

#main h1{
    position: relative;
    /* for moving image to background */
    z-index: 9;
    width: 80%;
    margin-left: 8%;
  }
img{
  height: 35vh;
  position: absolute;
  top: 14%;
  left: 30%;
  }

/* line height */
h1{
    font-size:1 rem;
    line-height:1.2rem;
  }

/* border radius */
div{
    border-radius: 50%; /* 50% is used to circle the object*/
  }

/* Rotating the element */
div{
    rotate: -90deg;
    transform-origin: 0 0; /* x and y axis calculation of origin*/
  }

/* Gap between the elements */
nav{
    gap:30px;/* it gives 30px of gap for each element */
  }

/* Covering the element */
img{
   object-fit:cover;/* it covers the element */
  }

/* Opacity-> changing the visibility */
nav{
    opacity:0;/* it makes element invisible */
    opacity:1; /* it makes element visible again*/
  }

/* Opacity-> changing the visibility */
nav{
    opacity:0;/* it makes element invisible */
    opacity:1; /* it makes element visible again*/
  }

Making a Scroll Bar in a Page:

/*Making a scroll bar*/
#text-content {
      height: 40%;
      width: 100%;
      /* background-color: burlywood; */
      display: flex;
      overflow-x: auto;
  }

  #text-content::-webkit-scrollbar {
      background-color: transparent;
      height: 7px;
  }

  #text-content::-webkit-scrollbar-thumb {
      background-color: orangered;
  }

  .elem {
      flex-shrink: 0;
      height: 100%;
      width: 60%;
      /* background-color: red; */
      display: flex;
      align-items: center;
      justify-content: center;
  }

Calculating remaining height or width of the page:

#pagel #nav{
    height: 120px;
    width: 100%;
    background-color:royalblue;
}
#content{
height: calc (100% - 120px);
width: 100%;
background-color:crimson;
}

Fit-Content:

h3{
    width:fit-content;
}

For elements no-wrap:

with flexbox

with inline block

Targeting Scroll Bar:

box shadow: