Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:glf22:web-tech:css [2023/05/02 10:05] – created Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf22:web-tech:css [2023/05/02 10:09] (current) – Ivo Blöchliger
@@ Line 1: / Line 1: @@
+====== CSS: HTML mit Stil ======
+Damit werden Farben, Grössen, Schriftarten etc. von HTML-Elementen festgelegt.
+<WRAP todo>
+  * Fügen Sie folgende Zeile zwischen <head> und </head> in Ihrer Datei hello.html ein.
+<code html>
+    <link rel="stylesheet" href="hello.css">
+</code>
+  * Clicken Sie dann mit gedrückter Ctrl-Taste im HTML-Code auf den Dateiname hello.css, um diese Datei anzulegen.
+  * Fügen Sie dann folgenden Inhalt ein:
+<code css>
+body {   /* HTML tag body */
+    background-color: beige;
+}
+.wichtig { /* Klasse wichtig, einem HTML-Element class="wichtig" hinzufügen, um wichtig zu sein */
+    color: red;        /* Text farbe */
+    font-weight: bold;   /* Fett */
+}
+#meinDing {  /* Ein einziges HTML-Element mit id="meinDing" */
+    background-color:lightseagreen;
+}
+</code>
+  * Speichern Sie alle Dateien und betrachten Sie die Seite im Browser (idealerweise mit dem LiveServer).
+  * Fügen Sie dann einigen HTML-Tags zwischen < und > das Attribut ''class="wichtig"'' hinzu, z.B. wie folgt
+<code html>
+<p class="wichtig">Mit p macht man einzelne Abschnitte</p>
+</code>
+  * Testen Sie (eventuell muss die Seite mit Ctrl-Shift-R neu geladen werden.)
+  * Fügen Sie die Klasse einem weiteren Element hinzu.
+  * Fügen Sie einem einzigen Element das Attribut ''id="meinDing"'' hinzu und testen Sie.
+<code html>
+<p id="meinDing">Und hier noch ein Bild mit dem Dokuwiki-Logo</p>
+</code>
+</WRAP>
+===== Resourcen zu CSS =====
+  * https://wiki.selfhtml.org/wiki/CSS
+  * https://www.w3schools.com/css/
+Websuche mit was man eben sucht plus die Begriffe "CSS" und/oder "HTML". Z.B. "CSS position hintergrundbild".