Opgaver

Vi starter med W3Schools. Lige som der findes en hel sektion med “Learn HTML”, så findes der en tilsvarende “Learn CSS”.

29.1 Start med styling

• Gå ind på forsiden til https://www.w3schools.com/css/default.asp og klik på “Try it yourself”. Du skulle gerne se nedenstående

• Ret nedenstående og fortæl, hvad der sker
  • Under body ret egenskaben”background-color” fra “lightblue” til “pink”
  • Under h1 ret egenskaben”color” fra “white” til “brown;”
  • Under h1 ret egenskaben “text-align” fra “center” til “right” og bagefter til “left”
  • Under p og “font-family” ret egenskaben fra “verdana” til “times new roman”
  • Under p og “font-size” ret egenskaben fra “20px” til “40px”
• Gå ind på https://www.w3schools.com/css/css_colors.asp. Her ser du en masse farver. Prøv dem af, så du f.eks. bruger farven “orange” som background-color
• Bonusopgave. Du kan angive farver som hex-værdier: color: #ff0000; er f.eks. det samme som farven rød. Inde på https://www.w3schools.com/html/html_colors.asp lidt ned i venste side finder du en color picker (1) som vist herunder. Vælg en par farver og prøv dem af.

29.2 Sæt farver på Balders hjemmeside

Kan du huske hjemmesiden om hunden Balder fra modul 27? Nu er det tid til styling af siden.

• Åben linket her i Web Lab https://studio.code.org/projects/weblab/GxKlVjloEOjkAorexaZhPxUrZyLPhEsGs68ju-Bofx4/edit og lav en kopi
• I sitet åben filen style.css (1). Koden ser således ud (2)

• Lav følgende ændringer og observer, hvad der sker med siden
  • Under body ret background fra “white” til “lightblue” (eller en anden farve, som du synes om, brug gerne farve fra https://www.w3schools.com/css/css_colors.asp)
  • Under p ret color fra “black” til “red”
  • Under h1 lige under font-weight: bold; tilføj nedenstående kode, så koden for h1 ligner nedenstående. Hvad gør koden?

 h1 {
  font-weight: bold;
  font-size: 80px;
  color: red;
  font-family: calibri;
 }

• Prøv at rette “font-family: calibri;” til “font-family: verdana;” og bagefter til “font-family: times new roman;” Hvad sker der?
• Kik på side 2. Slår ændringerne også igennem der?
• Bonusopgave: Du vil nu gerne centrere overskriften <h1> på siden frem for at venstrestille den. Gå ind i Web Lab under Web Lab Documentation, og skrol forbi HTML dokumentationen ned til CSS dokumentationen. Find ud af hvordan ved at gå ind under punktet “Text align”

29.3 Leg med styling hos W3Schools

Gå ind og prøv lidt styling af på W3schools. Brug “Try it yourself” og se, hvad der sker. Vi gør det evt. sammen.

• Højre- og venstrestille tekst og billeder: https://www.w3schools.com/css/css_align.asp
• Styling af tabeller: https://www.w3schools.com/css/css_table.asp

Bonusopgaver:

• Styling af link: https://www.w3schools.com/css/css_link.asp
• Brug af klasser https://www.w3schools.com/css/css_selectors.asp

29.4 Styling af et site

Følg videoen og lav styling. Kode til den kode, der arbejdes med, er her https://studio.code.org/projects/weblab/EjL_n_mRsCWqi-MsQc81sBQ73dhOOtc06BBKRm-V818/edit

Bemærk: Styling af link og klasser sidst i videoen er bonusopgaver!

29.5 Styling af dit eget site

Opgaven er simpel: Gå ind på det site, du lavede sidst, og som er dit eget. Lav styling. Som minimum skal du style baggrundsfarven og lave andre farver på skriften. Vær kreativ og leg med mulighederne.

Bonusopgave: Anvend klasser, se dokumentationen her: https://bliv-klogere.ibc.dk/index.php/laerebog-til-del-5-hjemmesider-kapitel-15-17/#166_CSS_selectors_og_klasser

29.6 Bonusopgaver

Kik på opgave 30.1 og evt. 30.2 om klasser og anvend dem til styling af dit site.