CSS Basic 1: Tre måtar å styla på.

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: 1 stilark</h1>

Men korleis veit nettlesaren korleis dette skal sjå ut? Med mindre du sjøl har bestemt farge, font osv, så bruker nettlesaren dei innebygde innstillingane. (Dette kallast default). Disse verdiane varierer frå nettlesar til nettlesar, 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 dette på.

1) Inline Style

Den enklaste måten er å gjera det inne i taggen. Hvis du vil laga ein ny farge til ein bestemt h4-tag, så 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 styla ein enkelt tag er det OK å gjera det på den måten. Andre h4-element vil ha den vanlige svarte fargen (dvs. default):

Overskrift h4

2) Internt stilark

Ein annan mulighet er å leggja all formatteringen oppe i head seksjonen i html-dokumentet ditt. Dette kallast eit internt stilark. Dette dokumentet har følgande kode:


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

No vil denne stilen bli brukt på alle h2-element slik:

<h2>Ei h2-overskrift</h2>

Ei h2-overskrift

Ei h2-overskrift til

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.