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 {             col...

  <! 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 : s...

  <! 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, ...

  <! 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 ;         }  ...

<! 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;       ...

  <! 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;         }   ...

  <! 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 , spa...

  <!-- 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 teac...

  <! 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 ...

  <! 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" >...