CSS Basic: 1 stilark

3 februar 2015

Tilpassa etter w3schools CSS Tutorial.

For å ha nytte av denne leksjonen må du kunna grunnleggjande HTML. Alle html element (som overskrift h1, lister, tabellar etc.) er definert vha. ein tag. Overskriften i dette dokumentet bruker feks. h1-taggen:

<h1> CSS Basic</h1>

Men korleis veit nettlesaren korleis dette skal sjå ut? Her har eg fortalt nettlesaren at den skal bruka grønfarge vha eit såkalt eksternt stilark. Vi skal straks læra korleis det kan gjerast. Men når du ikkje har fortalt det til nettlesaren, så bruker den sine forhåndsinnstilte (default) verdiar. Disse varierer frå nettlesar til nettlsar, men ikkje så mykje. Alle bruker feks. svart farge. Hvis ikkje du vil bruka default font og farge, så må du leggja til ein såkalt stil. Det fins tre ulike måter å gjera det på.

1) Inline Style

Den enklaste måten er å gjera det inne i taggen. Hvis du vil leggja stil til h4-taggen, kan du gjera slik:

<h4 style="color:sienna"> CSS Basic</h4>

Då blir det sjåande slik ut:

Overskrift h4

Når formatet blir lagt inn i taggen på denne måten kallast det "Inline Style ". Hvis du bare skal laga ei enkelt html-side er det OK å gjera det på den måten. Neste gong du bruker h4 vil teksten vera svart igjen:

Overskrift h4

2) Internt stilark

Ein annan mulighet er å leggja all formatteringen oppe i head seksjonen i html-dokumentet ditt. Hvis du feks. skriv (slik det er gjort i dette dokumentet)


<head>
     <style>
     h2 {color:red;}
     </style>
</head>

så kan vi bruka denne stilene nede i teksten ved å setta inn ein h2-overskrift slik:

<h2> Test </h2>

Resultatet blir slik:

Test

Ein fordel med dette er at no vil alle dine overskrifter i h2 blir raude. Du treng ikkje definera det gong på gong:

Test2


3) Eksternt stilark.

Ein ulempe med internt stilark er at hvis du vil ha samme stil i fleire html-dokument så må du legga inn stilane i alle filene. For å unngå det, er det kan du bruka eit såkalt eksternt stilark, og det er den vanlige måten å gjera det på. Du kan då kopiera koden over til ei fil som vi feks. kan kalla stilark.css, og så kobla vår html.fil til denne. Det gjer vi ved å ta med linja


<head>
     <link rel="stylesheet" type="text/css"   href="stilark.css">
</head>

Det vi oppnår med å gjera det på denne måten er at dette stilarket kan brukast av mange html-dokument. Hvis vi seinare har behov for å endra i stilane, så treng vi bare gjera det ein stad, nemlig i stilarket, og så vil alle dokumenta våre forandra seg i henhold til det. Dette hjelper oss altså til å halda ein enhetlig stil på nettstaden vår.