CSS Introduksjon

- Camilla Larsen

Agenda

Syntax, selektorer og spesifisitet

1 CSS introduksjon

Oppgave rundt CSS som dere har lært i forelesningen

2 Oppgave

Vi går igjennom oppgaven sammen

3 Gjennomgang av oppgave

Cascading style sheets

CSS gjør HTML dokumentet visuelt finere
CSS blir fortalt av den som skriver kodene, hvordan det skal se ut.

Vi har flere måter vi kan arbeide med
CSS på

Inline
Embedded
External

CSS

INLINE CSS

CSS koden skrives direkte i html elementene
Anbefales ikke å bruke ved større prosjekter.

<h1 style="color: red;">This is a headline</h1>

Embedded CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gokstad akademiet</title>
       
    <style media = "all">
         body {
            background-color: orange;
         }
         h1 {
            color: yellow;
            margin-left: 30px;
         }
    </style>
</head>
<body>
	<header>
    	<h1>Dette er starten på dokument innholdet</h1>
    	<nav></nav>
    </header>
    <main>
    	<p>Velkommen til Gokstad Akademiet</p>
    </main>
    <footer>
    	<p>Dette er slutten av dokumentet</p>
    </footer>
</body>
</html>

EXTERNAL CSS

Skrives i et eget CSS dokument som er koblet sammen med HTML dokumentet.
Metoden som dere skal benytte framover.


html {
  background-color: red;
}

body {
  padding: 10px;
}

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
 </head>
<body>

</body>
</html>

Fordelene med EXTERNAL CSS

Lettere å holde det ryddig og oversiktlig ved store prosjekter
Koden kan komprimeres
Man kan benytte verktøy slik som SASS
SASS benyttes for å skrive enda mer kompliserte css koder

OPPGAVE

Vi lager et external CSS dokument sammen

CSS SYNTAX / SELEKTORER

Selector = forteller hvilket HTML element vi vil style.
Declaration = forteller hvilken type styling som skal bli lagt til HTML elementet, kan være en eller flere.
Property = vi velger hva slags styling vi vil bruke deretter legger på en value som samsvarer med propertien.

For hvert element vi ønsker å legge på ny styling, så åpner vi en ny square bracket til den valgte HTML koden.

Live koding

Vi tar for oss hvordan vi i praksis skriver CSS koder

CSS spesifisitet

Hvis vi har flere like tagger i HTML koden, gir vi dem navn for å skille de fra hverandre
Class=""
Benyttes for å gi et navn til en tagg, kan også brukes for å gi det samme navnet til flere elementer.
id=""
Benyttes for å gi et unikt navn til en tagg, og har en høyere prioritet.

<h1 class="purple-headline"> Dette er en lilla overskrift </h1>

<h1 class="purple-headline"> Dette er også lilla overskrift </h1>

<h1 id="red-headline"> Dette er en rød overskrift </h1>

/* Element / tag navnet */
h1{
	color: purple;
}

/* class navn */
.purple-headline{
	color: purple;
}

/* id navn */
#red-headline{
	color: red;
}

For å kunne style navnene, så må vi benytte denne metoden.

OBS: Benytt først og fremst class names,

unngå mye bruk av ID

OPPGAVE

Koble sammen et html dokument og et css dokument.
Prøv dere fram å herm etter denne tegningen.

Hint: Dere må benytte klassenavn.
Dette er kun for trening, ikke et krav at det blir 100% likt

Oppgave

• The Colour Run har ansatt deg til å lage en nettside som viser fram deres årlige løp.

• Løpene gjennomføres i Bergen, Oslo, Stavanger og Trondheim.

• Billettene koster 350kr pr person.

• Lag en nettside som introduserer dette løpet på en spennende og oversiktlig måte Bruk pixabay.com for bilder