Les 2 — CSS: Basis

Voorbereiding

Wat is CSS?

In de volgende les gaan we bezig met de basis van CSS.

Je leert in de voorbereiding:

  • Wat is CSS?
  • Hoe schrijf je CSS voor HTML?
  • Selectoren
  • Eigenschappen (properties) en waarden (values)

📖 Opdracht 1: Lezen en vragen beantwoorden (~60 min.)

👷🏼 Beantwoord de volgende vragen

  1. Wat is in CSS een selector?
  2. Wat is in CSS een property?
  3. Wat is denk je de handigste manier om je CSS-broncode te schrijven?
    • In het style-attribuut?
    • In het <style>-element?
    • In een losse stylesheet?
    • Beargumenteer waarom je dat vindt.
  4. Wat is het verschil tussen de eenheid em en de rem?

👷🏼 Opdracht 2: Aan de slag met stijlen en stylesheets (~30 min.)

Verander de stijlen in het Appeltaartrecept dat je gestart bent in les 1:

  1. Voeg een nieuwe stylesheet toe (bijvoorbeeld css/style.css).
  2. Link de stylesheet aan het HTML-bestand (met de link tag).
  3. Bij een paragraaf: het font (font-family).
  4. Bij de koppen: de tekstkleur (color).
  5. Bij de links: de tekstkleur als je 'hovert' (a:hover { color:...})
  6. Geef de achtergrond van de pagina een kleur.
  7. Bedenk zelf nog drie stijlelementen die je wilt toevoegen (bijvoorbeeld text-shadow of zoiets)

Open je ‘DevTools’ (rechtermuisknop op element -> ‘Element inspecteren’/‘Inspect’) en kijk of je de CSS-regels uit en aan kan zetten.

Bonus: Een CSS-selector spelletje

Als je graag wil oefenen met het gebruiken van CSS-selectoren kun je op: flukeout.github.io een geinig spelletje spelen wat je daarin traint.

Lesprogramma

Doelen

Je leert:

  • Een HTML-document vormgeven met behulp van CSS.
  • Het verschil tussen een losse stylesheet en inline style.
  • CSS-selectoren gebruiken.
  • Tekst opmaken voor verschillende staten van een hyperlink (o.a. met de pseudo-selectoren :visited en :hover)
  • Hoe je elementen opmaak kan geven door declarations toe te voegen in CSS.
  • Achtergronden opmaken.

👩🏻‍🏫 Theorie

  • Behandeling van vragen uit de voorbereiding (~20 min.)
  • Behandeling van nieuwe CSS-onderwerpen en demo’s:
    • Normalize of reset.css (H. 8: De ingebouwde stijlen aanpassen)
    • Specificity (H. 8: Elementen benaderen en Elementnaam, klasse of beide?)
    • Combinaties van selectoren (H. 8: Combinatieselectors...)
    • Boxmodel (H. 9: Het boxmodel) (padding, margin, border, content)
    • overflow (H. 9: Overlopende inhoud: overflow)
    • visibility (H. 9: Inhoud (niet) weergeven: visibility)

👷🏼 Opdracht 1: Nog meer stappen in CSS bij de appeltaart-pagina (recept-voor-taart.html)

Je ziet nu het effect van normalize.css. Het is vanaf nu de bedoeling dat het er altijd in zit.

  • Download normalize.css.
  • Voeg nu de normalize.css toe.
  • Maak in de stylesheet van de voorbereiding nu de achtergrond een andere kleur dan wit met de CSS property: background.
  • Geef een paragraaf een andere achtergrond kleur dan wit.
  • Speel met de padding om te kijken wat er verandert.

👷🏼 Opdracht 2: Hyperlinks opmaken

Hyperlinks hebben een speciale status. Met de standaardopmaak van de browser zijn ze over het algemeen:

  • blauw als ze nog niet bezocht zijn en
  • paars als ze bezocht zijn
  • met stippels omlijnt als ze geselecteerd of ‘active’ zijn.
  • onderstreept

We gaan dat nu aanpassen door de eigenschappen te veranderen van a-elementen.

  1. Zorg dat er minimaal één link staat in je appeltaart-recept (bijvoorbeeld naar de bron van het recept, de bron van je afbeelding(en) of naar een winkel waar je de ingrediënten kunt kopen)
  2. Pas de kleur aan voor een a.
  3. Pas de kleur aan voor a:hover.
  4. Pas de kleur aan voor a:visited.
  5. Pas de text-decoration aan om iets anders te krijgen dan het lijntje onder de tekst.

👩‍🎓👷🏼 Opdracht 2a: Andere lettertypes gebruiken [optioneel]

  1. Zoek een font op bij een font provider (bijvoorbeeld: Google Fonts).
  2. Voeg deze toe bij een onderdeel op de volgende pagina:
<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Les 3: CSS-basis</title>
  </head>
  <body>
    <header><h1>Mijn eigen filmpagina</h1></header>
    <main>
      <ul>
        <li class="favourite"><a href="https://npostart.nl">NPO</a></li>
        <li><a href="https://disneyplus.com">Disney+</a></li>
      </ul>
      <aside>
        <h1>Favoriete film</h1>
        <p>
          Mijn favoriete film is Bio-Dome.
          Er is diepgang in de vriendschap en Pauly Shore verdient een Oscar.
        </p>
      </aside>
    </main>
    <footer>&copy; WebTech</footer>
  </body>
</html>
  1. Verander nu de dikte van de tekst naar een weight van 900.
  2. Als de font niet goed is gelinkt dan moet er een fallback-font zijn. Voeg een goed fallback font toe aan de font-family.

Als er geen passende fallbacks zijn dien je nog het type toe te voegen, dan probeert de browser dat te doen. Dus bijvoorbeeld voor Helvetica wordt vaak Arial als fallback gebruikt als de gebruiker deze niet lokaal geïnstalleerd heeft. Als Arial dan niet beschikbaar is dan kun je het algemener beschrijven met: sans-serif.

  1. Ga na wat voor type font je hebt: serif (met schreef), sans serif (zonder schreef), monospace etc.
  2. Voeg het goede type toe als fallback-font in de font-family.
  3. Geef nu de list-item met de class favourite schuingedrukte tekst.
  4. Als laatste geef je de Header onderstreepte tekst.

👷🏼 Opdracht 3: Spelen met kleurwaarden en achtergronden

In het bovenstaande voorbeeld van opdracht 1 ga je nu de achtergronden veranderen.

  1. Verander de achtergrond van een van je HTML-tags (bijvoorbeeld een van je headers) naar een kleur met een beetje transparantie (met bijvoorbeeld rgba() zie p. 428 van het boek).
  2. Geef de body nu een herhalende achtergrond. Bijvoorbeeld deze van Tomislava Babić.
  3. Geef nu een tweede achtergrond mee (een plaatje of bijvoorbeeld een linear-gradient) en voeg een background-blend-mode toe, bijvoorbeeld: background-blend-mode: difference, color;.
  4. Voeg als laatste bij de aside een border-radius mee om ronde hoeken te krijgen.

👷🏼 Opdracht 4: Maak een voorpagina in HTML/CSS voor de recepten (~60 min.)

  1. Maak een nieuw project aan in je Opdrachten Repo waarin je 2 pagina's hebt: index.html, appeltaart.html
  2. Verzin een goede titel voor je receptenwebsite
  3. Geef op de index.html een korte introductie over het doel van de receptenpagina.
  4. Maak in de index.html een overzicht van nog meer recepten:
    • Appeltaart
    • Worteltaart
    • Chocoladekoekjes
  5. Zorg ervoor dat de indeling klopt (main, header) elementen
  6. Maak een footer met daarin contactinformatie
  7. Maak een stylesheet met een kleurstelling met genoeg contrast (voor inspiratie ga naar een kleurengenerator)
  8. Check even of je de goede projectstructuur hanteert.
  9. Neem voor de appeltaart.html pagina de html uit de vorige opdracht over.
  10. Vul nu tenminste nog 1 extra pagina met een recept, bijvoorbeeld: worteltaart.html.
  11. Zorg ervoor dat je in een menu van de ene pagina naar de andere kan navigeren.
  12. Zorg er nu voor dat beide pagina's gebruik maken van dezelfde stylesheet.
  13. Bekijk nu nog eens de accessibility door gebruik te maken van de inspector. (zie les 1).
  14. Voer 2 verbeteringen uit.
  15. Commit and push je werk weer naar github.

👩🏻‍💻 📖 Opdracht 5: Maak de voorbereiding van Les 3

Zie voorbereiding les 3