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.
• Für jeden der folgenden CSS-Code Abschnitte machen Sie folgendes:
  • Fügen Sie den Code-Abschnitt der Datei style.css hinzu, speichern Sie, und laden die Datei(en) wieder auf den Server.
  • Laden Sie Ihre Seite neu und überprüfen Sie, ob die Änderungen Ihren Erwartungen entsprechen.

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 */
}

Für einige der Aufgaben werden Sie nicht darum herumkommen, nach Informationen im Internet zu suchen. Verwenden Sie dazu unbedingt auch den Suchterm css.

Um die Entwicklung zu Vereinfachen und zu Beschleunigen, installieren Sie die Visual Studio Code Extension «Live Server». Damit können Sie einen Webserver lokal auf Ihrem Computer starten, also Bonus wird die Seite automatisch neu geladen, sobald Sie eine Datei speichern.

Benutzen Sie auch die Entwicklertools F12. Damit können Sie direkt auf der Webseite CSS-Einträge manipulieren und verschiedene Dinge noch schneller testen. Vergessen Sie aber nicht, die Änderungen in die Datei style.css zu übertragen und die Datei zu speichern.

• Hinterlegen Sie alle Elemente der Klasse fake mit rotem Hintergrund.
  • Bonus: fake soll mit der Schrift Comic Sans dargestellt werden.
• Die Katzenbilder sollen einen hellen Hintergrund und einen Rahmen mit Schatten erhalten.
• Die Katzenbilder sollen alle gleich gross sein.
• Die News-Einträge sollen wie die Katzenbilder als Kacheln erscheinen.