CE SS CSS PARTI FESS Cnecodg, sf she feof. odo “frets 5 a language bo-deserbe sty! K¢ Format _ofess Kt elector Hinting styles Pidbing style dinectlyinlioe_on_cach_elem ps style ag ond conike oun seleckurs_prapete a ——~chi_stule “eta sed; >oya Sais iy PECs ota anon > style. is added sing cotyle> element in the same document —__] } ——Sstyle> — Boe ey Ear eeeE ree He EH Wont Use i lnc stytes ant ste bag os We uy ph Piocknal cases pass elk —————kenal_sty LE PTH css ina sepemnte document _& link Ing it wath tnd fi Serpe CECE ce inking HHL Wi lla Wetyleshect” bak estulecssty ‘= — ft tec foreground 4 clr of txt —_— 7} tlontbette —___1_ aug et gece aM liedasildetseiaeigetelee Ct ——r t 4 foxegrourd —- used to sek the colar of backgpeund | baegrauine colors purple, background-color tte tee __Lolored Suskem i. DNamed colour Each priser reogniees aYound 150 named colons 2)R4B_ colours. alot 1gbles0.0) g 163 (3 sgb(255,0,0) aS ack is vo G) lus wgbl by2¢. fm blue 1s gpl a ) at m yfllou ts sabia 2 SHezndecimal_ov He Lebhers” 011,2.34,5,6.15,5,8,8,0,0,6F oY = Ran bey opie te FEvelevan® 6 Pivene ig hter oe vue lines on text UKE Underlin tat ionecoloy : ve fz ved underlin\\ UA \ee’ lasemate, QE=0 | spunderin ata jollintstoneigh i iat teat sdecowation + aan bine “wontrols the height oF the line of bert | tine height : normal |e)fonk size uniks in csp Absohite Relative, xe %y i” als pt seal cm, ch om, yn in = Wt ne aa Ain = ps fins}| fttaniyaug, ee eee — eee | G2ickup tant famed i aa 7 bet ranstoym “Tots pampesty is used Go change the case of kext fex€-tvanstovm capitalize (First leteer F every ood is capital) ——__| Kexk-LyOns form: uppercase call txt ta uppercase) bexkévansform: lwsexcase (all txt _ta (owe ycase)\ c5S_PART-2 — | 7 | ) — ota select everything too document ; — +L —-s | Prperty : palue — | 5 as e — Jue Seles 1 — L 1 sam — | bid buhahs.{ <5] propery: valu lov: ed | } € . —] l |>comma_se_sepexate koike Yek property ko multiple elements ——sal Jo de poktehoh —7T I — JID_Selector —_—s I __— selects an clement _basta_on the value at elémen'és to _ateribut = Is_used_befoxe id_selectoy_in css fox making sty! siding” sign tap efhiy - Htrayid ( — i colo ea; ¥ 4) Class selectors _ select an_element based _an_thely class att yibube ~Jin elements ko gyovp kayna_hai_,uske gp korne $e liye _¢lass __ selector Use kar sakthe boi 2con b cessed _using ‘ emyclass_t i property valu safter Ony paxogiaph sifting pth supunke + button | combinatow _ prepetty va back growin pty 7 i Poth Paha cis piveawyllevel pe hand hau:No parentlehild ~ concept worlss her,

p selects Only

Clements inside asdiv? |__elements Phat axe 4 if there oxe div inside Leste ildven of écliv> | that parent div { | i cos wie | stparent p § color-red'} patent > ul [ background colar: ved: | e\Aberibute selector selects elements based on the presence os yalue of a giver atévibute. ote oe input fatty ="value) pap: ty : vole » d _ eq: (ikibupe 2: teat): wolor: ved) : Input Ltypes“Eext") t 4 color: vee Ythe text clouy which we bype v Tn input box ig ved np stegpe J 3 back groundecolny: Ghost white;ith an attribute Who: —= Represents element: exactly valu 13) [atty ~= value] ] | —=Represents elements with an abtriaute name of attr tshace i | actly value —4 Waterss yalye| = Represents elements with an attribute rame of atty (hace Value Contains at knst one occurance at ‘value’ of stringhover = rr m7 | with an clement ith a painting device but docsnot necessarily Octive ible is generally tviggerta then Bhe user how vex on clement wih cursor eq. ¢ btn shover cola :qieen (contiven) Congo) gyeen Coxe, 3 HUA 8 “like this ue Can_change several properties ______ 2): active - = the soctive (055 pseudn-class) tepye thak Is being activnted by uses. uhen using a_mmoust..“activats a" | typically staves _lhen che -User_presses down the prim ayy mouse button Pcommannly vstd on 02 Mad sbutton2-Obbexs suchas label £g = bth actwe { clay: wih it4) :nth- of -Fypet =the :nth=of-Eyped— on tbeit_position mang. ipenacassmetches deren ba sea stags OE PGES ce oon =the _nth-of - ype et is spec th | — cagomese which presents tht-patern—fo matching sl phew 4 inkh -of =-type(cexpress? | even} odd}i 4 an) > Eves cond “element Lt| | AAA css: Gaseoding Stylesheets What ts —_ oF The ces. SAscaclt algovithm's job i& to sdect css declosations in ' N “ . pre i background. olor: velous y ] h24 bag fi background -coloy:blue: less selectpys |__?_pyivyity oo GIF speciFicity is sam two elements then cas 4 4 | SCAding mio;Moberitonce in css i et eae ; sed (v2 . ep? J éulr lotr Plo border-topetlght-radius: Isp — all will hove painted bovder except right bordeyPadding =lekbs sop, i aaa. . os ee ¥CISCRLTBE #3 top vightlbathom #4 tape btinmeét padding: Ipx, 2px sp padding -ipx2px.apa4p%;—_ S)Hoxgin lh sek_spacing on the outside of bode y | ~MGxgin-leEE _ +maxgin=tight = | smaxgin=tsp - +morgid-bettom q £ div maxgin=\¢ FE Gop, 4 Haxgin Shorthand #4 for all sides —f12_topd bottom | leFe&vight Margin: Sopx_ Magia spx_ep ae FOOTE Es toplietd_& right( bottom 4 _-toplyight} bottom! leek — MONQIO“ IX 2px 3px MONQin: px 2px apx 4pxLANA |_ (whole block) |pstost from newline 2) Dont \ |_ £9: Eq: display: Hock display: None nope (ko hide clement an. x seven) _Noke. iA we Use span ina div [e inside fer ib shows unusual be havior * iy height. width prapeyti ote beep *wonly ett and right padding 1: visible, but top and batten padding won't will a) Lom Saya Sai. toi applitd (vibiole padding Q INLINE __gacd boy [am studying in ol padding i Engineering college 4 4 + TT Magn’ Bhr tse adding TeFE and “ight AoE for top ¥ bortomon Table oer Block and_inline “ends 2)on\ 14 -US@ 28 MUCh, aTave up vp.as. “as-much_haizontal — ves ay pat_accep caindou ib there 1s no,conkoines Le peti Css _ properties 4) Hovizontal_ond_verticol q but. _oveilag other el display: inline; —» Tawa peas anc to na display block: —* Ve wil “a oe 4, ——afidisplay,s inline -blocks; —Style 2 block ane Style will apply o.ccording to block properties on clene | behave - inlini behav: ene gl Onday. saint Saye_elementsaajoyeng 10.0. single-tine aims ill_a-atange a | Why inline block? = ———}? Block ¢lements till ocapy whole block Inline elements will -cme¢in_same_tine but the properties suchas width helaht | mongin _padding—twon! tbe applied -1f applies! Padding margin | Ue. obseive_ansual_behavion-So Inline-black ig| juniks in cSs_ . Absolute Relative px te pt au po. eon cm. ch nm vh in. Nid + Many max! | Pexcentoges( le) [mitt is “often used tn define a size os telotive toon _clmentts — [ee pier Chie ee re |-£9- width: 3He_[ytelotive to the parent. mougin left: sore [[yelative to patent height OF a mov gin“will be set accmding bo the height [size of parent ___|| Eo tretotive. toy SFont_size_of the parent, in the case of typogra phi o!_propertic: like_font=size, and font size of the clement itself .in_case of other properties Like lid th [= toot jee [| tonbesine 20m = sninptsanpx padding :iem = 1A 30px =306: | poddingusill oe adjusted according to its div font-size Dyawbock of «m= “snowball eFFect in nesked Clements mln, neskéd_div dur to snovsballing effect the font - size get: dovble_in_eoch_div-lt i called snow ball — Ty vercome this we USe vemyy) .2-poventl selt Rem, Get em tt “jp bont_size_ok_yoet_elemen! we | The defoue bullet pa: ray sapped ease TS TEs) 3 Ll frig ance comin Ha-Atauhidden completely visible |r Alpba chatiel is used fox manipulating opaciby of cotar coloakbolo,2ssoa) opacity aaa eee sag] epee [sets the preity fon -o_clement Ranges. pmo bo naden” eeeore Tnansitions_______ i isa | sThonsitions = iaiguaecinte states of element Jyansition_shorthand vane Te [anton [ng tunetion sey ——————} CSS TyonsFoum, = This property let's you rotat bx an_element eS 4iRotate. dynnsfrum: tobnie (usdeqy —(ontote. etnckessise) transfovm + vokatechsdeq) Gotate anti-clockwise) Gi) Scale tyanstoim: scale (0's), = Eyansform. scale (1-5); yanstoxm: scale (05,1) me transform: scale (10:5) yx brangfoum: scale x (o-s) #Only changes along, tyanstovmn + scaleY Los) # Only chon along = bonsewn scale used to_inclense at decrec the size of die, 4] a ol | 4 © ave shes <_bending= rigat ££ ff take tun site _te_opp_sides —and elas bic them khecnad tue cont ol psp by pace —Insingle transform aaa) Kew (30.deg) —?| *\t_adde sho. f round on-clemen Box- shadow. — 0m a 4 ee ~y urexo.dius—GO!o——$___ | backqround- mage -usL 2 Lsameptling-$PQ)—— ——, ~~] roctgraune =512.¢ icontoin|-corey, auto, —— ie int contain, ee UE perop_% a ere ee ecole x a) ————__——<—~—*™*™O”C—*—Ce ie —|| —srepeat¥ ayxepenbe —— if i S Eau! Te Pive_mostly Use cover property for_bach.ground =Iig—————__ | : a | n!|lU|lUr—_ |\ Aa onaton— position css} property scts_how an_clement ts positioncd_in Vv z |? The V7 [cpdecomenbeat tenn eet N77 [ea theo is stad eerste v | tocational_ot posi Haned elements SH am pop ky He V7 | static eee \ |_+ relative. ___ position : + i | - absolute. [pi erecl eee eee cee TT | Position sbabi¢ = Pact gana a pp Sm (eae Freee ee eee eres eee eee errr reererre ere | 1we can't _ghange posit toms ~—] 3 7 4 ststabic 4 [I background scoloxyellaus oo posikion: stati a Po top—toops— 7 letE> 1aups t -4 \ 2) Position relativi =the offset 16 relative bot itselt basedl_on the values _of Lap, light, batten anol let Space is ere abe hed |3) Position: Absolute a “7 The._element_is removed From. the normal document Flow, and no epace 16 efented fnr_element in the page —lagorst wait is_positioned relabed’ to closed positioned _ancestio vif any otheuuse, “it ie placed velative tn the_jnitiot_containing_block — 4) Position : Fixed.=The_element._'s_removed— = and_no_space.{s. coat opti rH—___| “lk positioned _reotne-| veto ei ont fa = | i ne 7 . | = there ove exceptions IF hone Fue indepth table ———_ | project can veker_mdn— —« « FLEX BOK CIASSMALe 2 exible box Layout ales 6_one=dimensional layout method for _onang ing_tkems.in “Yows_O1Cotoumns “|i? flex -bose_mates 8 Teporsivt (according to_sczecn sige | The Flex__Modet —q j ch ection 211 a | LOU, —T : — —T -oxis CS main-axcis en —T_ — ey — CSS-ORIS main OLS ~ | genexal Example Flex-dontaine 1. 2 3> ———_— EEE gags ee ee = | ju Sify= content :cen te: = 7 ——dustity. content: space-betueen soy =e conte ntsnace- around; SE —Vosbity-content : space -evenly. in ee ee es | loTn ane eee St te shact_ ba _clemments along Ens st beta last is akter Space ~fietlgcpuended Sg[lex Lop 3 onto multiple line Flex -Lo1p + nowiap; flex -wiop + wap; Flex =unap 2 ustap -reverse; aDjstributes our ikems along cioss_oxct couign=ibem. scenter, maflements will move. there is space betuicen_clements a._content_in the dij al! the content In div Boasting: \¢ theve quilt align to some bose | a] Jn_this_tocampe div, b,c_Will_b aligned according to text which must-have —sq@ bo, ye2 i = 13 } liga Content ad_contens > i sUb_sets the distribution of space between ond _Ovound “tg i items along Flexbox’_cr9ss-axi a. | = : L align-content : flex- shot) flex=end| cenker Peer | L. ~Align The Hlese_sitingsets—hou._a_fle item till grow or_shrink_to Fit thé space Available _in_theiy flex _contoiner- ___ Her -basis -1o0pa, tle shoinks1, flex -qyown 1 We hove use flee -basis ft set initial size, if Plex-dive ction Ys OW) If Works on width, If coloumn works on height Flex -q7ouw. lt specifies how much of the flex dizeekioa container. semaining space should be assigned to flea_ttem's main size i Flex =-qrows: 1, (by detauit) a 3, EI lise _pypporti ike 1%, atimes 3times te ill O6Cb Ply Gl) the available spa. as AIF we declare Hex =u for two ids the if we dif ine will be occupying doubl¢_space ink to _Flea=gratd 2 fd I> We con max -Wwid th » 400pA, nin- Width. oopsr flex =shtink r. SE i aT. COnEainey Ee iL- Plt ont cdhrink if the 1em: ie a iC Hex= shove ae ete short haw i. . Hex =o | Flex-shyink | flex-basi Flex: ae _ Flex-qrow | Flex -bast: - g Flex. Joop: oo - i o mene ee A ts Sa one A - flex = tr 4 Flex-basis - Hex: to. px eiegieb 6 0) lL make all childyen ag | grid items geiditem eget SC levi thd By coloumn lines 8 te rt 9 u ls z feos 7 = | Gorid_Lines ‘ SSeeee re 3 | ‘ | | ° : Fy ; ly. I nal | Cspace bles lines) | | Grid Template i a = They_define_the tines $_bvact sizing ~ oe ~ quid templote -xoWs =lopx 190p% _woapx wopxd _! Yack Yor T_ backer tens sue can Use 3 Wop MANY For 3 Eracks a TST braces _tao ne eH Tracks wpm gvid-template=coloumn. a eee auto _avtn_aut = Auto shaves vemaining space _but it ts_nok_1ecommendert :* epi = template: yous: repent (2, 161) t ‘BeEh GFE Same —guid-t —— Net aon CL™rrC—e ‘ | | Sid Gop, — They define the _ Gops_between the linesclassmate. geste Gxid Columns =Defines_an_itemsstowting £ ending position inside the colume Quid column - chayt: line = number. pia ald Qitid = column = end : line -niimber, Ex: grid column -: ‘ cplumn~ grid — a1) Qrid= column. 1 | a Wre-no haw many colums =To_apply this we shuld not hard code, Guldth and eight of por Ox container. 't should ac ding to_Guid= Item Grid 4.8 Define's an ikem's starting and ending pasitinn inside the yu Qvid-oua-sbart : line number grid= soulctnd: snesnombet vig beets a Hid <7 kort Yow) endarpi gpiid=tola + ston tou.2/ span_Aumbe|>orizontal 7 Vertical works on ol) items=o | Medio. Queues medio fentoies = waidth lof viewport) 2 (ath div { baclsgY¥ound «colar: red, p = 5 tet bet x Fue use min-width nd mar -wiclth _properby pave ______ ie use ond‘ to di fine _songe Amedia(min-width Op 3) he . div 4 Eockgiound =color “ted, 20 to Spo pxtang¢ _____ y jfe _— rte CSS_Animations ne ee state a i clemen\ stoke 8 yeverse_» end to stoat kernate: stort to end & end to_sta = alkernate-1 send ty sk 4 sb to end ie = shorthand cs Snimation: Acme duiatian timing =fun delay ikey-count iy ta ssyfiame. a os \ otra i in Onimatian = ~~ @ keyframe. —poyName 4 take A fo {font-size : 20p%-4 a ote {font -size:anpx} stake - g = = tools (font-size: yopr p } stake 46 2ofe_se kuch ho, So pat kuch ho, 1 ———*} = wit time te dvration ole Kuch hy —Whats Bootstrap? Bootsbap iso. powweatul, “eoluiespilidoabonberl toiekeehitd 2 _ | fanything -fnen_protokype to. production = inurninukeg enifits of Bootstap Wakes Development Fasker_and Gosiey a\Good__choice of pre-built componente fond browser Compatibility Conl= Content deleivayy network = Components Layout: -Pré=builk and ¥eusable . over -all_stywetu piece of user intevbace (uy cwrongement of elements ns Faves, Eg: container, gvid Eq: button Container Clayout) Makes the content into 0 container: with mo: in 4 Yespons ivene. div ck =“containey"'? | Component (button) i 9 dss ="bin__btn- dan. Normal batton. Ja: 3"btn, ‘Bk N=outhioe-danger” _ Gutin, button, beN=I_(Large butions) ben-sm (mall button= An__joint__3 different coloured button 216 condo with check-box ,Yadio button cto 1Lindividual = gipup. 2_Hoxgin_Yemoved. eer 1-3) Display stul Awill_be changed Hie 5) nov ba (compon omponen out: — DGud (12. units in 4 tow) ae Forms fs Foi corésol: Land sdlect 2 checkbox _& Yadio = yout