1. HTML vs. CSS
1.1. HTML = Grundlage
1.2. CSS = Formatierungssprache für HTML-, SVG- und XML-Dokumente
1.3. Trennung von Inhalt und Gestaltung
1.3.1. Vor allem wichtig:
1.3.1.1. man kann eine Style-Definition mehrfach verwenden
1.3.1.2. überall gleiches Aussehen
1.3.1.3. nur Änderung an einer Stelle notwendig
1.3.1.3.1. für einen ganzen Kurs
1.3.1.3.2. in einer CSS-Datei für mehrere Kurse
1.4. Box-Modell
1.4.1. Formatierungen werden angewendet auf Kasten, die ineinander gestapelt werden.
1.4.1.1. festgelegt durch einen Anfangs- und End-Tag, z.B. <p> ... </p> , <div> ...</div> oder <span> ... </span>
1.4.1.2. Beispiel: Innen- und Außenabstände
1.4.1.3. Verschaltete Boxen
1.5. Cascading =
1.5.1. Widersprüchliche Definitionen - welche Festlegung soll sich auswirken
1.5.1.1. Dieses Problem (der widersprüchlichen Definitionen) wird umgangen, indem die Kaskade für Regeln und Eigenschaften eine Gewichtung oder Spezifität errechnet, anhand derer die tatsächlich für ein Element geltenden Formate bestimmt werden.
1.5.1.2. Was baut auf etwas anderem auf?
1.5.1.3. man kann kein "Problem" umgehen mit "!important;"
2. Wo/Wie CSS anwenden?
2.1. Beim Bearbeiten von HTML im Editor
2.1.1. mit style-Option in jedem Tag möglich
2.1.1.1. "Überschreiben" der Eigenschaften der HTML-Tags
2.1.1.1.1. <h2>
2.1.1.1.2. <p>
2.1.1.1.3. <img>
2.1.1.2. div/span für unabhängige Formatierung
2.1.1.2.1. div
2.1.1.2.2. span
2.1.1.3. Beispiel: im <img ... xxx ...>-Tag style="box-shadow: 4.6px 9.1px 9.1px hsl(0deg 0% 0% / 0.36);"
2.1.2. Mit <style></style> im HTML-Code
2.1.2.1. Wird von Atto entfernt!
2.2. "externe" style-Definitionen
2.2.1. CSS-Datei
2.2.1.1. wird auf Server gespeichert
2.2.1.2. muss eingebunden werden, damit sie genutzt wird
2.2.2. moodle: <style></style> irgendwo auf der betrachteten Seite unterbringen
2.2.2.1. auf Kursseite in Textfeld
2.2.2.2. auf anderen Seiten in Block
2.2.2.2.1. mit CSS Block unten anzeigen lassen
2.2.2.3. <style>-Infomationen müssen für Benutzer sichtbar sein
2.2.2.3.1. Nebenbei: Mit CSS kann man auch SVG-Dateien manipulieren -> Bild kann verändert werden
2.2.2.4. Im Textfeld/Block könnte auch ein Hinweis auf eine CSS-Datei sein!!
2.3. Nutzung von (auch vorhandenen) Klassen
2.3.1. Klasse = Name für Kombination von Formatierungen
2.3.2. spezielle moodle-Klassen
2.3.3. Theme Boost basiert auf Bootstrap-Bibliothek
2.3.3.1. Online-Dokumentation zu Bootstrap Introduction
2.3.3.2. W3-Schools - Bootstrap Tutorial Bootstrap 3 Tutorial
2.3.3.3. Kleine Hilfsmittelchen schnell zu finden Bootstrap Cheat Sheets
2.4. Zusammenfassung:
2.4.1. Style-Informationen aus verschiedenen Quellen
2.4.1.1. im Tag
2.4.1.2. In <style></style> Bereich
2.4.1.3. CSS-Datei
2.4.1.4. Bootstrap-Klassen
3. Wie festlegen, was per <styles> verändert werden soll?
3.1. allgemeine HTML-Tag abändern
3.1.1. im HTML-Code:
3.1.1.1. nichts weiter machen, als die Tags wie üblich nutzen
3.1.1.2. style="..." im Tag einfügen
3.1.1.3. AUFGABEN:
3.1.1.3.1. 1.) Überschrift mit H2 anlegen und umformatieren
3.1.1.3.2. 2.) Bild einfügen und Schatten ergänzen
3.1.2. im <style>-Bereich in Textfeld
3.1.2.1. h1 {color:red;}
3.1.2.2. AUFGABEN:
3.1.2.2.1. Textfeld oder Block mit CSS-Styles anlegen
3.2. eigene Klassen festlegen und nutzen
3.2.1. ToDo im <style>-Bereich
3.2.1.1. .center { text-align: center; color: red; }
3.2.1.2. p.center { text-align: center; color: red; }
3.2.2. ToDo im HTML-Code
3.2.2.1. <h1 class="center"> ... </h1>
3.2.2.2. <p class="center"> ... </p>
3.2.3. AUFGABEN:
3.2.3.1. Texteditor umschalten
3.2.3.2. Textfeld anlegen und Klasse erstellen
3.2.3.3. Klasse nutzen
3.3. Editor Atto ausschalten
3.3.1. Profil -> Einstellungen -> Texteditor wählen -> unformatierter Text
3.3.2. Atto entfernt <style> </style>-Tags (beim Neuaufrufen einer Seite)
3.4. moodle-Klassen
3.4.1. ToDo im <style>-Bereich
3.4.1.1. wie bei eigenen Klassen
3.4.2. ToDo im HTML-Code
3.4.2.1. wie bei eigenen Klassen
3.4.3. Welche brauche ich?
3.4.3.1. mit F12 Entwickler-Tools anschalten
3.4.3.1.1. Element untersuchen
3.4.3.1.2. in Entwickler-Tools testen, ob sich etwas auswirkt
3.4.3.2. AUFGABEN:
3.4.3.2.1. Entwickler-Tools im Browser sichtbar machen
3.4.3.2.2. Klassen herausfinden für ...
3.5. id
3.5.1. Manche HTML-Elemente haben eine id-Nummer
3.5.2. im <style>-Bereich
3.5.2.1. #para1 { text-align: center; color: red; }
3.5.3. im HTML-Code
3.5.3.1. <p id="para1">Hello World!</p>
3.6. mehrere "Elemente" ansprechen
3.6.1. im <style>-Bereich
3.6.1.1. h1, h2, p { text-align: center; color: red; }
3.7. Quelle für Infos/CSS Möglichkeiten
3.7.1. W3-School
3.7.2. SelfHTML
3.7.3. ChatGPT fragen
4. Praktisches Vorgehen
4.1. in HTML-Ansicht
4.1.1. CSS-Code raussuchen
4.1.2. in HTML-Ansicht umschalten
4.1.2.1. Firefox zeigt HTML besser an als z.B. Chrome
4.1.3. Code einfügen
4.1.3.1. mit style="..." in einem Tag
4.1.3.2. ggf. Stelle in Visuellem Editor markieren, z.B. mit langer Zeichenfolge
4.1.4. ACHTUNG beim Löschen!
4.1.4.1. Wenn möglich NICHT in HTML-Ansicht löschen
4.1.4.2. Bereich markieren von ... bis ... der gelöscht werden soll mit langer Zeichenfolge
4.2. Mit <style> </style>-Tags arbeiten
4.2.1. je nach Anwendungsstelle
4.2.1.1. Textfeld anlegen
4.2.1.2. Einführungstext im Kurs nutzen
4.2.1.3. Text-Block anlegen
4.2.2. Styles/Formatierungen überlegen/kopieren
4.2.2.1. Code: <style> ... </style>
4.2.2.1.1. WICHTIG: unbedingt abschließen, weil sonst größeres Problem