Det finns ett kodningsspråk som heter CSS. CSS står för Cascading Style Sheets eller stilmall som vi kallar det på svenska. Denna stilmall används tillsammans med HTML för att skapa en mer unik design till din hemsida. Genom att koda i detta språk så kan du bestämma bland annat färger, typsnitt och storlekar på både bilder och text. Men CSS är också mycket mer än så. När man väl börjar med mer avancerad kodning inom CSS så brukar man även skapa denna kod med hänsyn till datortyper, mobila enheter, skärmupplösningar och mycket mer. Man kan alltså skapa en webbsida som är anpassad utifrån användarens behov. En mycket viktig tillämpning om man ska kunna skapa professionella hemsidor i dagsläget.
Det absolut smidigaste med stilmallar är man kan göra stora ändringar som påverkar hela hemsidan med hjälp av endast små justeringar i koden. Du behöver alltså inte påbörja en helt ny kod för hela hemsidan om du vill göra en liten ändring, det räcker med att ändra endast den delen av koden.

Att skapa CSS kod kan göras på olika sätt. Du kan skapa koden direkt i ditt HTML dokument och alltså använda båda kodspråken på en och samma plats. Detta kan dock bli rörigt om du som kodare inte är väldigt strukturerad.
Ett annat sätt att använda stilmallar är att skapa ett separat dokument som du sedan kopplar till din HTML mall (se nedan).
Att använda ett separat dokument har ler fördelar då du snabbt och enkelt kan byta dokument om du vill använda en helt ny design. Du kan även inkludera fler dokument i en och samma HTML kod vilket gör det enkelt att strukturera olika stilmallar för olika delar av hemsidan, vilket i sin tur gör det lätt att skapa små förändringar.
Nedan kan du se exempel på hur det kan se ut när du väljer att inkludera en CSS stilmall i ditt HTML dokument.

  • link rel=”stylesheet” href=”style.css”

Länken lägger man mellan “head” – taggarna.

Men här har man valt att lägga in det direkt i dokumentet. Dock är det säkrare att lägga det separat. För att ”koppla” på CSS i dokumentet så lägger man in dessa två taggar mellan ”head” taggarna:

  • style
  • /style

Vad gör då detta för nytta? Jo här kan man till exempel sätta en bakgrundsfärg på dokumentet vilket man gör på följande sätt:

  • body {background-color: powderblue;}

Man kan givetvis sätta vilken färg man vill och man kan använda hex-code som till exempel #000 för svart i stället för powderblue. Kommandot ska in mellan ”style” – taggarna.

Dessutom så har man här möjlighet att ändra text färg, storlek och typsnitt på detta sätt för att ändra den vanliga paragraf texten:

  • p {color: blue; font-size: 12px;}

Sen finns det sex stycken olika rubrik texter man kan ändra samma saker på och dem heter h1, h2, h3, h4, h5 och h6 så då ändrar man till exempel h1 på detta sätt:

  • h1 {color: red; font-size: 20px;}

För att använda till exempel paragraf texten så kan man skriva följande commando mellan dem så kallade “body” taggarna:

  • p

Detta är en paragraf text.

  • /p

Man använder även css style för att skapa vissa områden på dokumentet som till exempel en huvudspalt och det kallas ”div” det gör man så här:

  • #header {width: 900px; height: 200px; background-color: yellow; text-align: center;}

När man skapar denna I “body” så skriver man:

  • div id=”header”

Detta är huvudspalten.

  • /div

Tänk på att innan varje ”tagg” måste man ha ett mindre än tecken i stället för asterixen och ett större än tecken efter ”taggen”.