Posts

Showing posts from September, 2024

Flex-Wrap and Flex-Flow tutorial in Flexbox CSS

Image
  <! 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 > Flex Wrap Flex Flow Flexbox </ title >     < link rel = "stylesheet" href = "css/Flex_Wrap_Flex_Flow_Flexbox_CSS.css" > </ head > < body >     < h1 > Hello World : CSS Flex-Wrap </ h1 >     < div class = "container" >         < div class = "items item1" > One </ div >         < div class = "items item2" > Two </ div >         < div class = "items item3" > Three </ div >         < div class = "items item4" > Four </ div >         < di...

Flex-Direction tutorial in CSS Flexbox

Image
  <! 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 > Flex Direction Flexbox CSS </ title >     < link rel = "stylesheet" href = "css/Flex_Direction_Flexbox_CSS.css" > </ head > < body >     < h1 > Hello World : CSS Flex-Direction </ h1 >     < div class = "container" >         < div class = "items item1" > One </ div >         < div class = "items item2" > Two </ div >         < div class = "items item3" > Three </ div >         < div class = "items item4" > Four </ div >     </ div > </ b...

Flexbox Introduction tutorial in CSS

Image
  <! 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 > Flexbox Introduction </ title >     < link rel = "stylesheet" href = "css/Flexbox_Introduction.css" > </ head > < body >     < h1 > Hello World </ h1 >     < div class = "container" >         < div class = "items item1" > One </ div >         < div class = "items item2" > Two </ div >         < div class = "items item3" > Three </ div >         < div class = "items item4" > Four </ div >     </ div > </ body > </ html > Below Fi...

Before and After Pseudo Selectors in CSS

Image
  <! 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/Before_After_Pseudo_Selectors.css" >     < title > Before_After_Pseudo_Selectors </ title >     < link href = "https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel = "stylesheet" > </ head > < body >     < header >         < nav class = "navbar" >             < ul class = "navigation" >                 < li class = "item" > Home </ li >                 < li class = "item" > About ...

Attribute & nth child pseudo Selectors in CSS

Image
  <! 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 > Attribute_nth_child_pseudo_Selectors </ title >     < link rel = "stylesheet" href = "CSS/Attribute_nth_child_pseudo_Selectors.css" > </ head > < body >     < div class = "container" >         < h1 >< a href = "http://google.com" target = "_blank" > Go to Google </ a ></ h1 >         < h1 >< a href = "http://facebook.com" target = "_self" > Go to Facebook </ a ></ h1 >         < form action = "" class = "form-control" >             < input type = "text...

More on CSS Selectors in CSS

Image
  <! 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/More_on_CSS_Selectors.css" >     < title > More on CSS Selectors </ title > </ head > < body >     < h1 > This is more on Selectors </ h1 >     < div class = "container" >         < div class = "row" >             < ul >                 < li class = "item" >                     < p > This is another paragraph inside li </ p >                 </ li...

Media Queries in CSS

Image
  <! 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/Media_Queries.css" >     < title > Media Queries </ title > </ head > < body >     < div class = "box" id = "box-1" > Mai ek iPhone hoon </ div >     < div class = "box" id = "box-2" > Mai ek Tablet hoon </ div >     < div class = "box" id = "box-3" > Mai ek desktop computer hoon </ div >     < div class = "box" id = "box-4" > Mai ek widescreen computer hoon </ div > </ body > </ html > Below File is CSS/Media_Queries.css Fil...