You are on page 1of 18
=] | HTML CSS Reference PSY ole 1estlnaye) (Mele Nit Cregu see ener Vick neal SEC leer Moo RLU RU Rodan OM Te aoe ala a aa eS eee MIC iomtyas HTML Syntax Syntax = rules for writing HTML code (like grammar in English). 1. Elements should have an opening tag and a matching closing tag. y \ Opening Tag Closing Tag (Contac MCL RR ur TD) Pa etree ee Re cee a OM stom Pah Ila] aaa ea ee ea rg cote] 5s cass Poa aes a Raa ea cee aeons Attributes Necro a es are = link to another website. ear ae Ci eeu OM em etree ene Me clicking this link. ea ee ye ERA et atom COLAO y Rol Meu eR cle Sens CSS Basics OMEN RRM este I hu eer ua eras Paced Weer eta etennUT te background-color: red; Cee ce rem hemor ek color: white; Change text color to white. } Pa esatphss CSS Syntax CSS Selector = which element(s) will be modified 4p RUC CR Cm Ue acid I ras ot button { 7 be placed inside {...} background-color: red; an L Eras Nees CIEE Mm Currie) the property to) CSS Properties ROCK nese ee ean Lea ntd button { Pee ae ees CS Ce Ct ae na Cee (lai Meee oe La rgbvalue:rgb(@, 150, 255); Oar eee color: white; Sets the text color. Takes the same values as Peetu no omen nem et eed Seu Tei RecA y Peron tctedad Pastel ae) EC Lees Seen UE CoRR Noe urea era Ces Pe Cea es Crt re Teena Dye uae eae border-style: solid; elena aad Renae secs Sects tence Oi NPS tea CM Cima See cacotis Sets the border style. Common values: Crone Clonal Ceres Reger aca How To Google CSS Properties We regularly use Gooale to search for CSS properties that we don't know or don't remember. Meu ker eee Mra ON MAUR ental m send Meals te Rere Ee ea aIC oe Peer teen SSAA ees ae Eee Rone Cree nc rte ee See eat a ey a ore Neonat CEI TC) Here are some categories of values that are useful to know: Color Values Pee Mellon ui ucla Dele 2. RGB value: rgb(@, 150, 255); Pee eee emcee tun [rman mean keer Mer combination of red, green, and blue (RGB). In CSS, this is represented by rgb(.. rgb(@, 150, 255); a aes red green blue LTol Morel OEM eR RL D1 eal rgb(2, @, @); = black rgb(255, 255, 255); = white EMO arity Rae U uC ACR CSC bi6]-}elol als Sic Ce eo ee ee eR Re ea ache teon Cee Rut les aon eel Re 1 a oie Le) Ro elo leat) a zea} SORTS Sha Ema eee ba ee) SR US ue cect hPL ena eRe c etch) represent red, the second 2 characters represent green, and the third 2 characters eee nme Ae aCe noel cite en mcr as 4. RGBA value: rgba(@, 150, 255, @.5); Same as RGB, except with an additional a-value (alpha value). The a-value determines Cente Ut ge EE cece mea Ree Ttad Perea ee OSE OL ea ices (VEER Ceara AIS EMane cca ld PCR) Pee kum ean ae mue et ura nn uk (ele For example: a 4K screen is 3840px by 2160px. 2. Percent: 50%, 100% A relative measurement. For example, width: 50%; means 50% of the width of the page (or if the element is inside another element, 50% of the width of the container element). CAA coe a) Peete i enc re tern ceeocse sia em = relative to the font-size of the element (2em means 2 times the font size). CROCUS cic aic condom ort cecum uc ans MO oku eran eee kre PER Sw Nailed ESSN Cea cheneie ess el ets ual CRN OcIon ae aes emo eta et tae Pe eS OU aa Reet Siewairatd ogc ae Ree eI pol a7 a scurd Reema oon REN apt aoe | Pere Cm Rue ce a poe class="subscribe-button” } eae eee ot et ta ceney NVM RS unt CR eRe) Siewert a7 Ms scurd ca ieee ered Blot) Motte cet ta conned } View the HTML Sourges Elements Con: Styles