CSS-Tutorial I – ”Grunderna”
I min förra tutorial, på min tidigare blogg, gjorde jag misstaget att börja med att beskriva hur man designar citat utan att ha förklarat grunderna i css. Detta gjorde att en stor del av mina läsare inte förstod hur man skulle göra. Detta misstag skall jag inte göra igen utan nu börjar vi med grunderna i css.
Varför en stilmall?
Poängen med css och för den delen validering är att skilja på struktur och presentation. I ditt html-dokument skall enbart strukturer specificeras och i din stilmall skall enbart presentationen visas. Taggar såsom <font color=”red”> i ditt html-dokument är alltså inte okej utan färgen på din font skall alltid specificeras i din stilmall. Du skiljer strukturen från presentationen dels för att få mindre markup i ett dokument, för att kunna validera sidan och säkerställa att sidan följer rådande webbstandard men också för att själv slippa ändra om alla presentations-taggar när du vill byta design.
CSS-regler
En stilmall är uppbyggd med regler (eller syntax på engelska), varje specifikation av en tagg kallas regel och ser ut som följande:
Här ser ni då min vackert ritade regel för p-taggen. P är en tagg som finns mellan stycken i all text man skriver så det var därför jag valde att ta just den taggen, alla använder den och de som inte gör det borde börja omedelbart. Namnet på taggen, klassen, id:n osv kallas selektor och inte ”tagg”, taggen är det man skriver i html-dokumentet tex: <p> Detta är en text</p>.
Allt som specificerar selektoren är deklarationer, dvs. allt som förklarar hur just den taggen skall se ut. Deklarationer i sig uppbyggd med egenskaper och värden. En regel behöver inte bara vara uppbyggd med flera deklarationer utan också flera selektorer:
- h1, h3, h4, h5 {
- color: #444;
- font-family: Verdana, Arial, Sans-serif;
- text-transform: uppercase;
- }
h1, h2, h3, h4 och h5 är selektorerna och alla specificeras nu genom deklarationerna. Sedan kan man skriva enstaka regler för var och en för att specificera storleken, margin eller andra saker som man vill att varje selektor ska skilja sig i.
Olika egenskaper
När du ska börja ditt skapande kan du slås av att du inte har någon aning om vad man faktiskt kan göra. Vet man inte om vilka egenskaper det finns att använda till sin regel så blir man väldigt begränsad i sitt kreativa skapande.
Color
Egenskapen color specificerar färgen på texten. Här kan du använda dig av hexadecimal som kan se ut som #000 eller #f9f9f9, en hexadecimal består av sex siffror eller bokstäver (värde) som kan översättas till #RRGGBB alltså #RedRedGreenGreenBlueBlue. Antingen kan man skriva ut hela hexadecimala-värdet med sex värden eller med tre värden om hexadecimala-värdet är enhetlig såsom #fff (vit) eller #222 (mörkgrå). Exempel:
- p {
- color: #990000;
- }
Mer om det hexadecimala-färgsystemet kan du läsa på W3schools.
Texten skriven i p skulle nu bli röd, du kan skriva red också och generera samma färg men det är ganska begränsande att använda red, black, blue och green som färgval då du inte kan fritt välja nyans själv.
Font
Fonter och textformatering ska egentligen bli ett inlägg för sig men jag tänkte förklara font lite kortfattat här ändå.
Egenskapen font är ett samlingsnamn som specificerar texten. Det kan se ur ungefär såhär i stilmallen
- p {
- font: bold 12px Verdana, Arial, Sans-serif;
- }
Värdet bold gör precis som det låter, texten fetstil. Här kan du välja italic för kursiv eller inget för normal stil. Värdet 12px specificerar storleken på texten. Du kan också välja mellan procent eller em och detta skall jag förklara lite närmare i inlägget om just textformatering.
Verdana, Arial,Sans-Serif betyder helt enkelt att webbläsaren i förstahand skall använda sig av verdana som typsnitt och om inte verdana finns skall den använda sig av Arial. Verdana och Arial är visserligen webbsäkra fonter (de flesta operativsystem har dem) men om det motförmodan råkar vara så att dessa fonter inte finns är det bra att välja Sans-serif eftersom då väljer webbläsaren det första bästa Sans-serif fonten som finns (Verdana och Arial är båda Sans-seriffer). Detta gör jag för att jag verkligen inte vill ha serif i min brödtext, har du själv Times new roman exempelvis så rekommenderar jag dig att byta, nej men seriöst välj serif då på slutet av din font familj.
