Basic CSS Styling

Skip to content

Om CSS

HTML er byggeblokkene for hvordan en nettside skal være satt opp, men HTML forteller ingenting om hvordan en nettside skal se ut. Det er her CSS kommer inn.

CSS står for “Cascading Style Sheets”, som sikkert ikke forteller så mye, men det viktigste å vite er at det er et “stil-ark”. Med andre ord, det gir en “stil” på en nettside. Det er veldig lett å lese, og egentlig lett å skrive, men du må være nøyaktig når du skriver det.

Det første vi skal se på er noe som heter “Internal CSS”.

Internal CSS

Dette er en type “CSS” som befinner seg i en HTML fil. Det går an å ha CSS i en egen fil, men det skal vi se på senere.

For å begynne med CSS skal vi begynne med å gå i <head>-taggen vår i HTML.

Oppgave 1.1

Legg til denne <style> taggen ett eller annet sted i mellom <head> og </head>:

<style>

</style>

Dette definerer et område der vi kan skrive CSS kode.

Struktur

CSS-kode har en veldig annerledes struktur enn HTML, men det er relativt enkelt å forstå:

element {
    property: value;
}

CSS koden består av tre deler:

  • element:
    • Bestemmer hva vi skal sette stil på.
    • Eksempler her er h1, p, body, a, altså, en hvilken som helst tag.
  • property:
    • Bestemmer hva som skal endres med dette elementet.
    • Eksempler:
      • color - endrer på tekst-fargen
      • background-color - endrer på bakgrunnsfargen.
  • value:
    • Bestemmer hva propertien skal endres til.
    • Eksempel er tekstfargen til red, som lager rød tekst.

Important

Hver linje i CSS skal slutte med semi-kolon ;
Ellers så kommer ikke CSS koden din til å fungere skikkelig.

Oppgave 1.2a

Inne i <style>-taggen. Legg til følgende CSS-kode:

p {
    color: red;
}

h1 {
    background-color: blue;
    color: black;
}

Oppgave 1.2b

Hva tror du denne koden kommer til å gjøre?

Oppgave 1.2c

Hva hadde du gjort hvis du skal endre teksten til blå? Hva med gul? Hva med grønn? Prøv deg litt fram å se hva som skjer!

Oppgave 1.2d

Prøv å legg til flere linjer i ett element, for eksempel: legg til en bakgrunnsfarge på paragrafene (p elementer). Hint: Husk at hver linje må slutte med en semi-kolon ;.

Oppgave 1.2e

Bruk font-size til å endre på tekst-størrelsen. Eksempel på hvordan dette kan gjøres:

p {
    color: red;
    font-size: 18px;
}

Info

px er kort for pixel, og forteller at tekst-størrelsen skal være i piksler.

Selektorer

Det som i struktur var nevnt som element, er det vi kaller en “selektor”. Det finnes mange typer:

Selektor Beskrivelse
h1, p, div, a Velger HTML-tagger. For eksempel, alle <h1>-elementer.
* Velger alle elementer på siden. Denne brukes sjeldent.
.class Denne skal vi se på, men den velger alle elementer med en gitt “klasse”. Som er mer spesifikt en alle elementer av en gitt type.
#id Velger elementer med en spesifikk ID. Denner er enda mer spesifikk en klasser.

Klasser

En av de mest nyttige selektorene er “klasse” selektoren. Den lar deg velge mer spesifikke elementer. La oss se på et eksempel.

Vi har denne HTML koden:

<p>Dette er en paragraf!</p>
<p>Jaggu, dette er enda en paragraf!</p>
<p>Denne paragrafen kunne gjerne ha vert blå.</p>

Hvordan kan vi, ved hjelp av CSS, få bare den tredje paragrafen til å ha blå tekst? Jo, her kan vi ta i bruk klasser!

Oppgave 1.3a

Bruk en CSS klasse som følger for å gjør paragrafen blå:

<p>Dette er en paragraf!</p>
<p>Jaggu, dette er enda en paragraf!</p>
<p class="blue-paragraph">Denne paragrafen kunne gjerne ha vert blå.</p>

Dermed, med følgende CSS kode i <style>:

.blue-paragraph {
    color: blue;
}

Resultatet av dette skal bli som følger:
Klasser i CSS eksempel bilde

Oppgave 1.3b

Prøv deretter å gjør de to andre paragrafene røde med å bare bruke en klasse som heter red-paragraph.

Oppgave 1.3c

Prøv å bruk en p selektor nå, med noe annen styling. Hva skjer? Er det som forventet?

Info

Hva som skjer i CSS kommer an på hvor spesifikt noe er. En klasse-selektor er mer spesifikt en en “tag” selektor. Det betyr at uansett hva du putter i p stylen så vil det i klassen være det som faktisk skjer.

Tip

Du kan også ha flere klasser på ett og samme element. Alt du trenger å gjøre er å separere klasser med et mellomrom:

<p class="blue-text epic-background">Dette ser tøft ut!</p>

Oppgave 1.4

Prøv selv! Prøv å bruk klasser i den følgende HTML-koden til å gjøre nasjonal-sangen veldig kul! (Gjerne bare kopier koden og modifiser)

Dersom dere vil vite mer om hva dere kan gjøre med CSS, gå til w3schools!

<span>Ja vi elsker dette landet</span><br>
<span>Som det stiger frem</span><br>
<span>Furet værbitt over vannet</span><br>
<span>Med de tusen hjem</span><br>
<span>Elsker Elsker det og tenker</span><br>
<span>På vår far og mor</span><br>
<span>Og den saganatt som senker</span><br>
<span>Drømmer på vår jord</span><br>
<br>
<span>Dette landet harald berget</span><br>
<span>Med sin kjemperad</span><br>
<span>Dette landet håkon verget</span><br>
<span>Medens øyvind kvad</span><br>
<span>Olav på det land har malet</span><br>
<span>Korset med sitt blod</span><br>
<span>Fra dets høye sverre talte</span><br>
<span>Roma midt imot</span><br>

Info

Du kan også bruke <span> rundt enkelte ord dersom du vil gjøre noe moro med dem.

ID-selektor

Ganske likt som med klasser så finnes det også enda en måte å velge noe i CSS, ved å bruke en “ID”. Denne er enda mer spesifikk enn en klasse. Det er kanskje litt vanskelig å forstå hvorfor denne bør brukes for øyeblikket, men hvis dere jobber mye med HTML, CSS og JavaScript vil nytten av ID være klarere.

Et element kan ha en ID, og meningen er at den skal være unik. Kun ett element skal ha en gitt ID. Dette gjør at det er kjempe-spesifikt når vi velger noe. Her skal vi bare vise et eksempel på hvordan dette ser ut i forhold til CSS:

<h1 id="main-header">Velkommen til min nettside!</h1>

CSS-koden for å velge denne headeren:

#main-header {
    font-weight: bold;
}