CODEMART

<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Pseudo selectors & more designing </ title >     < style >         .container {             border : 2px solid red;             background-color : rgb( 223 , 345 , 201 );             padding : 34px ;             margin : 34px auto;             width : 666px ;         }         a {             text-decoration : none;             color : black;         }         a:hover {             color : rgb( 0 , 243 , 8 );             background-color : rgb( 221 , 166 , 38 );         }         a:visited {             color : rgb( 0 , 234 , 255 );         }         a:active {             background-color : darkblue;         }         .btn {             font-family : 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif;          

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Aligment </ title >     < link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Ubuntu&display=swap" >     < style >         * {             box-sizing : border-box;         }         body {             font-family : 'Ubuntu' , sans-serif;         }         .container {             width : 900px ;             border : 3px solid purple;             margin : 33px auto;             background-color : sandybrown;         }         .item {             border : 3px solid grey;             margin : 12px 3px ;             padding : 12px 3px ;             background-color : rgb( 248 , 200 , 200 );         }         #fruit {             float : left;             wi

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Box Model </ title >     < style >         * {             box-sizing : border-box;             margin : 0 ;             padding : 0 ;         }         body {             background-color : #e6cbf8;         }                 .container {             background-color : rgb( 231 , 230 , 241 );             border : 3px solid rgb( 64 , 6 , 119 );             /* we can set margin/padding for top, bottom, left and right like this */             /* padding-top: 79px;             padding-bottom: 79px;             padding-right: 79px;             padding-left: 34px; */             /* margin-top: 3px;             margin-bottom: 5px;             margin-left: 34px;             margin-right: 5px; */             /* margin: top right

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Height, width, borders and backgrounds </ title >     < style >         #firstPara {             background-color : red;             height : 100px ;             width : 455px ;             /* below 4 lines are same only */             border : 4px solid green;             /* border-width: 4px;             border-style: solid;             border-color: green; */             border-radius : 11px ;         }         #secondPara {             background-color : rgb( 58 , 243 , 98 );             height : 100px ;             width : 455px ;             border-top : 2px solid violet;             border-right : 2px solid rgb( 18 , 10 , 133 );             border-bottom : 2px solid rgba( 9 , 144 , 27 , 0.774 );             bor

<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Colors in CSS </ title >     < style >         #firstPara {             color : blueviolet; /* color by name */             background-color : aqua;         }         #secondPara {             color : rgb( 223 , 130 , 54 ); /* Color by rgb value */             background-color : rgb( 54 , 130 , 223 );         }         #thirdPara {             color : #132ec7; /* Color by hex value */             background-color : #12ac43;         }     </ style > </ head > < body >     < h2 > This is my fisrt box </ h2 >     < p id = "firstPara" > This is a paragraph from first box </ p >     < h2 > This is my fisrt box </ h2 >     < p id = "secondPara" > Th

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS Fonts </ title >     < link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Ubuntu&display=swap" >     < style >         p {             font-family : 'Ubuntu' , 'Franklin Gothic Medium' , 'Arial Narrow' , Arial, sans-serif;             font-size : 33px ; /* 1/96th of an inch*/             line-height : 1.3em ; /* In CSS, "em" can also be used as a relative unit for other properties, like spacing and sizing, where 1em is equal to the current element's font size. */             font-weight : bold;         }     </ style > </ head > < body >     < h4 > CSS Fonts </ h4 >     < p > Lets play with fo

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < 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;         }         .bgYellow {             background-color : yellow;         }     </ style > </ head > < body >     < h4 > Developer tools tutorial </ h4 >     < p > This is a tutorail for chrome developer tools </ p > </ body > </ html > #Output:

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS Selectors </ title >     < style >         /* Element selector */         P {             border : 2px solid red;         }         /* Id selector */         #firstPara {             color : green;         }         /* Class selector */         .bgBlue {             color : yellow;             background-color : blue;         }         /* Grouping selector */         footer , span {             background-color : pink;         }     </ style > </ head > < body >     < h3 > CSS Selectors </ h3 >     < p id = "firstPara" > This is a simple paragraph to demonstrate css Selectors </ p >     < p id = "secondPara" class = "redElement bgBlue" >

  <!-- CSS starting from here --> <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Inline,Internal and External CSS </ title >     < style >         p {             color : purple !important ;             background-color : seagreen !important ;         }     </ style >     < link rel = "stylesheet" href = "13b. tutorial.css" > </ head > < body >     < h3 > This is CSS Tutorial </ h3 >     <!-- <p style="color: red; background-color: yellow;">This tutorial will teach you everything you need to know about HTML/CSS</p> -->     < p > This tutorial will teach you everything you need to know about HTML/CSS </ p > </ body > </ html > #WD 14b. tutorial // css file

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > HTML Semantic Tags </ title > </ head > < body >     < h3 > Semantic Elements </ h3 >     < details >         < summary > I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?         </ summary >         A keyboard     </ details >     < details >         I have keys but no doors. I have space but no room. You can enter but can't leave. What am I? A keyboard     </ details > </ body > </ html > #Output:

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > HTML Entities </ title > </ head > < body >     < div class = "container" >         < p > This is a paragraph </ p >     </ div >     < div class = "container" >         < p > This is another &nbsp; &nbsp; paragraph with two spaces </ p >         < p > Paragraph is written like this &lt;p&gt; </ p >         < p > Pound is written like this &pound; </ p >         < p > Copyright is written like this &copy; </ p >         < p > Another character is &rAarr; </ p >         < p > Another character is &frac14; </ p >         < p > Empty character is written like

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Ids and classes in HTML </ title > </ head > < body >     < h3 > Ids and classes in HTML </ h3 >     < div id = "mainBox" class = "redBg" >         this is mainBox     </ div >     < span class = "redBg" ></ span >     <!-- Emmet -->     <!-- . is for class and # is for id -->     < span class = "redBg" ></ span >     < span id = "mainSpan" ></ span >     < div class = "redBg blackBorder anotherClass" ></ div >     <!-- Emmet takes div tag as default -->     < div class = "blackBackGround" ></ div >     <!-- Creating multiple elements us