nz

Neuseelandreise HOWTO (Teil 2)

CSS Layout, Font Awesome & Google Fonts

a) erste Versuche mit dem style-Attribut und <style>-Element

Wie können wir die Seite stylen? Es gibt mehrere Möglichkeiten

Möglichkeit 1: das style-Attribut
- wir versuchen es und spielen mit der <h1>-Überschrift
```
  <h1 style="color:green">
```
- zur Syntax:
  - style ist das HTML-Attribut
  - color:green ist eine sogenannte CSS Deklaration (declaration) bestehend aus
    - der Eigenschaft (property) links
    - einem Doppelpunkt als Trenner und
    - dem Wert (value) rechts
  - weitere Stile / Deklarationen werden durch Semikolon getrennt (z.B. color:green;font-size:40px;)
- wir verlängern das style-Attribut 🔗 COMMIT
```
  <h1 style="color:green;font-size:40px;border:3px dashed black;background-color:blue;width:50%">Neuseelandreise</h1>
```
- was bedeuten die Deklarationen?
  - color:green: Farbe grün
  - font-size:40px: Schriftgröße 40 Pixel
  - border: 3px dashed black: schwarz-strichlierter Ramen mit 3 Pixel Rahmenbreite
  - background-color:blue: Hintergrundfarbe blau
  - width:50%: Breite 50%
- Tooltips im VS Code geben wieder Hilfestellung und führen zur MDN-Hilfe
Möglichkeit 2: das <style>-Element
- wir verschieben jetzt den Inhalt des style-Attributs in ein <style>-Element
- das <style>-Element gehört in den <head>-Bereich
- dort erstellen wir eine sogenannte CSS-Regel (ruleset)
```
  h1 {

  }
```
  - h1 ist der “CSS-Selektor” (selector)
  - die geschwungenen Klammern umschließen die “CSS-Deklarationen” (declarations)
- und dorthin verschieben wir den Inhalt unseres style-Attributs und löschen das style-Attribut 🔗 COMMIT
```
  <style>
      h1 {
          color: yellow;
          font-size: 40px;
          border: 3px dashed black;
          background-color: blue;
          width: 50%
      }
  </style>
```
- optisch ändert sich nichts
- wir könnten jetzt statt h1, auch h2 stylen
```
  h2 {
      /* Stile wie gehabt */
  }
```
- oder beide zugleich
```
  h1, h2 {
      /* Stile wie gehabt */
  }
```
- oder die Absätze gleich dazu
```
  h1, h2, p {
      /* Stile wie gehabt */
  }
```
- Sidestep: Kommentare in CSS
  
  mit /* ... */ kann man im CSS Kommentare (auch mehrzeilig) schreiben
- die dritte und beste Möglichkeit ist ein verlinktes, externes Stylesheet

b) Ein verlinktes externes Stylesheet main.css

noch eleganter ist die Trennung von Content und Layout
mit dem Baustein link erzeugen wir im <head-Bereich einen Link auf ein externes Stylesheet
```
  <link rel="stylesheet" href="main.css"> 
```
mit STRG+Klick erzeugt VS Code main.css für uns 🔗 COMMIT

wir verschieben den Inhalt von <style> dort hin, löschen das <style>-Element und verwenden Beautify in main.css 🔗 COMMIT

  h1 {
      color: red;
      font-size: 40px;
      border: 3px dashed black;
      background-color: blue;
      width: 50%
  }

in main.css werden wir ab jetzt das Seitenlayout der Etappe definieren
wir löschen alle Einträge in main.css und beginnen von vorne 🔗 COMMIT

c) Layout der Etappe

Seitenhintergrund auf Hellgrau setzen 🔗 COMMIT

  body {
      background-color: silver;
  }

<main>-Bereich auf Weiß setzen 🔗 COMMIT

  main {
      background-color: white;
  }

maximale Seitenbreite auf 1024 Pixel setzen 🔗 COMMIT

  main {
      /* bestehende Stile */
      max-width: 1024px;
  }

Seite zentrieren 🔗 COMMIT

  main {
      /* bestehende Stile */
      margin: auto;
  }

der Artikelinhalt klebt am Rand - Abstände einführen 🔗 COMMIT
```
  article {
      padding: 1em;    
  }
```
- em bestimmt die Abstände in Abhängigkeit der Schriftgröße - siehe Wikipedia:em (Schriftsatz)
Absätze im Artikel als Blocksatz 🔗 COMMIT
```
  article p {
      text-align: justify;
  }
```
- Selektoren können auch mit Leerzeichen getrennt geschrieben werden
- Wichtig: das heißt dann: alle p-Element innerhalb des article-Elements

Zeilenhöhe gleich noch etwas vergrößern 🔗 COMMIT

  article p {
      /* bestehende Stile */
      line-height: 1.2em;
  }

die Links im Artikel färben wir schwarz 🔗 COMMIT
```
  a {
      color: black;
  }
```
- bei Links könnte man auch verschiedene “Stadien” stylen mit sogenannten “Pseudoklassen”
  - a:link - noch nicht besuchte Links
  - a:visited - besuchte Links
  - a:hover - beim Überfahren des Links mit der Maus
- :hover kann man auch für andere Element verwenden
das Userbild im Header zentrieren wir über einen Trick: wir setzen den ganzen Headerbereich auf zentriert 🔗 COMMIT
```
  header {
      text-align: center;
  }
```
wir stylen das Userbild und machen es zum Kreis
- HMMM, wie sprechen wir es an?
- über ein class-Attribut beim <img-Element in index.html
```
  <a href="https://github.com/webmapping"><img class="user" src="images/user.jpg" alt="Another one rides the bus"></a>
```
- und einen Klassenselektor in main.css
  - Klassenselektoren beginnen mit einem Punkt und dann dem Namen der Klassen
  - in unserem Fall steht der Klassenselektor direkt nach dem img-Selektor was soviel heißt wie: alle Bilder mit der Klasse user
  - die Rundung des Bildes erzeugen wir über den border-radius
```
  img.user {
      border-radius: 50%;
  }
```
  🔗 COMMIT

wir schieben das Bild um die halbe Bildbreite nach Oben in das Banner hinein 🔗 COMMIT

  img.user {
      /* bestehende Stile */
      margin-top: -50px;
  }

der Footer kann auch noch besser aussehen
- wir grenzen ihn Oben mit einer Linie ab 🔗 COMMIT
```
  footer {
      border-top: 1px solid black;
  }
```
- und ändern die Abstände 🔗 COMMIT
```
  footer {
      /* bestehende Stile */
      padding: 1em 2em 3em 2em;
  }
```
- die Werte beim Padding repräsentieren oben, rechts, unten, links
die Navigationslinks verteilen wir links/rechts, dazu brauchen wir
- zwei Klassen im HTML
```
  <a class="back" href="https://paulasp3.github.io/nz/index.html">🡨 vorhergehende Etappe</a>
  <a class="next" href="https://andrea-1408.github.io/nz/index.html">nächste Etappe 🡪</a>
```
- zwei Klassenselektoren im CSS
```
  footer .back {
      float: left;
  }

  footer .next {
      float: right;
  }
```
  - das Verteilen erledigt float für uns
  - im Gegensatz zum Userbild img.user, sind die Klassen .back und .next durch ein Leerzeichen vom footer-Selektor getrennt, was soviel heißt wie: alle Elemente mit der Klasse .back oder .next im <footer>-Bereich
- 🔗 COMMIT

d) Layout “responsive” machen

Unsere Seite sieht schon gut aus, aber wie sieht sie am Handy aus? Der Browser hilft uns dabei mit Extras / Browser Werkzeuge / Bildschirmgrößen testen

beim Headerbild und dem Bild der Attraktion gibt es noch etwas zu tun
wenn wir die Breite der beiden Bilder auf 100% setzen, werden sie automatisch angepasst

beim Headerbild brauchen wir wieder

eine Klasse in index.html, sonnst können wir es nicht ansprechen

  <img class="banner" src="images/header.jpg" alt="Straße im Vordergrund mit dem Vulkankegel im Hintergrund">

und die entsprechende Regel in in main.css

  img.banner {
      width: 100%;
  }

🔗 COMMIT

die Attraktion können wir ohne Klasse ansprechen, da sie in das <article>-Element und <figure>-Element eingebettet ist
```
  article figure img {
      width: 100%;
  }
```
- article figure img sucht damit alle <img>-Elemente eines <article>-Elements, die in einem <figure>-Element vorkommen
- 🔗 COMMIT
drei kleine Verbesserungen machen wir noch
- den Seitenhintergrund etwas aufhellen
```
  body {
      background-color: #eeeeee;
  }
```
  🔗 COMMIT
- und ein Format für einen Schatten definieren
```
  .shadow {
      box-shadow:
          0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.2);
  }
```
  🔗 COMMIT
  - Woher kommt die komplizierte Syntax des Schattens?
    - von der Seite “W3Schools CSS Box Shadow”
    - Google Suche “CSS Shadow Effects - W3Schools”
    - https://www.w3schools.com/css/css3_shadows_box.asp (siehe “Cards”)
  - anwenden können wir den Schatten über beliebige class-Attribute in index.html
    <main class="shadow">
    <img class="user shadow" src="images/user.jpg" alt="Another one rides the bus"></a>
    - 🔗 COMMIT
- schließlich ändern wir den Anzeige-Font der Seite 🔗 COMMIT
```
  body {
      /* bestehende Stile */
      font-family: Verdana, Arial, Helvetica, sans-serif;
  }
```
  - der Browser sucht die Komma-getrennten Fonts von Links nach Rechts
  - der erste verfügbare Font wird angezeigt

e) Icons mit Font Awesome

Font Awesome (https://fontawesome.com/) ist eine Icon-Bibliothek mit Hunderten von Webicons die wir in unseren Applikationen verwenden können. Um sie zu verwenden, müssen wir das Stylesheet der Bibliothek verlinken und können dann über Klassenattribute bei <i>-Elementen die einzelnen Icons einbauen.

der Einbau des Stylesheets im <-head>-Bereich von index.html erfolgt über ein sogenanntes CDN (Content delivery network). Es gibt viele solche CDNs, wir verwenden https://cdnjs.com
- die Suche dort nach font-awesome bringt uns zu https://cdnjs.com/libraries/font-awesome
- wir kopieren den Link-Tag (das mittlere der beiden Icons) von all.min.css und bauen ihn im <head>-Bereich von index.html ein
```
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
```
  - die Attribute integrity, crossorigin, referrerpolicy habe etwas mit der sicherheit beim Laden der Bibliothek zu tun, mehr dazu später
die Icons finden wir unter https://fontawesome.com/icons
- die Suche nach camera bringt uns ein camera-retro-Icon, dessen Code zum Einbauen wir direkt kopieren und an der passenden Stelle der HTML-Seite einsetzen können
```
      <figcaption><i class="fa-solid fa-camera-retro"></i> Blick auf die Emerald Lakes ...</figcaption>
```
- das Selbe machen wir mit den Pfeilen der Navigation (Suche circle arrow)
```
  <i class="fa-solid fa-circle-arrow-left"></i> vorhergehende Etappe
```
```
  nächste Etappe <i class="fa-solid fa-circle-arrow-right"></i><
```
- 🔗 COMMIT

f) Webfonts mit Google Fonts

Google Fonts ist ein interaktives Verzeichnis von über 1000 Schriftarten, die wir als Webfonts in unseren Applikationen direkt verwenden können. Die Auswahl der gewünschten Fonts erfolgt bequem auf https://fonts.google.com/ durch Klick auf den gewünschten Font und Auswahl der Font-Varianten. Dabei können mehrere Fonts, bzw. Varianten ausgewählt werden und als sogenannte @import-Rule im CSS-Stylesheet main.css eingetragen werden

Vorgang dabei:
- Font auswählen (z.B. Open Sans)
- die font-Variante wählen: +Select this style (z.B. Regular 400 und Regular 400 italic)
- gerne auch weiter Schriftarten auswählen, wie Roboto mit Light 300
- zum Schluss im Tab Selected family unter Use on the web @import auswählen
- und den Inhalt des <style>-Elements an den Anfang von main.css kopieren
```
  /* Google Fonts laden */
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&family=Roboto:wght@300&display=swap');
```
- die Anwendung im Stylesheet wird unter CSS rules to specify families gleich angezeigt
- wir Stylen die Seite mit Open Sans
```
  body {
      /* bestehende Stile */
      font-family: 'Open Sans', sans-serif;
  }
```
- und die Absätze mit Roboto
```
  main p {
      font-family: 'Roboto', sans-serif;
  }
```
- 🔗 COMMIT
- für die Überschriften wählen wir dann noch Montserat (Light 300) und ersetzen die @import-Anweisung mit
```
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Open+Sans:ital@0;1&family=Roboto:wght@300&display=swap');
```
- mit dieser CSS-Regel wenden wir den neuen Font auf alle <h1>-, <h2>- und <h3>-Elemente an
```
  h1, h2, h3 {
      font-family: 'Montserrat', sans-serif;
  }
```
- 🔗 COMMIT