Lektion 25. CSS

Forberedelse

  • Læs kapitel 17 og se den tilhørende video

Formål

  • Introduktion til CSS
  • Hvad er CSS
  • Hvad kan vi bruge det til
  • Hvordan fungerer sproget
  • Hvad er et eksternt stylesheet og hvorfor er det mere professionelt

Fælles gennemgang

Fra sidst

Lektien til denne gang

  • CSS = styling.
  • Kronprinsesse Mary er tidligere kåret som en af verdens mest velklædte kvinder. Lige som CSS beskæftiger hendes stylist beskæftiger sig kun med, hvordan Mary ser ud, ikke med, hvad Marys “indhold” er.
     
Kronprinsesse Mary på besøg på Høng Efterskole
  • Vigtigt: Slut af med at vise mappestrukturen som i lektion 24

Øvelser

25.1 Vigtigt: opgave 25.1 laver vi fælles på klassen. Repetition

  • Forklar, hvordan en typisk mappestruktur til et site ser ud
  • Hvad gør vi bedst med billeder på et site
  • Hvis vi laver et eksterne stylesheet, f.eks. mystyles.css, hvor (i hvilken mappe) skal filen så ligge
  • Hvis du lægger den i en mappe, der hedder “styles”, hvordan skal referencen øverst på hver side til stylesheetet så se ud. Tip: Start med <link rel=”stylesheet” ….

25.2 Inline CSS, dvs. CSS på det enkelte tag

  • Lav et nyt, tomt html dokument i Visual Studio Code
  • Gem dokumentet som opgave25-2.html
  • Indsæt koden nedenfor
  • Gem dokumentet og test det i en browser
     
<!DOCTYPE html>
<html>
<head>
<title>Farver</title>
</head>
<body style = "background-color: lightgreen">

<h1 style="color: #ffcc00;">CSS styling</h1> 
<p>Test med farver</p> 
<h2 style = "color: darkblue">CSS styling</h2> 
<p>Mere test med farver</p> 

</body>
</html>
  • Kik https://www.w3schools.com/css/css_colors.asp igennem, her kan du se nogle farver
    • Prøv tingene af og sæt nye farver i din kode. Bemærk, at du både kan bruge en 6-cifret kode til farver f.eks. #ffcc00 og navne f.eks. “darkblue”.
    • Som vi alle ved, er gult grimt især inden for fodbold. Så lav om på farven til h1-tagget, gør den f.eks. rød
    • Smuk komposition: Prøv f.eks. at sætte body background color til “darkblue” og tags’ne <h1> og <h2>  til farven #ffffff. Så får du en smuk komposition som ligner farverne til verdens bedste fodboldhold (AGF).
    • Lille ekstra opgave: Prøv, om du også kan få tagget <p> til at være hvidt
    • Gå den anden vej: Lav dine farver så grimme som muligt, bryd alle regler omkring kontrastfarver og gør det så ulæseligt som muligt :-).

25.3 Internt CSS, CSS i <head>

  • Lav et nyt, tomt html dokument i Visual Studio Code
  • Gem dokumentet som opgave25-3.html
  • Indsæt koden nedenfor
  • Gem dokumentet
<html>
<head>
<title>Test med CSS</title>
<!– fjern denne kode og erstat den med CSS-koden –>
</head>
<body>
<h1>CSS styling</h1>
<p>Test med farver</p>
<h2>CSS styling</h2>
<p>Mere test med farver</p>
</body>
</html>

Denne gang skal du ikke style på tagget, men i stedet style i <head>. Se https://www.w3schools.com/css/css_howto.asp.

  • Sæt derfor følgende kode ind i <head>
<style>
body {  
background-color: linen;
}
p {  
color: red;  
font-family: verdana;  
font-size: 20px;
}
</style>    
  • Hvad skete der, blev begge <p> tags stylet?
  • Hvad er nemmest: At style i toppen under <head> eller at style på hvert enkelt tag som i opgave 25-2

25.4 Eksternt styleshee

Følg videoen her i forhold til at lave et eksternt stylesheet: Alle dine HTML filer skal anvende det eksterne stylesheet.

Du kan bruge koden her til dit eksterne stylesheet

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Når du er færdig med videoen, så løs følgende

  • Giv sitet en anden baggrundsfarve
  • Prøv, om du kan style billederne til en bredde på 100%. Tip: Brug tagget <img> til at style

Vigtigt: Hvis du er færdig med opgave 25.5 også, så tilføj et par .html sider mere og få dit stylesheet til at virke på de nye html sider også. Hvis du får dit stylesheet til at virke + kan linke mellem siderne + kan sætte billeder, tabeller og video ind, så kan du faktisk kode dit eget site.

25.5 Hvad fungerer bedst?

Du er nu præsenteret for 3 måder at style på. På tagget, i <head> dvs. internt og i en fil for sig, dvs. eksternt.

Generelt: Hvilken metode tror du, at der er mest udbredt til styling? Begrund dit svar

  • Inline CSS, dvs. styling på tagget
  • Intern styling <head>
  • Ekstern stylesheet

Vil det ændre dit svar, når jeg afslører, at et site sagtens kan have flere hundrede html-sider tilknyttet?

Inden for kodning forfølger vi et paradigme, der hedder “separations of concerns” (adskil bekymringerne, dvs. adskil sprogene). Hvilken af de 3 metoder vil være bedst, hvis vi skal forfølge dette princip?

Bemærkede du, at jeg har lagt alle billeder i en mappe for sig, som hedder “images”? Kan man kalde det “separation of concerns”?

25.6 Ekstra opgave: Css box model

Nu med <div>, men prøv den af på <body> i første runde

25.7 Ekstra opgave: Styling af tekst

Den er lang, men lav bare de første par stykker, f.eks.