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" >     < link rel = "stylesheet" href = "CSS/Responsive_Design_Font_Units.css" >     < title > Responsive Design and Font Units </ title > </ head > < body >     Endless new resolutions and devices are difficult to support separately for a web developer.     Responsive design is a way for a web developer to make his website adapt to all the devices and     resolutions.     Responsive design is a necessity and not a luxury anymore!     Various ways to achieve responsive design:     1. Setting up the viewport     2. Use max-width/max-height     3. Using CSS Media ...

  <! 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" >     < link rel = "stylesheet" href = "CSS/Flexbox_Tutorial.css" >     < title > Flexbox Tutorial </ title > </ head > < body >     Flexbox is a one-dimensional layout method for laying out items in rows or columns.     CSS flexbox is a better way to align items into a container.     Flexbox = flexible + box     When elements are laid out as flexible boxes, they are laid out along two axes     < h1 > This is Flexbox Tutorial </ h1 >     < div class = "container" >         < div class = "item" id = "item-1" > First Box </ div > ...

  <! 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" >     < link rel = "stylesheet" href = "CSS/Visibility_z_index.css" >     < title > Visibility and z-index </ title > </ head > < body >     < div class = "box" id = "box1" ></ div >     < div class = "box" id = "box2" ></ div >     < div class = "box" id = "box3" ></ div >     < div class = "box" id = "box4" ></ div > </ body > </ html > Below File is css/Visibility_z_index.css File. .box {     width : 170px ;     height : 170px ;     border : 2px solid #000000 ;  ...

  <! 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 > Position absolute, relative, fixed and sticky </ title >     < link rel = "stylesheet" href = "CSS/styleEleven.css" > </ head > < body >     < div class = "container" >         < div class = "box" id = "box1" > 1 </ div >         < div class = "box" id = "box2" > 2 </ div >         < div class = "box" id = "box3" > 3 </ div >         < div class = "box" id = "box4" > 4 </ div >     </ div > </ body > </ html > Below File is styleE...

  <! 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 > CSS Display Property </ title >     < link rel = "stylesheet" href = "CSS/styleTen.css" > </ head > < body >     < header >         < img src = "https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"             alt = "" >         < h3 > Welcome to my Blog </ h3 >     </ header >     < div class = "container" >         < div class = "box" >             < h4 ...

  <! DOCTYPE html > < html lang = "en" > < html > < 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 > Navigation Menu </ title >     < link rel = "stylesheet" href = "CSS/styleNine.css" > </ head > < body >     < header >         < nav class = "navbar" >             < ul >                 < li >< a href = "#" > Home </ a ></ li >                 < li >< a href = "#" > About </ a ></ li >                 < li >< a href = "#" > Services </ a ></...