Med extern CSS använder du dig av en separat CSS-fil som innehåller dina deklarationer. Denna kallas för stilmall. Vill du göra en större ändring av designen på din webbplats så är det i första hand stilmallen som du gör ändringar i för att få designen som du vill.
Länka webbsidan till stilmallen
Webbsidan länkas hop med CSS-filen och får på så sätt information om hur varje element eller tagg på webbsidan ska visas.
Länkkoden för webbsida och stilmallen ska klistras in mellan <head> och </head> och ser ut så här (beroende på vad du ger din CSS-fil för namn):
<link href="style.css" rel="stylesheet" type="text/css" />
Exempel för extern CSS
Nedan följer några exempel för olika sätt att skriva deklarationer med extern CSS.
Exempel 1:
p {color: #CCCCCC;}
Deklarationen ovan säger att varje stycketagg p ska presenteras i ljusgrå färg på webbsidan. Egenskapen är color och värdet är #cccc, den hexadecimala färgkoden för ljusgrått.
Exempel 2:
p {
color: black;
font-size:12px;
border: solid 2px;
padding 3px;
font-weight: bold;}
Ovanstående kod betyder att stycket ska vara skrivet med svart text, att text-storleken ska vara 12 pixlar, att stycket ska ha en kantlinje som är 2 pixlar och med en padding som är 3 pixlar samt att texten ska vara skriven med fet text.
Exempel 3, deklarationer med selektorer för id och class
Låt säga att du har en div-behållare för din sidomeny med id "sidomeny". Din CSS-kod skulle då kunna se ut enligt följande för att göra menyn 180px bred med 5px padding och med textinnehåll som är svart.
#sidomeny {
width: 180px;
padding: 5px;
color: black;}
Om du istället använder en class skulle det kunna se ut så här om du vill sätta upp deklarationer för grön text och kursiv text:
.usp {
color: green:
font-style: italic;}
Kom ihåg: Id används för att kunna skilja ut element och taggar unikt. Class används om du vill använda samma formatering för flera områden på en webbsida. Läs mer: Id och class
När ska man använda extern CSS?
Alltid. Tanken med just XHTML och CSS är att du ska kunna separera informationskod från presentationskod så långt det är möjligt. Allt blir mycket tydligare om du har CSS i en extern stilmall än om du blandar in presentationskod direkt i XHTML-koden.
Basera alltså alltid din webbplats på en extern stilmall, och komplettera om det behövs med inline CSS och embedded CSS som förklaras utförligt i kommande artiklar.
<<< Deklarationer || Inline CSS >>>
