Modul 26. CSS

Forberedelse

  • Læs kapitel 17 om CSS

Formål

  • Lære om CSS

Fælles gennemgang

Fra sidst

Head og body i html

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

W3schools er naturligvis velforsynet med guides til CSS:

Øvelser

VIGTIGT: Alle opgaver skal laves i Repl.it

26.1 Styling i Rebl

  • Lav en ny repl og kald den CSS styling
  • Lav noget <h1> og noget <p> kode inde i din index.html fil, nærmere bestemt i <body> delen. F.eks det her tekst:
<h1>De Hviiiii</h1>
<p>DeHviiii spiller i smukke hviiiiiie trøjer og er et fantastisk fodboldhold. Næste år vinder de Champions League (håber jeg).</p>
  • Koden nedenfor sætter du ind i CSS-filen styles.css
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

26.2 Mere styling i Rebl

Find en af dine Rebls, hvor der er en tabel. Alternativt sæt nedenstående kode ind i index.html fra før. Husk at den skal være i <body>-delen.

 <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

I din CSS prøv at sætte koden her ind. 

table{
  border: solid green 6px;
}
  • Vigtigt: Du skal have et CSS dokument , typisk styles.css, og der skal være et link fra din HTML-fil til CSS filen.
  • Du kan tjekke det ved at se, om din fil har følgende kode i <head>-delen
<link href="style.css" rel="stylesheet" type="text/css" />
  • Hvad skete der med tabellen eller rettere: Alle tabellerne
  • I stedet for “solid” skriv “dotted”. I stedet for “green” skriv “orange” og i stedet for “6px” skriv “3px”. Hvad skete der
  • Prøv at sætte koden her ind i din CSS-fil og se, hvad der sker med dine billeder

26.3 Styling af et billede

  • Upload et billede, hvis du ikke har et i forvejen, og sæt det ind i et html dokument
  • Sæt nedenstående kode ind i dit CSS dokument

img{border: solid green 6px;}

26.4 Styling på dit site

Du skal nu style på det site, du lavede sidst. Minimumskrav:

  • Baggrundsfarven må ikke være hvid
  • Ingen skrift må være sort
  • Der skal være kant på enten billeder og/eller tabeller

Så er der det, som du kan prøve af, hvis du har lyst. Det behøves ikke at være kønt, bare du prøver. Alle link herunder finder du på https://www.w3schools.com/css/default.asp

Giv den gas. Prøv tingene af!