BananaMaster

4 Wie man CSS in HTML verwendet: Schritt-für-Schritt-Anleitung - ( HTML und CSS, Front End )

Falls du etwas vergessen hast — klicke, um zur Lektion zurückzukehren.

📘 Praktische Aufgaben zu CSS-Stilen

Erstelle für jede Aufgabe eine eigene Klasse in der Datei style.css und wende sie auf das passende HTML-Tag an.

📌 Dateistruktur: index.html + style.css

✏️ Aufgabe 1

Reproduziere das Aussehen dieses Textes:

Hello World

Textfarbe: red
Schriftgröße: 20px

✏️ Aufgabe 2

Reproduziere das Aussehen dieses Textes:

My Name

Textfarbe: #2bcd84
Schriftstärke: 700

✏️ Aufgabe 3

Reproduziere das Aussehen dieses Textes:

I love coding

Schriftart: "Courier New", Courier, monospace
Schriftgröße: 24px
Textfarbe: #f0a830

✏️ Aufgabe 4

Reproduziere das Aussehen dieses Textes:

Frontend Developer

Textfarbe: blue
Schriftgröße: 34px
Schriftstärke: 300

✏️ Aufgabe 5

Reproduziere das Aussehen dieses Textes:

CSS is cool

Textfarbe: #5bc4f5
Schriftart: Georgia, serif
Schriftgröße: 20px

✏️ Aufgabe 6

Reproduziere das Aussehen dieses Textes:

JavaScript

Textfarbe: white
Schriftgröße: 18px
Schriftstärke: 600

✏️ Aufgabe 7

Reproduziere das Aussehen dieses Textes:

Rockstar Games

Textfarbe: #ff6b6b
Schriftgröße: 50px
Schriftart: "Courier New", Courier, monospace
Schriftstärke: 900

✏️ Aufgabe 8

Reproduziere das Aussehen dieses Textes:

Small and light

Textfarbe: #888
Schriftgröße: 15px
Schriftstärke: 100

✏️ Aufgabe 9

Reproduziere das Aussehen dieses Textes:

GTA 6 is coming

Textfarbe: #b89ef8
Schriftart: Impact, fantasy
Schriftgröße: 36px
Schriftstärke: 400

✏️ Aufgabe 10 — 🔥 Bonus

Denk dir selbst etwas aus! Erstelle die Klasse .my-style und wende sie auf ein beliebiges Tag an.

Text

Wähle deine eigene Textfarbe
Wähle deine eigene Schriftgröße
Wähle deine eigene Schriftstärke
Wähle deine eigene Schriftart

📌 Wichtig:
Jede Klasse wird separat in style.css geschrieben.
Verwende nur HTML und CSS.
JavaScript wird nicht benötigt.
Übe die Eigenschaften: color, font-size, font-weight, font-family.