Modul 10
Klassen ganz einfach
Die Regel p gestaltet alle Absätze. Manchmal sollen aber nur einzelne Absätze wie ein Tipp aussehen. Dafür bekommen diese Absätze einen gemeinsamen Namen: eine Klasse. Wir verwenden heute nur eine Klasse namens tipp.
Eine Klasse ist ein gemeinsamer Name
Du hast viele Absätze, aber nur zwei sollen als Tipps auffallen. Gib genau diesen Absätzen im Start-Tag class="tipp". Die anderen Absätze bekommen diese Klasse nicht. Eine Klasse kann also eine kleine Gruppe von Elementen auswählen.
In style.css beginnt der Klassenname mit einem Punkt: .tipp. Im HTML steht nur tipp zwischen den Anführungszeichen. Schreibe die Namen genau gleich. Wenn du in der CSS-Regel die Farbe änderst, ändern sich beide Tippabsätze gleichzeitig.
Der Inhalt zeigt, ob du es verstanden hast
Schreibe hilfreiche Tipps für jemanden, der dein Hobby ausprobieren möchte. Beginne zum Beispiel mit Nimm dir am Anfang … oder Achte besonders auf …. Ein Tipp darf zwei oder drei Sätze lang sein. Der gemeinsame Hintergrund zeigt, dass diese Texte zusammengehören.
Am Ende gibst du den ganzen Projektordner ab. Nur index.html reicht nicht, denn die Seite braucht auch style.css und die Bilder. Zeige anschließend an einem eigenen Beispiel, welcher Teil Inhalt und welcher Teil Gestaltung ist. Du musst dafür keine Begriffe auswendig aufsagen.
Im HTML steht class="tipp". In CSS steht davor ein Punkt: .tipp. Du darfst dieselbe Klasse bei mehreren Absätzen verwenden. Der Punkt gehört zum CSS-Selektor, nicht in das class-Attribut.
Die Bausteine
| Schreibweise | Bedeutung |
|---|---|
| <p class="tipp"> … </p> | Dieser Absatz gehört zur Klasse tipp. |
| .tipp { … } | CSS-Regel für die Klasse tipp. |
| background-color | Hintergrund des Tippabsatzes. |
| padding | Abstand zwischen Text und Rand. |
| border | Sichtbarer Rahmen um den Tipp. |
Die Klasse im HTML verwenden
<!-- In index.html im body -->
<p class="tipp">Beginne mit einem kleinen Projekt.</p>
<p>Dieser Absatz bleibt ein normaler Absatz.</p>
<p class="tipp">Notiere deine nächste Idee.</p>.tipp {
background-color: lightyellow;
padding: 12px;
border: 1px solid goldenrod;
}Die zweite Codebox kommt in style.css. Wenn du dort die Hintergrundfarbe änderst, verändern sich beide Tippabsätze gleichzeitig. Der normale Absatz erhält diese Regel nicht.
Deine Aufgabe
Arbeite in deinem Ordner mein-hobby weiter. Bearbeite die Schritte der Reihe nach. Verwende dein eigenes Hobby und formuliere eigene Sätze. Speichere nach jedem größeren Arbeitsschritt und sieh dir das Ergebnis im Browser an.
- Schreibe zwei hilfreiche Tipps für Anfänger in deinem Hobby. Jeder Tipp soll aus zwei bis drei Sätzen bestehen und einen konkreten Rat erklären.
- Gib genau diesen beiden Absätzen class="tipp". Lass mindestens einen normalen Absatz zwischen ihnen stehen, damit du die unterschiedliche Gestaltung gut erkennen kannst.
- Ergänze die .tipp-Regel in style.css. Speichere beide Dateien und betrachte die Seite. Nur die beiden Tippabsätze sollen diesen Hintergrund und Rahmen erhalten.
- Ändere die Hintergrundfarbe in der gemeinsamen Regel einmal auf lightblue. Beobachte beide Tipps und wähle danach deine endgültige Farbe. Entferne alte Inline-Farben an den Tipps, falls sie die Regel verdecken.
- Stelle deine Hobbyseite fertig. Sie soll mindestens fünf eigene Absätze, passende Überschriften, gestaltete Wörter, Listen, einen Link, ein Bild, ein Hintergrundbild, ein beschriebenes Video und eine Tabelle mit vier Datenzeilen enthalten.
- Ergänze einen abschließenden Absatz mit drei Sätzen: Was gefällt dir an deiner fertigen Seite? Was hast du beim Erstellen gelernt? Was würdest du später noch ergänzen?
- Gib den vollständigen Ordner mein-hobby mit index.html, style.css und bilder ab. Zeige deine Seite kurz. Erkläre an deinem Code einen Absatz, den Bildpfad und die gemeinsame Gestaltung der beiden Tipps.
Eine fertig abgegebene Hobbyseite mit ausführlichen eigenen Texten und zwei gemeinsam gestalteten Tippabsätzen.
Zum Abschluss
Kreuzworträtsel
Sechs Begriffe aus diesem Modul. Ein Kästchen steht für einen Buchstaben. Schreibe groß, ohne Leerzeichen: Ä = AE, Ö = OE, Ü = UE, ß = SS. Fülle das Rätsel auf deinem Handout aus.
Waagrecht →
- 1. Dieses Zeichen steht vor tipp im CSS. (5 Buchstaben)
- 4. Das p-Element bildet diesen Textbereich. (6 Buchstaben)
- 6. Diesen gibst du mit allen Projektdateien ab. (6 Buchstaben)
Senkrecht ↓
- 2. Gemeinsamer Name für ausgewählte Elemente. (6 Buchstaben)
- 3. Diesen erzeugt border um den Tipp. (6 Buchstaben)
- 5. So heißt die verwendete Klasse im Kurs. (4 Buchstaben)
Drei Abschlussfragen
- Schreibe ein HTML-Beispiel für die Klasse tipp und den passenden CSS-Selektor.
- Warum ändern sich zwei Tippabsätze durch dieselbe Regel?
- Welche Dateien müssen bei der Abgabe mitkommen?
Online-Quiz
Zehn Fragen, jeweils eine richtige Antwort. Klicke dich durch und erhalte am Ende deine Punkte mit kurzen Erklärungen. Keine Anmeldung nötig.
Online-Quiz starten · Modul 10