Nyt kun olemme taistelleet saadaksemme oikean sisällön Almanacin kotisivulle, voimme kaivaa todellista muotoilua CSS: llä.
Päätimme käyttää käsinkirjasinfonttia joillekin tämän mallin biteille. Selataan joitain fontteja Dafontissa ja päätämme ladata Shadows In Light. Latauksen mukana tulee fontti muodossa, joka toimii työpöydällä, mutta ei kaikkia @ font-facelle tarvittavia muotoja. Joten suoritamme sen Font Squirrelin kautta.
Siirrämme kirjasimet hakemistorakenteeseen, missä niiden oletetaan olevan. Sitten kopioimme ja välitämme @ font-face -syntaksin muualta projektista Almanac-spesifiseen CSS: ään ja vaihdamme fonttien ja tavaroiden nimet.
Vietämme loppuajan CSS: n tönäisemisestä ja turmeltumisesta saadaksesi asettelun oikein, asettamalla värejä ja mitä muuta. Se on oikeastaan aika hauska mielenkiintoinen CSS-haaste, kun kaikki tehdään oikein. Loppujen lopuksi meillä on hyvin vähän hallintaa HTML-lähdössä. Se on vain sisäkkäisiä luetteloita. Joten meidän on kohdennettava ja kelluttava asioita aivan oikein saadaksemme tarkan ulkoasun, jonka kuvittelin Photoshopissa.
