# 100: Almanack Styling, del 1 - CSS-tricks

Innehållsförteckning

Nu när vi har kämpat för att få rätt innehåll på Almanaks hemsida, kan vi gräva i någon faktisk styling med CSS.

Vi bestämde oss för att använda ett handstilsteckensnitt för några bitar av denna design. Vi bläddrar igenom några teckensnitt på Dafont och slutar ladda ner Shadows Into Light. Nedladdningen kommer med teckensnittet i ett format som fungerar på skrivbordet, men inte alla format som behövs för @ font-face. Så vi kör det genom Font Squirrel.

Vi flyttar teckensnitten till vår katalogstruktur där de ska vara. Sedan kopierar vi och faserar @ font-face-syntaxen från andra håll i projektet till vår Almanac-specifika CSS och ändrar namnen på teckensnitt och grejer.

Vi spenderar resten av tiden på att pissa och prita CSS för att få layouten korrekt, ställa in färger och vad inte. Det är faktiskt en ganska kul en intressant CSS-utmaning att få allt lagt ut korrekt. När allt kommer omkring har vi väldigt lite kontroll över HTML-utdata. Det är bara kapslade listor. Så vi måste rikta in och flyta saker precis rätt för att få den exakta layout som vi tänkt oss i Photoshop.

Intressanta artiklar...