Aber mit Style bitte

CSS steht für Cascade style sheet.

Mit CSS kann das Aussehen bestimmter Elemente und ihrer Unterelemente (cascade!) festgelegt werden.

• Laden Sie folgendes Archiv herunter style.zip und entpacken Sie es an einem geeigneten Ort.
• Stellen Sie sicher, dass nicht zwei verschachtelte Verzeichnisse style entstanden sind. Falls ja, korrigieren Sie.
• Öffnen Sie das entpackte Verzeichnis (Folder) style mit Visual Studio Code.
• Öffnen Sie in VSCode ein Terminal und navigieren Sie mit cd .. in darüberliegende Vezeichnis
• Kopieren Sie das Verzeichnis style mit allen Dateien mit scp -r style ofi:. Lassen Sie das Terminal offen!
• Öffnen Sie Ihre neue Webseite im Browser
• Studieren Sie den HTML-Code und finden Sie die entsprechenden Element auf der Seite.
• Studieren Sie die Datei style.css, ändern Sie diese geringfügig und laden Sie Ihre Seite nochmals hoch (Pfeiltaste nach oben holt das letzte Kommando).
  • Hatten Ihre Änderungen die gewünschte Wirkung? Eventuell müssen Sie die Seite mit Ctrl-Shift-R (oder shift-Klick) neu laden.

Elemente könne mit verschiedenen Selektoren ausgewählt werden.

/* Kommentare zwischen Slash Stern und Stern Slash */
h1 {  /* alle Übertitel <h1>...</h1> */
   color: white;          /* Textfarbe als Farbname */
   background: #002244;   /* Farbe als Hex-Code */
}

.wichtig {  /* Alle Elemente mit dem Attribut class="wichtig", z.B. <div class="wichtig">...</div> */
    font-weight: bold;  /* Fette Schrift */
}

#catpics {  /* Das (einzige!) Element mit id="catpics" */
    border-radius: 5px;           /* Abgerundeter Rand */
    border-style:solid;           /* Durchgezogener Rand */
    border-width: 2px;            /* 2 Pixel breiter Rand */
    background-color:orange;
    margin:20px;                  /* 20px Platz ausserhalb vom Element */
    padding:10px;                 /* 10px Platz innerhalb vom Element */
}

#catpics > div { /* Alle Div-Elemente, die direkt innerhalb des Elements mit id="catpics" sind. Aber nicht verschachtelte Unterlemente */
    display:flex;                      /* Flexible Anordnung der Element innerhalb */
    align-items: center;               /* Elemente innherhalb vertikal zentrieren */
    justify-content: space-evenly;     /* Elemente horizontal gleich verteilen */
    flex-wrap: wrap;                   /* "Zeilenumbruch", wenn zu viele Elemente */
}