Grundlagen der CSS-Formatierung
WO können CSS-Formatierungen abgespeichert werden?
a) direkt beim einzelnen Tag (zB <h1 style="...">): INLINE (= in der Zeile)
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Formate_direkt_in_einem_style-Attribut_festlegen oder
https://www.w3schools.com/css/css_howto.asp
b) alle Formatierungsangaben werden im Head-Bereich festgelegt (<head> <style>...</style> </head>): INTERN (= in der HTML-Datei)
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Formate_zentral_in_einem_style-Element_festlegen
c) in einer externen CSS-Datei (zB format.css), die über einen Link mit dem HTML-Dokument verknüpft wird (<link> ): EXTERN (= in einer anderen Datei)
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Einbinden_einer_externen_Datei
Zusatzinfo: es ist möglich, für unterschiedliche Ausgabemedien (Bildschirm = screen, Drucker = print) unterschiedliche CSS-Formatierungen zu definieren.
Dazu werden zB im <head> 2 Stylebereiche erstellt (<style media="screen"> und <style media="print">), der Browser verwendet für den Ausdruck dann automatisch die Formatierungen aus <style media="print"> (oder man verwendet nur 1 Stylebereich und gibt dort vereinzelte Druckformatierungen mit @media print ... an).
https://wiki.selfhtml.org/wiki/CSS/Media_Queries
FÜR WELCHE Elemente gelten Formatierungsangaben im Stylebereich (<style> im Head oder in externer CSS-Datei):
Selektoren = bestimmte Elemente auswählen:
| * | gilt für alle Elemente |
| h1 | Formatierungen gelten für alle <h1> |
| .klasse | gelten nur für Tags, bei denen class="klasse" steht, zB <p class="klasse">, aber nicht für <p class="fun"> |
| #test | gelten nur für Tags, bei denen id="test" steht, zb <h2 id="test"> |
siehe: https://wiki.selfhtml.org/wiki/CSS/Selektoren
oder: https://www.w3schools.com/html/html_classes.asp und https://www.w3schools.com/html/html_id.asp
(Pseudoelemente und Pseudoklassen werden später behandelt)