CSS

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < link rel = "stylesheet" href = "style.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Card Hover </ title > </ head > < body >     < div class = "myclass" >         < img src = "https://img.freepik.com/premium-photo/cartoon-young-man-wearing-shirt-tie_487986-51427.jpg?semt=ais_hybrid" alt = "Male" >         < div class = "male" >         < h2 > Abhi </ h2 >         < p > Software Developer </ p >     </ div >     </ div >     < div class = "myclass" >         < img src = "https://img.freepik.com/premium-psd/beautiful-indian-woman...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < Link rel = "stylesheet" href = "BackgroundImage.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Background Image </ title > </ head > < body >     < div id = "one" > Image 1 </ div >     < div id = "two" > Image 2 </ div >     < div id = "three" > Image 3 </ div > </ body > </ html > CSS /*  BACKGROUND-SIZE:CONTAIN repeats the image */ #one {   height : 100px ;   width : 150px ;   background-color : antiquewhite ;   border : 20px solid black ;   background-image : url ( https://images.unsplash.com/photo-1720511485583-1b70c1726f07?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dX...

 HTML   < div > Shadow </ div >  CSS div {     height : 100px ;     width : 150px ;     border : 12px solid gray ;     background-color : antiquewhite ;     box-shadow : 12px 13px 20px black ; }

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < link rel = "stylesheet" href = "transform.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Transformations </ title > </ head > < body >     < div id = "one" > 1 </ div >     < div id = "two" > 2 </ div >     < div id = "three" > 3 </ div >     < div id = "four" > 4 </ div >     < div id = "five" > 5 </ div > </ body > </ html > CSS div {   height : 50px ;   width : 100px ;   border : 5px solid black ; } div:nth-of-type ( 2n ) {   background-color : aqua ; } div:nth-of-type ( 2n + 1 ) {   background-color : blueviolet ; } /* TRANSFORMATIONS */ /* ROTATION */ #one {   transform ...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < link rel = "stylesheet" href = "Transitions.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Transitions </ title > </ head > < body >     < h1 > fffffff </ h1 >     < h2 > head </ h2 >     < div ></ div >     < p > paragraph </ p >     < h3 > h3 </ h3 >     < h4 > h4 </ h4 > </ body > </ html > CSS /* TRANSITION  */ h1 {   border : 12px solid black ; } h1:hover {   margin : 70px ;   background-color : brown ;   border-radius : 50% ;   transition : 2s ; } /* HAS 4 PROPERTIES */ /* TRANSITION DURATION (transition above and this same)*/ h2 {   border : 20px...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < link rel = "stylesheet" href = "AlphaChannelAndOpacity.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > alpha channel and opacity </ title > </ head > < body >     < h1 > Use Alpha channel </ h1 >     < h2 > Use Opaity </ h2 >     < h3 > Using Opacity </ h3 > </ body > </ html > CSS /* ALPHA CHANNEL */ h1:hover {   background-color : rgba ( 255 , 0 , 12 , 0.7 );   /* HERE a-alpha channel range 0-1   alpha channel sets opacity for *color* */ } h2:hover {   /* ALPHA CHANNEL IN HEXA-DECIMAL FORM */   background-color : #4dff00a1 ; } /* OPACITY */ h3:hover {   background-color : yellow ;   border : 15px ;   opacity : 0.5...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < link rel = "stylesheet" href = "Assignment3.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Assignment </ title > </ head > < body >     < ul >         < li > HTML </ li >         < li > CSS </ li >         < li > JavaScript </ li >         < li > NodeJs </ li >         < li > ReactJS </ li >         < li > SQL </ li >         < li > MongoDB </ li >         < li > Java </ li >         < li > C++ </ li >         < ...

 HTML  <! DOCTYPE html > < html lang = "en" > < head >     < link rel = "stylesheet" href = "AssignmentQ2.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Assignment </ title > </ head > < body >     < div ></ div >     < div ></ div >     < div ></ div > </ body > </ html > CSS div {     height : 100px ;     width : 100px ;     background-color : pink ;     border : 2px solid black ;     border-radius : 50% ;     display : inline-block ; }

 HTML div {     height : 150px ;     width : 300px ;         background-color : grey ;         border : 5px black dotted ;         margin-top : 2 opx;         margin-right : 1em ;         margin-bottom : 40px ;         margin-left : 2em ;         padding : 1em ; } CSS div {     height : 150px ;     width : 300px ;         background-color : grey ;         border : 5px black dotted ;         margin-top : 2 opx;         margin-right : 1em ;         margin-bottom : 40px ;         margin-left : 2em ;         padding : 1em ; }

/* NOW HEADING TAGS WILL BE DISPLAYED AS INLINE ELEMENTS */ h1 {     display : inline ;     /* HERE BOTH PROPERTIES HEIGHT AND WIDTH WON'T WORK AS H1 IS DISPLAYED AS AN INLINE ELEMENT */     height : 100px ;     width : 100px ;     /* MARGIN WILL WORK BUT ONLY IN HORIZONTAL(left and right) BUT NOT IN VERTICAL */     margin : 20px ; /* PADDING WORKS ON ALL SIDES BUT MAY OVERLAP UPON ELEMENTS */     padding : 230px ; } h2 {     display : inline ; } span {     display : block ; } /* WHEN WE WANT TO CREATE A BLOCK ELEMENT BUT NEED TO BE DISPLAYED INLINE AND ALSO NEED TO FOLLOW CSS PROPERTIES THEN WE USE */ h2 {     display : inline-block ;     height : 120px ;     width : 180px ;     padding : 134px ;     margin : 179px ; } p {     display : none ; }

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < link rel = "stylesheet" href = "practice.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Practice </ title > </ head > < body >     < div id = "outer" >         < div class = "in" id = "red" ></ div >         < div class = "in" id = "yellow" ></ div >         < div class = "in" id = "green" ></ div >     </ div > </ body > </ html > CSS #outer {     height : 200px ;     width : 70px ;     border : 2px ;     border-style : solid ; } .in {     height : 50px ;     width : 50px ;     border : 2px solid black ;    ...

  /* BOX MODEL */ /* height and width */ div {   height : 200px ;   width : 300px ; } /*BORDER */ div {   border-width : 10px ;   border-style : solid ;   border-color : black ; } h1 {   border-width : 15px ;   border-style : solid ;   border-color : blue ; } button {   border : 3px solid violet ; } p {   border : 5px dotted black ; } h2 {   border : 7px double blue ; } /* BORDER SIDES */ div {   /* BORDER LEFT */   border-left-color : tan ;   border-left-style : dotted ;   border-left-width : 10px ;   /* BORDER RIGHT */   border-right-color : lightcoral ;   border-right-width : 5px ;   border-right-style : double ;   /* BORDER TOP */   border-top-color : orange ;   border-top-width : 7px ;   border-top-style : dashed ;   /* BORDER BOTTTOM */   border-bottom-color : lightseagreen ;   border-bottom-width : 11px ;   border-bottom-style : so...

HTML < html lang = "en" >   < head >     < link rel = "stylesheet" href = "Practice.css" >     < 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 Assignment </ title >   </ head >   < body >     < h1 id = "mainTopic" > CSS Practice </ h1 >     < h3 > Let's learn about selector. </ h3 >     <!--Paragraph1-->     < p class = "para" > There are multiple selectors in css. </ p >     <!--Paragraph2-->     < p class = "para" > Some of them include class selector,id selector etc. </ p >     <!--Paragraph3-->     < p class = "para" > And we can also combine the set too...

 HTML <! DOCTYPE html > < html lang = "en" >   < head >     < link rel = "stylesheet" href = "style.css" >     < 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 > Inheritance Demo </ title >     < link rel = "stylesheet" href = "inheritance_style.css" />   </ head >   < body >     < body >       < h1 > Main Heading </ h1 >       < div >         < h2 > Heading 1 </ h2 >         < form >           < label > username: </ label >           < input type = "text" placeholder = "username" />     ...

  /* PSEUDO CLASS */ /* HOVER */ button:hover {   background-color : aqua ;   color : black ; } h3:hover {   text-transform : uppercase ; } /* ACTIVE */ button:active {   color : blue ;   background-color : antiquewhite ; } p:active {   font-weight : bold ;   text-decoration : underline ; } /* CHECKED */ input [ type = "radio" ] :checked + label {   color : rebeccapurple ;   font-weight : bolder ; } /* NTH OF TYPE */ p:nth-of-type ( 2n ) {   background-color : bisque ; } /* PSEUDO ELEMENTS */ /* FIRST LETTEERS */ p::first-letter {   font-family : Arial , Helvetica , sans-serif ; } /* FIRST LINE */ h3::first-line {   text-decoration : overline ;   background-color : whitesmoke ; } /* SELECTION */ h1::selection {   background-color : yellowgreen ; } /* not a pseudo element or class */ /* !IMPORTANT */ h1 {   background-color : antiquewhite !important ; }

 HTML <! DOCTYPE html > < html lang = "en" >   < head >     < link rel = "stylesheet" href = "style.css" >     < 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 Chapter2 </ title >   </ head >   < body >     < header >         < h1 > Quora             < button id = "login" > Log in </ button >             < button id = "signup" > Sign up </ button >         </ h1 >         < div >             < input type = "text" placeholder = "username" >             < ...