Web Development with Shruti

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > CSS Display Property </ title >      < style >          header {              margin : auto ;              border : 2px   solid   red ;              width : 15% ;         }          img {       ...

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Navigation Menu </ title >      < style >          .navbar {              background-color :  black ;              border-radius :  30px ;         }          .navbar   ul {              overflow : auto ;    ...

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Psuedo Selectors & more desining </ title >      < style >          .container {              border : 2px   solid   red ;              background-color :  rgb ( 231 ,  193 ,  147 );              padding : 34px ;           ...

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Alignment </ title >      < link   href = "https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap"   rel = "stylesheet" >      < style >          * {                     }          body {              font-family :  'Ubuntu' ,  sans-serif ; ...

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Box Model </ title >      < style >          * {              box-sizing :  border-box ;              padding : 0 ;              margin : 0 ;         }          body {            ...

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Colours In CSS </ title >      < style >          #firstPara {              color : red ;   /* color by name */         }          #secondPara {              /* color by rgb value */          ...

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Colours In CSS </ title >      < style >          #firstPara {              color : red ;   /* color by name */         }          #secondPara {              /* color by rgb value */          ...

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > CSS Fonts </ title >      < link   href = "https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap"   rel = "stylesheet" >      < style >                  p {              /* Font Stack */              /* font-family:'Franklin Gothic Medium', 'Arial ...

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Developer Tools </ title >      < style >          p {              color :  purple ;              font-style :  italic ;              background-color :  rosybrown ;         }          .bgPrimary      ...

  <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Developer Tools </ title >      < style >          p {              color :  purple ;              font-style :  italic ;              background-color :  rosybrown ;         }          .bgPrimary     ...