Cssnotes
Cssnotes
this gets < wt ts gs _Pseudo=GClass Selectors _ | selector + Poecdlo-class £ Proper Hy+-vatuzy HH as —o — selector ave thassen according ta Yule Studied i_| and Peeudo-classes classes Can be as follauis= J) iok =__1£ element is a link g)visited - tf element visited 3) hover = TF mouse hovers qvet za } -_ If moure cilek on tt but not reales nth-child(x) - Perliguisx {evel of childs of clemen) q Sejeued : €9. f a+ hover { color i red; hove ing ever link in a Qives ved colour to(t. 2) Pihover, @ | acHue > Colors Ved 5 hovering Over paragraph od clicky ont [rik = Changes Mem fo ves : _ fpr eg. —— $$$ _1\_style- efi) later, ar lener—otan-clemenk.—_ ~ 2) ansev “content before ore ater ene SS Selector a Property; values = Risen - \ Pit first-line } a $ : Gist letper - Te styles Lest letter of element 0 - 7 i 2s 3 like omoj} wit, [Content | pr Perky i PI thefore + 7 a content,” Url (Smiley aif); | 5 L 7 | dete = used insert afte Cantent-ct_elere - aa 5) _2elecisin = when element can en is elesed = Qse ao ' Mesto eds — —| 7 -baaeg rownel 5 yetovas; Atdribure Selectors : Shaving spedfic attribute, .— iT santa. — i. " a ea a [target = "—bianke} { background-color ; yelled 5 Tt _cywes Unk having [oiany as fearaeh abtribuses with, parkg-round cslor yellow + Other formats =Value"" (sith _Specj Fi Attribute. Jal ue- element Larmiwute v="Vaue"] © C AAR eve "Flower | when Hower is one word inside title 3] element Labrie |="Value"™| C title f="fower | Wwoen__t\tle_Stast_ ‘iulthh Space 4€ eparaied /) separated Flower word eleers thew Gi oe C title As hjowertt] | wren Geie steak itt, -BOWer wyoyd lower aH net b& — 5) elemeny [ tite = "ower! | : (Bue rks Stowe!) —_— “TP iareo Bower wierd a ceured commlonere_ “Vke to A lay oe _separared 44 space sadle ce (cite ase 7 CSS Fe: Faxms + Style place ment. |_in_ Elements, Ctnline. PS TT Laement style = "Proper 2 Values”> —--- petty =p state ent elahss ani TE “this _methad is least us | becatue it lease yeusable Q)|_External_ style _ Snead> : link rel ="stylsheer" “href = Ww style css” > head ieee tedy 2 $ackground=coldy ¢ grey; font size 7 130% 5 | Tn tis method tema} dling wc reference 1S given sith {tak thig_methed jc used #n real alarld apo! on lc usefull when there are lots af_ Pages See of — heet is Uses| ap + D) Head styes—sivle with tag ¢mmiesnal) * head ene fe style. pt 2 ___ Color 7 maroon 5 } ee tule. - [head> . Head ctule is uced while oveaadding the eran tules io veal ulerid aoplicaynin. = #000000. five nd_aond third" a Are toy 2,.@;8 respectively HH £ESEFE J HSL— HUE , SATURATION, LIGHT Wing) CS) hh ~ hue - calorusheel is ved, 120 is green 240 is blue. Joo. is fuly calor | liglat = Degree of light fram OF: to foo: a hola ( bist tna) - X tanges Ca =s [background-color “iS. “colorname” ih YobCwdid) 5 [Ecc ii) yg baCngie — Jy) _hs| Chis) eee suai vy) hslaChclie): a Vi) fF 00Q00 1} / = ie inner: ‘ ‘Mele Melo); A lee ; CCPH, YPN tap_centey—\ pattem center, ckarournd Al ment |) backsround=astachment “scrall: “oackground ima | background Prapety in Sigle line. presaearp Fixed! background jmase wound Shorthand - This property ised te sp und {gb R,G.B) SUS eeanee ie eee) een eee re peay Ee eee SSH Be Heese ee So}. BO. 5 £ Shoyrhand Sequence In be _micsirg | Any property ~ | bur Sequence hould be same . | i) Colov aaa ii) image al Sy repeay . A posittion SS ee 7 pacity. proper. can be used with images. text 2 Me algo act yrlth 4he belp of “patagrround> cali i 7 property tah He opacity arnseuee CO) = ——— » ZD)|_Back ground Shadow) 4) _texr-shadow | 2Px 22x _2P yobaCe2iG.8.4) > Hevizsrve} |} abe colov s verricat & Hovizonta) Vertical W_bax-Snadow | 2px 2px vpn vgha(@, Bel) i for shadow af whale bar conkaising i _elenjent- e ) border-style! datted, graave, inset ; Vids _____dashed' ridge, quiset) double, _ i on Genet sald ridge dashed ' i) _border-stajle upper agri bottom —(eFF, Ti) border - stule 4 dotted solid adge ; Whorder style dates solid; a Boarder tesidth 7 i) border-width ; medium3 thi ck ot _px 3 i) bardey - width : ex YPxX ZPx medium] thick 5 cop Right A, Ter: {i) bordey -widt 2 [Link] vos ‘op Wetton li) boarder =color , colar: sin sity rob (21G,8)) Ygba( R.@ 3A): HFFEEES Bardey oor dey -top- style 1 Styles border-right ~ Ghule !xStulex | border ~ bofrom sles Chutes boarder - lett ~ Style 2 styles, “15 ex ‘1B PX [SPX | border : €ex Solid ved 5 0 ordey_of values D width 7 [iy styte—toomputsaryey ia une i CsS-outtines ; outline is used ty making element standouy by a it _ourside —_beprdleys _tulth Some spacing - = “tt has_ali ‘he —mopeieh serne_of_beadet der, -cnly_one ne_diffent propeaky “os Qllaws _dudiline = orteste + 1px 5 : : 4 Mavain auto; 1 browser Calewsoden, ay px} (I length 2 xen; [1 \enabh — 404 I] ee) wid = Margin - bottor 2 2 P2) ~—_Lnangin=_aiginy 2 Cen} a aeeta = margin-left % mazgin | Pex , ¥ Px »ZPX ,APX 9 —_] nyt APK, NOX» ZPX 5 Moergin + a pa__Yp: 1 ODT ER ETF oe _—_| Padding = come as that of margin. Height ight on yoy XPx ; Lem ; xe; innenit; initial: idth ' auto; 2LPX ; em j; Xt 5 inherits ‘initial: Quito — default value, browser caltate height Wleltt 4 BEX = Tenath - = J 29 erg [cua | hte = fe of bax _contairsing Vt a inhew}t - sete vate to deRuut » _ a jor Hal - Pavents Volue inher} __fS.mnii rear Cpe) tems afl, ands 4 initial, —___ifmin = height. 2¢px 2 Xen, 2tsben wire" inked! infeed s a Jnay_- height 2 pc4 Hem 2; auto. Inboent.! jn law, = max=min—prapexty Us Jd uhen resizing | nen browser. 4) / CSS Text ~_| text ave Properties like = _____ font=farily " gofia! 4 | Zook Property stpbame| font 2 italia, small aps; bold 5 \2pa 4 GETTHA, SHS sequence font-style font = yarvriant font - weight fonk -2ize —_ ( Requived) fent= family (Required!) CSS links fess. properties for inks are Same 2S WE apoig™ ‘ext oy blacks bur other than. Jrrig— We need 9° | propexties accoxdling 4s AcHyities of Mmause, - atink ( (unveiled ink @2 nove {Ul hover a;- ghile For ever ; Siig For wig 4 a ~ 1 Adve \ srale Siren gits eee CSS Lists undrdered | ist = alt list-style-type: circle i Square ; \ist-stule- image * Uyl C'mamed!) s : ordered Uist alg list-stle-type : Uppey-roman; fower - roman) uppet- aipha; lower- abe ha; Je_pasitic Kt list-style - position, outside | \nstde + list hav xtrain margin | Paddinas ise Can Ye e bullel paint 2 list -cttle— Hype! none |, SS Tables oneal ee roagpound le fet |Rable,thtdf border- cofapse : Cal Jape. _________}______- border; |px , Solid Black: jy) wsidth/ %p {v)—_height: x 5x: _ vi) pes ~Aligh } lefr: gtone ) vii) vedi Avot , le = overflow not clipped hidde! ~ dverfjow handled with Scrollbar comp! = @x-Scrol| bay only when Meressotlf | ‘/[ To ranile evertiow in TROCY divethons cat __| fear - \ i Le. pope} fox positioning and formatting. can+entiaside. a of container a = it i : lneather element Shawid be an next to fniAal _ Aoned elemerk oy 96 belaud it. e = fared [ee | (sey teh ee inne Ie Cees Koper | RSS i ne Cleay fest ad | Hoat i right; : - 2 left; WONG; = zt inherit See ; Zor , 2 if —— Ieee Hie suahea cere on eae none; ement on ej ther Side cliow inhents fh pnhenns™ - verde clernents inline ox Wo, —Sorope Yh - ‘_joline; — pie __ block) | inline ~block ie : ee clement _afteds layout Ee js_hidden - frict Resolution _uihen ther we falaw the tule = 2 | pecauce ton follows [mune on euerndl “aahtSMons. a oa frlloui the Same ‘rite as _per— the potitia awed Jeclaagdien aS mas} of. time < Vink > decid ak 1 es _2)]_winen there _js_no_coofich \t follaws ruse. = ‘Bath dedavation Mewed" : = Any property given Se lement is digg ininerited by — Chill clernent like Progexhes, BG inher Leiemen| _ if class ce fea Pseudo dors] t sf athioure a —T foot =family - it gives different font. Cheices for user's basen co which browser SereVed For which tt Supports + ae |___eg. font = family! Ariel, Helvetica, Sans-semFs _coloy_---I+ allows to set_Colors- either by Nomeck— ____by RGB formats “in _heradeuima) no. followed afer te ox ¥gpo-(0,0,0,0)| | 29: coloy + #00 GOFF ¢ emcee i Red green Blue _| font-style = Tt gives opens like _______- i) Norma fii) ftauic | ii) Oblique tv) inherit ; i Pe font-weight — T+ gives _boldness by assigning the. | Value Bold ov umbers fron. fontesize ~The default is [lepx| for most of _ = browsers we conser it with [px] : = declaration or fl of defaun __} eg font-Size : 24PXx;, eee But font sizes Changes according to User make jt_Zoom in ot Zoomaut Sq keep eveaxytht ry yelative to Cach arher we Siyle font sfee _ to with _yeloHve siyling merhed ad follard “Now when we want +e chonge the style ot fons, we redeclave without daverridl img on ‘aa bu: _yeladve +0 it. o& 2emM, Bem, Gem ov alem,azem Diver tony Stee oF double triple -- -— verpecive fo parent Fony Size whidy wese} ts fiZo7 fret As body is dived parent of [zp>fp— P_style = "font-size = 2em’>~ -—- autre aa) ellipsis ; =p Gaba Sand ——_tward—bi ! Veep -all; => Break only ab spew __break-alt; => Break abany anna. worl -WeP ! break-werd DA break wor) Pek HELIN 51 — Content | Width = Width + 2x Bovdet + 2x Padding +2xmargine heignt= eight + 2x Bakder-+-Ax-podding +r*Me2GINE. acerca a = —tody_f background =calor grey, : wbx [ 7. _ ackground color green, — + - : ees eaing 10 PX JOPX, JOPX» 10 ce bardeA 3 5 px Saljd-black_;— morgin_ AO Px i =< ae : Width — 1 8OPX J. oo : neight | 10 PX; Box : See { mS@emtent> —Shupharn _ The_width is always addition of a Element inside blemenr content, bordez and pad as bax js —|-defined te content_bur ik can be changed ~~ eSingpeape— Bniesiaeg | een — ae i inside that ceronp Styling oF ty payat t ——} +4, +7 ¥Selectoy for al the. “eke ment = eee a box Si2ing" bordee-box; # fox alt cements ody _ 1 fea child deana ee sizing: bordle-Oox Spe Fre Geer” ea _mayains—onSame _line-.—— ngyqi - | ere , mMaygin on tap apd yelow aa rh %___boges are-merged with —— ATH bigges}margin Ye ot Tek ith, height and uildth and_#exts insile os ae 7 ide the boxes cE ta _handle the _Situahor- - - _overfiow' Viciple - Default it cause text todverflow out ce hidden - Tt hides the textthat dont Hr ins ectat} - ft Provide scrvo|lbor whenever Nec, -Tt always Provides tuo scro|ibor een When Not Yequred- | We use Cos terms to Style the inpuk uxt —_cliferen}_ Foumars . == en A2pPx_20Px 5 Spx 05 1_bovder-bor 5 1 29x solid red; Dil Focused inpurS = : Fo crange the Style when it gers foused (Clicked) we use [Ffocuse| Selector for doing so - inpur Ctupe= text] J Fecus { bo degicund-color : \ightblue, = ot inside. the jnow. Use tne _ properties. —__— | inpur Cowe=textl { oe badkg wund-clos ¢ waiters ~ btck ground = jmage. UY] C’ Sect cnlcon Png’); ————packegraand= pon ton: fo px 1px; —————taekgrount= repeat: ne- rep eae tet gt tte pa SME EE i —{npur when focused. — inout Ceupe= cext] 3 sn aint! transi Hon viel th O45 Gase~in-cur © uidth, Son 5 a © Badkatingy PX 5 © | Textateas input — use facize one oA ey Sei = eee : CSS Animation “CSS_@ key frames Lule. Te rE _gnimaHan from _Cnanging one Css_styje fo other _| lly with defined [%s selectors SS) cs ___|-css— eee rom to | Selectors as _fallowWS= a [ "I — = oo aoe | fou — stark —| Frorry Csameas pw) 10%} E 1 - SS See \ : = — ~ | foot end tO Csame as lors) : = Syntax = 2 os — [-@key Brumes_arimatannaine —— kaye Cesa-sti a) an mation, jon —name = used & £0 appy animation 7 ith @ Key Frames to Gee bierk in ulnith animation IniMadiod_durat_on—— Guratian 1a Seconds» delay to start _anjmakian in Seconds. oe = maton —jterafion-coumf — nambey of 4 S SE ere Me oa : -{anitaiin ierayjon= coun 85 ¢. ° infinite dure Han a = iy ani aoe FE sce anernare = fee, ternafe~ reverse animatHon mest Ming funato i eal animat Spec Su proses ——— jeazon- Hing -funckon ? ease i Start and end 9 se Jtinear JH same consrani — - = b ease-in- / Slow stast rease -our i slaw end e2ier (nxnin.n)y de define Animation = Gil- Mode — Style of element 4 Dhen_ “element when tn Sea be ja Nok _playiy | animation — F4ll- made t nane Mestre before + forward s// Keeps asthe 1 badkword g// teers Histh™ 3 bath . // eylend propery ——— — frrrwurre{ 2 beeele 20 * u Wid Hp Hope “ see reso —_ eight JOoPrs . background-color | red), aa Posittan s felaHve, 2 _ animaren~ name; example 5 e _anintavon= durakon 2 4S _ animation = iteratiem=ccunh 9 5 = Avent on 5 ei Or. £ bacugroundcolar -red 5 lett iopx ; ter fon dareleg round Color F blue; lefrs oopys P| D Px { background - Colors green, lel opxy fer Pah 7 two kinds — tala — 7 60 5. e bang youd -Colox | HA fifty ___I height ef Novigthenbor | -NovigaHon bar is a_kind of list sf uric. | te hos base of hkm__list elements and thera — bars. VarHcal Nay Baa Mocder style of tisk tush of Navigaron'ver [backgroud eal | height 1 Son 3 ___ Position: fixed j I Position of Navieayjoo _ aver Fora * aud | bor with resceck bo : reppage wheather t+ Ee Sue afeh os e Sewo Se = I) yexftous -debices uso - Should ce wth Untied ‘elements Pot, 5, i Fabs of yap: ae iu eee “display + Hatk } Il4o make phek cheer’ COloyY 1 #00000} IL color of text ot tab i color Lowoites [color HHCAEGe; “COE Tw) hit; eerste: when hoverel VAL Paes enue # color oF TeXb when Reve oe MY. avian: tovigglon Dee dicplay.._block }— Jo make —aihale—ATEA Clicky 7 TF | 4ofloat blocks _ : : 2 dele 5 — — eo : == text - align? center 5 Padding + _l4px lepx3s— - text - decoration’ nene | __ background -coley : | active { - ] = barigground=colet tte aCRESO} on tabs divider in Navigation barr use Property border~ righ} » border bottyrn eke CSS Grid cS a CSS grid used) For -deHning elements Ake kk. : . [wnen div] elemenis are declared inside oa ; r [etement then. outer [div] is _grid- container and 1 | inside (ANQ are. grid Qements/items tispey + ariel i —ontd=coniranaae? "[Link] 5 ee rou) =9aP7 3 Px; Sid=Sep OPK BPRE : — Orid=teplabe=columnn auto sopy atte: Briel template =ro ws aziro Bopx alas , : ~~ oF lemenr defined defines column, row - een en? ee he ee oy ee cie —plartoined yang “bowkground Color ort 5 : = _
edd
