Aufgabe

  1. Öffne deine index.html im Firefox.

  2. Öffne die Funktion „Untersuchen“.

  3. Wähle verschiedene Bereiche der Webseite aus (Header, Boxen, Texte).

  4. Ändere testweise Farben, Schriftgrößen oder Abstände direkt im Browser.

  5. Beobachte, was passiert – ohne etwas zu speichern.

Probiere z. B.:

  • eine Box rot einfärben

  • eine Überschrift größer machen

  • einen Text verstecken oder hervorheben

Du kannst hier gefahrlos experimentieren – nichts geht kaputt.

Erklärung

Mit „Untersuchen“ (auch Developer Tools genannt) kannst du dir anschauen:

  • welches HTML-Element wo auf der Seite liegt

  • welche CSS-Regeln darauf wirken

  • Du kannst CSS-Werte live verändern und sofort sehen, wie sich die Seite verhält. Diese Änderungen sind nur vorübergehend:

  • Beim Neuladen der Seite ist alles wieder wie vorher

Webentwickler nutzen diese Funktion ständig, um schnell Ideen zu testen.

Technische Umsetzung (Schritt für Schritt)

1. „Untersuchen“ öffnen

  • Rechtsklick auf eine Stelle der Webseite

  • „Untersuchen“ auswählen

Oder:

  • F12 drücken

  • oder Strg + Shift + C

Bild: Rechtsklick-> Untersuchen

2. HTML-Element auswählen

  • Bewege die Maus über den HTML-Code im linken Bereich
    HTML Code
    Links siehst du den HTML-Code der Webseite. Rechts das CSS.Das entsprechende Element wird im Browser farbig markiert

  • Klicke z. B. auf:

    • <header>

    • <h1>

    • <section class="box">

3. CSS-Regeln ansehen

Rechts siehst du die CSS-Regeln, die auf das ausgewählte Element wirken, z. B.:

#header { 
  background-color: #6a0dad; 
}
 

4. CSS live verändern

  • Klicke auf einen Wert (z. B. die Farbe)

  • Tippe einen neuen Wert ein:

    background-color: red;

Oder ändere z. B.:

font-size: 48px; 
padding: 40px;
 

➡ Die Änderung ist sofort sichtbar.

5. Eigene CSS-Regeln hinzufügen

Du kannst unten im CSS-Bereich neue Regeln hinzufügen:

border: 5px solid black;
 

So kannst du testen, wie etwas aussieht, bevor du es in style.css übernimmst.

6. Sichtbarkeit verändern

Die Sichtbarkeit eines Textes kannst du wie folgt verändern:

.text {
  visibility: hidden 
}

Wichtiger Hinweis

Alles, was du in „Untersuchen“ änderst, wird nicht gespeichert.

Wenn dir eine Änderung gefällt:

  1. Merke dir die CSS-Regel

  2. Trage sie manuell in style.css ein

Zuletzt geändert: Dienstag, 16. Dezember 2025, 15:16