Vad är ett externt stilark?

Ett externt stilark definierar hur en webbsida ser ut. Du kan använda ett formatmall för att ange saker som textens storlek, färg och typsnitt, knapparnas färg eller placeringen av menyer och sidofält.

Kod används i ett externt stilark

Det finns två typer av kod som används för att skapa en grundläggande webbsida:

• HyperText-markeringsspråk (HTML): Definierar innehållet på en webbsida. Den innehåller den faktiska texten med en markering som identifierar om textavsnitt är stycken, rubriker eller listor. Den innehåller också länkar till bilder som visas på sidan och hyperlänkar till externa sidor.
• Cascading Style Sheets (CSS): Ett kodningsspråk som används för att ange hur innehållet ska visas. Den definierar hur varje typ av textelement visas och kan visa samma typ av element på olika sätt om de tillhör olika klasser eller har olika id. Detta gör att saker som menyer och listor kan bete sig mycket annorlunda inom en webbsides huvudtext.

I allmänhet är det en bra idé att skilja stil från innehåll, eftersom det låter dig fokusera på en sak i taget. Detta blir ännu viktigare i ett team, så att specialister inom innehåll och presentation kan arbeta oberoende av resten. Ännu viktigare är att det tillåter också att en enda uppsättning stilinstruktioner tillämpas enhetligt över en hel webbplats.

Den visuella presentationen av webbplatsen kan sedan ändras från ett enda formatmall utan att varje webbsida redigeras individuellt. För större komplexa webbplatser kan ett antal stilark användas för att styra text, menyer och indelningar på sidor. Denna samling stilark kan kallas ett "tema".

Använda en extern CSS för att länka HTML till CSS

Det är möjligt att inkludera CSS-stil direkt i HTML-koden på en webbsida, med CSS för att individuellt utforma varje stycke och rubrik på olika sätt. Den här typen av inline styling i allmänhet är det ingen bra idé, eftersom du tappar alla fördelarna med att skilja stil från innehåll. Framför allt förlorar du möjligheten att uppdatera hela din webbplats konsekvent från en enda fil.

Det rätta sättet att tillämpa en stil på en webbplats är att skapa en enda extern stilarkfil för varje typ av stil du vill använda och sedan referera till dessa filer från varje HTML-fil. Du kan till exempel ha följande externa stilark:

• text.css
• menyer.css
• layout.css

Du kan göra ändringar i CSS-koden i dessa externa formatmallar utan att ändra deras filnamn, vilket betyder att referenserna till dessa filer, inom HTML på alla dina webbsidor, inte kommer att vara ändrats.

Exempel på HTML och CSS

En mycket enkel HTML-sida kan innehålla följande kod:

 Allt om mig!

Den här sidan handlar om mig och varför jag är fantastisk.

Ett enkelt externt stilark kan länkas till den här sidan genom att lägga till följande kod under.

typ = "text / css"
href = "myStyle.css" />

Skapa en annan textfil som heter myStyle.css och ligger i samma mapp som index.html som innehåller följande kod:

h1 {
färg: # FF7643;
font-face: Arial '
}
p {
färgen röd;
teckenstorlek: 1,5 em;
}