Husets stilmall

1. Inledning

Den här sidan berättar lite om den stilmall jag använder för min webresurs. Den exakta sökvägen till filen är: http://www.jonasweb.nu/css/screen.css.

Jag går nedan igenom de viktigaste delarna av denna stilmall och berättar vad koden är till för. Du får gärna kopiera koden, men det är ju förstås roligare om du försöker göra nåt själv också!

2. Inställningar för body

body {
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif;
background: white;
text: #333333;
font-size: 100%;
margin-top: 2px;
margin-left: 1px;
margin-bottom: 5px;
margin-right: 5px;
border-top: 0px;
border-left: 0px;
border-bottom: 0px;
border-right: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px; }

font-family ställer in teckensnittet globalt över hela dokumentet. Jag har valt Verdana som huvudalternativ och sedan Trebuchet och Geneva, som jag tycker är betydligt snyggare än de lite kantiga och tråkiga Arial och Helvetica. Men för dem som inte har något av dessa teckensnitt gör jag det klart att det skall vara en font utan seriffer, alltså en sans-serif.

background ställer ju in bakgrundsfärgen. text är inte riktigt korrekt stilmallskod, men använder man color vill en del äldre webbläsare färga bakgrunden i den färgen... Textfärgen är inte svart eftersom det ger för stor kontrast och gör texten svårare att läsa.

font-size är bäst att ange i procent av den storlek som webbläsaren använder. Grundinställningen är storlek 12, som varierar något mellan Windows och andra operativsystem.

Sedan kommer inställningar för marginaler. Detta hade gått att ställa in med enbart margin, men då måste alla värden vara samma. Här har jag valt att försöka styra marginalen så att den hamnar ganska nära skärmkanten längst upp. Marginalen passade ganska bra för skärmar som visar bilden i 800x600 pixlar. Möjligen kan man öka värdena något för skärmar med högre upplösning.

border ställer här in så att det inte läggs till någon kant. Vissa webbläsare lägger nämligen till ett sådant även om kanten är osynlig.

padding fungerar på motsvarande sätt och bestämmer avståndet mellan texten och marginalen, som här är noll.

3. Inställningar för länkar

Så här ser stilmallskoden ut för mina länkar:

A:link {
color: #333333;
background-color: transparent;
text-decoration: none;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif; }

A:visited {
color: #993300;
background-color: transparent;
text-decoration: none;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif; }

A:hover {
color: #333333;
background-color: #EEEEBB;
text-decoration: underline;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif; }

A:active {
color: #333333;
background-color: #EEEEBB;
text-decoration: underline;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif; }

Jag har fyra olika lägen: länkar som inte är klickade på (link), sådana som är besökta (visited), sådana som muspekaren befinner sig över (hover) och till slut vad som händer då man klickar på länken.

Grundinställningen är at länkarna har samma färg som resten av texten på sidan, dvs #333333. Men när man aktiverar en länk på något sätt så tycker jag man skall kunna se det, dels genom att man får en annan bakgrund och att länken blir understruken. När man besökt en sida skall det också synas. Röd färg för besökta länkar är standard och det har jag behållit.

4. Rubriker

Jag har några olika rubriker på mina sidor. Här är inställningen för de vanliga, dvs h1, h2 och h3:

H1 {
margin-left: 10px;
font-weight: bold;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif; }

H2 {
margin-left: 10px;
font-weight: bold;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif; }

H3 {
margin-left: 10px;
font-weight: bold;
font-style: italic;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif; }

Först och främst har jag valt att inte styra storleken på rubrikerna, varken med pixel- eller procentvärden. Anledningen är att många webbläsare struntar i det eller gör alla rubriker likadana. I synnerhet procentvärden får många webbläsare att krångla.

Marginalen (margin-left) använder jag för att dra in rubrikerna något från övriga texten. Det ser snyggare ut och ökar läsbarheten, tycker jag.

Jag styr teckensnittet också för att få med mig alla webbläsare. Rubrikerna skall normalt ärva teckensnittet från brödtexten, men alla webbläsare följer inte denna praxis.

Så här ser rubrikerna ut:

Rubrik 1

Rubrik 2

Rubrik 3

5. Innehåll och sidfot

På mina sidor har alla sidor en innehållsförteckning längst upp och en sidfot längst ner. Koden som styr dessa ser ut så här:

.lankrubrik {
background: #EEEEBB;
padding: 5px;
font-size: 90%;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif; }

Jag har helt enkelt skapat en klass som jag kallat "lankrubrik". Jag har lagt till en bakgrundsfärg, lite utrymme runt om med padding, dragit ner på textstorleken något och sedan angett teckensnittet igen.

.sidfot {
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif;
text-align: left
margin-left: 2px;
font-style: normal;
font-size: 70% }

I sidfoten har jag justerat texten till vänster och lagt in en marginal om 2 pixlar. Lite onödigt kanske, eftersom de flesta webbläsare ändå gör detta. Däremot har jag dragit ner teckenstorleken ganska rejält.

Så här ser klassen "lankrubrik" ut.

Så här ser texten för sidfoten ut.

6. Specialtext

Med specialtext menar jag t.ex sådan text du sett på den här sidan för att visa stilmallskod:

.code {
margin-left: 10px;
font-family: 'Courier New', Courier, sans-serif;
font-size: 100%; }

Jag har alltså skapat en klass för att kunna visa en lite annorlunda stil på texten, i det här fallet Courier. För att visa att Courier New är en och samma stil har jag använt mig av ' (som jag kallar enkelfnuttar).

Ett litet indrag av texten gör läsbarheten större. Eftersom Courier är en ganska liten stil i sig så har jag dragit uppstorleken från 90% till 100%.

En annan variant av specialtext är den som står inuti tonplattor som den här. Koden är då:

.datorspel1 {
background: #FF9900;
font-size: 100%;
font-weight: bold;
padding: 5px;
border-left: ridge 1px;
border-left-style: solid;
border-left-color: #333333;
border-right: ridge 1px;
border-right-style: solid;
border-right-color: #333333;
border-bottom: ridge 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
border-top: ridge 1px;
border-top-style: solid;
border-top-color: #333333;
}

Som tidigare finns här kommandon för teckensnitt, teckenstorlek, bakgrund och padding. Sedan följer en detaljerad specificering över hur varje kant runt texten skall visas.

Den typen av kommandon använder jag för alla mina innehållsförteckningar på de olika index-sidorna. Man kan leka med färgen på bakgrunden och kanten mycket mer än jag gjort, men läsbarhet och tydlighet är viktiga för mig.