Posts

Showing posts from September, 2020

More on selectors in css

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>More on selectors</title> </head> <style>     h1{         background-color: red;         color: black;         font-weight: bold;         text-align: center;     }     /* if p is contained by any li which is contained by div */     div li p{         color: yellow;         background-color: green;         font-weight: bold;     }     /* div > p ka matlab shirf div ke undar wala element ko hi select karo */     div > p{         color: rgb(0, 132, 255);...

position in 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>         .box{             width: 150px;             height: 150px;             border: 2px solid tomato;             display: inline-block;         }         #boxe2{             position: sticky;             top: 2px;         }         #boxe1{             position: absolute;             top: 20px;             left: 25px;         } ...

Use Before and after pseudo etement is css

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>This is A My friest Website</title>          <Style>         * {             margin: 0px;             padding: 0px;         }         body {             background-color: black;             color: #fff;             font-family: 'Balsamiq Sans', cursive;         }         .header::before {             background: url(https://source.unsplash.com/collection/190727/1600x900) no-repeat center center/cover;             /* backgroun...

Box Shadow and text shadow

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Box Shadow and text shadow</title>     <style>         .main-div {             display: flex;         }         .item {             width: 250px;             height: 450px;             /* background-color: tomato; */             margin: 5px 10px;             padding: 3px 8px;             /* box-shadow: offset-x offset-y blur-radius spread-radius color; */             /* box-shadow: 9px 15px 10px 2px green; */            ...

Media Quary in CSS

 <!DOCTYPE html> <html lang="en"> <head>      <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Media Quary in CSS</title>     <style> .box{     border: 2px solid tomato;     background-color: rgb(228, 142, 15);     display: none;     font-size: 40px; } @media (min-width: 200px) and (max-width: 300px){     #box-1{ display: block;     } } @media (min-width: 301px) and (max-width: 500px){     #box-2{         display: block;         color: black;        background-color:rgb(224, 2, 224);        border: none;     } } @media (min-width: 500px) and (max-width: 800px){     #box-3{         display: block;     } } @media (min-width: 801px){ ...

Flex box in css

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=, initial-scale=1.0">     <title>Flex box in css</title>     <style>         .continer {             width: 100%;             height: 544px;             border: 2px solid gray;             display: flex;             /* Initialize the container as a flex box */             /* flex popertiy for flex container */             /* ( by deafult flex direction is row) */             /* flex-direction: row; */             /* flex-direction: column; */             /* flex-direction: row-rev...

Visibility And Z- Indext In CSS

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title >  Visibility And Z- Indext In CSS </ title >      < style >          .box  {              width :  150px ;              height :  150px ;         }          #box1  {              /* jis element ki z-index jada hota he wo eliment kam z-index...