Det finns tre sätt att lägga in formatmallar på en hemsida, genom att lägga till ett style-attribut till en tag, genom att lägga in en <STYLE>-tag i HEAD och genom att länka till en extern formatmall. Jag rekommenderar att du länkar till en extern formatmall eftersom du då kan definiera om och modifiera utseendet på hela din site från ett enda dokument (det spar arbete för dig och det gör att din site laddar snabbare för den som läser mer än ett dokument på den).
Jag är ingen expert på CSS så jag ska inte ens försöka förklara i detalj hur det fungerar. Jag föreslår i stället att du antingen kopierar de förslag till formatmallar som jag visar nedan och använder dem eller om du vill lära dig mer om CSS att du läser vad de har att säga på W3C och the CSS Pointers Group.
Börja med att lägga in en LINK-tag i HEAD på ditt dokument:
<HEAD> <TITLE>Skriv nåt vettigt här</TITLE> <LINK REL="StyleSheet" href="/nånting/style.css" type="text/css"> </HEAD>
Sedan tar du och skapar filen style.css och i den lägger du någon av följande förslag till formatmallar:
body { color: #000000; background: #ffffff }
a:link { color: #0000FF; background: transparent }
a:visited { color: #663399; background: transparent }
h1, h2, h3, h4, p, em, strong, li, ul, ol, dl, dh, dd, address, hr, div,
blockquote, tt, pre { color: #000000; background: transparent }
td, th { color: #000000; background: #ffffff }
Först säger jag att BODY ska ha svart text på vit bakgrund. Sen säger jag att nya länkar ska vara blå och besökta länkar ska vara lila och att länkar ska ha genomskinlig bakgrund, d.v.s. visas mot den bakgrundsfärg som det element har som länken befinner sig i.
Sen räknar jag upp en massa användbara taggar och säger att de ska visas med svart text på genomskinlig bakgrund. Du kanske måste komplettera den listan om det är någon tag du vill använda som jag inte nämnt.
När jag testade den här formatmallen upptäckte jag att TH och TD behövde ha sin bakgrundsfärg specificerad, så jag satte den till vit.
Hur den här sidan ser ut med den enkla formatmallen.
body { color: #000000; background: #ffffff; margin-left: 5%; margin-right: 5%; }
a:link { color: #0000FF; background: transparent }
a:visited { color: #663399; background: transparent }
h1, h2, h3, h4, p, em, li, ul, ol, dl, dh, dd, address, hr, div,
blockquote, tt, pre { color: #000000; background: transparent }
strong { color: #000000; background: #ffff99; font-weight: normal; }
td, th { color: #000000; background: #ffffff }
.ruta {padding: 10px; border: solid thin; margin: 0px 0; color: black; background: #ffffcc; }
Här har jag lagt till marginaler (fem procent av bredden på sidan) och sagt att alla taggar som ser ut så här: <TAG class="ruta"> resulterar i text inlagt i en ljusgul ruta (koden för rutan har jag kopierat från en sida hos W3C och modifierat tills det såg ut som jag ville. Jag vet inte exakt vad varje detalj fyller för funktion). Jag har också sagt att alla STRONG-element ska visas som vanlig text "målad med gulpenna" i stället för att visas med fetstil.
På det sättet kan jag sen fortsätta att definiera färger och andra utseendedetaljer hos olika element.
Om jag sen vill sätta in CSS på ett ställe där det inte finns någon "naturlig hållpunkt" i form av ett HTML-element kan jag använda mig av de generella taggarna DIV och SPAN. DIV är en blocknivåtag och SPAN är en textnivåtag. De har ingen egen betydelse som alla de andra taggarna utan kan användas lite mer fritt, till exempel för att "sätta fast" CSS på en sida.
Hur den här sidan ser ut med den komplicerade formatmallen.
Det finns även en validator för CSS, använd den, men försök också att få tillfälle att kolla din site i så många olika webläsare som stöder CSS som möjligt
Ett sätt att kolla så att alla element fått färg ordentligt av formatmallen är att sätta default-färgerna i sin webläsare till något helt osannolikt som inte förekommer på någon av dina sidor (t.ex. magentafärgad text mot en knallgrön bakgrund). Sedan laddar du in din sida och kollar att det inte dyker upp några detaljer med de färgerna. Gör det det får du försöka "täppa till läckan" i formatmallen.
Var också noga med att kolla att dina sidor är läsliga utan CSS! Det ingår ju i den grundlägande designen av formatmallar att det ska gå att stänga av dem och då ska man få en förenklad presentation (men utan att förlora någon information).
Netscape 3 klarar inte CSS. Netscape 4 klarar CSS men är lite känslig av sig. Internet Explorer 3 påstås klara CSS men det gör den i praktiken så dåligt att det är bäst att bara stänga av formatmallar i den webläsaren. Internet Explorer 4 lär ska vara den som klarar CSS bäst (men tyvärr har jag själv inte haft så stora möjligheter att testa mina egna sidor i den). Jag har läst ett råd någonstans att klarar sig sidan i Netscape 4 så klarar den sig sannorlikt i Internet Explorer 4 också, men inte nödvändigtvis tvärtom.
Förhoppningsvis kommer framtida versioner av Netscape och Explorer att klara CSS bättre än de versioner som finns tillgängliga idag.
Sen finns ju Opera. Den har jag aldrig haft tillfälle att testa men den lär ska vara mycket robust och klara sig bra i de flesta sammanhang.
