CSS / TECKENSNITT
Teckensnitt och storlek
Vill du använda dig av ett och samma teckensnitt på hela din hemsida så är det smidigaste alternativet att använda sig av en stilmall som du kopplar till alla undersidor. Om du sen vill ändra teckensnitt på dina sidor behöver du bara gå in och redigera stilmallen istället för att redigera om varenda sida. Säg att du vill använda dig av teckensnittet "Verdana" i storleken 11 pixlar, då kan du använda dig av nedanstående kod:
body {
font: 11px Verdana;
}
font: 11px Verdana;
}
Detta ger alltså teckensnittet "Verdana" i storleken "11 pixlar" och i svart färg (svart färg väljs automatiskt om inget annat anges).
Kopiera sen koden och klistra in i ett nytt textdokument. Spara sen dokumentet till ex. "teckensnitt.css", det är filändelsen som är det viktiga. Där efter kan du koppla alla dina html-sidor till teckensnittet genom att länka till stilmallen med följande kod:
<LINK REL="stylesheet" TYPE="text/css" HREF="teckensnitt.css">
Ovanstående kodsnutt ska läggas mellan <HEAD> och </HEAD>. För att vara säker på att man får det teckensnitt man vill ha även i tabeller och dylikt som man skapar så använd istället följande kod i stilmallen:
body {
font: 11px Verdana;
}
table, tr, td { font: 11px Verdana; }
p { font: 11px Verdana; }
li { font: font: 11px Verdana; }
font: 11px Verdana;
}
table, tr, td { font: 11px Verdana; }
p { font: 11px Verdana; }
li { font: font: 11px Verdana; }
Att göra på ovanstående sätt medför att du aldrig behöver skriva ut nån kod för teckensitt när du skriver in text i dina html-dokument. För detta kommer att kopplas automatiskt till stilmallen du skapat och utifrån den skriva ut det teckensnitt du valt. Tips! Ett smart sätt när man skriver in kod för teckensnitt är också att skriva "alternativa" teckensnitt. Detta innebär att om en webbläsare av någon anledning inte skulle ha stöd för det teckensnitt du anger som förstahandsval, då går det till andra -eller tredjehandsvalet istället:
"font: 11px Verdana, Helvetica, Sans-serif;"
"Helvetica" är vanligt på Macintosh-datorer, och Sans-serif bör man alltid avsluta med då det ger valid CSS (håller en webbstandard). Bara för att det ska bli nämnt så kan du också bädda in teckensnitt på nedanstående vis: (Direkt i HTML-koden):
<FONT STYLE="font: 11px Verdana, Helvetica, Sans-serif;"> (Mellan HEAD-taggarna på varje sida du vill ha teckensnittet):
<STYLE TYPE="text/css">
<!--
body {
font: 11px Verdana;
}
-->
</STYLE>
<!--
body {
font: 11px Verdana;
}
-->
</STYLE>
Färg på teckensnitt
För att bestämma färg på texten skriver du in "color: färg;".
Exempel röd text direkt i HTML-taggar:<FONT STYLE="font: 11px Verdana; color: red;">
(Efter all text som ska vara röd avsluta med </FONT> för att inte texten efter ska bli röd också.) Resultat: Röd text i "Verdana", storlek 11px m.h.a. CSS.
Andra teckensnitts-egenskaper
Fet text: font-weight: bold;
Understruken text: text-decoration: underline;
Letter spacing: letter-spacing: 3px; Du kan alltså skriva in det såhär om du vill ha t.ex. fet och understruken text:
<FONT STYLE="font: 12px Verdana; font-weight: bold;
text-decoration: underline;">
Text som ska vara fet och understruken i strlk 12 px (Verdana)...
</FONT>
Resultat: Text som ska vara fet och understruken i strlk 12 px (Verdana)...
text-decoration: underline;">
Text som ska vara fet och understruken i strlk 12 px (Verdana)...
</FONT>