Custom Properties in CSS

HTMLStudent · 07.12.2022

Hallo,
ich bin ganz neu dabei in CSS und HTML.
Könnte mir bitte jemand bei folgender Aufgabe weiterhelfen:
"Wie kann man Variablen in CSS nutzen? Geben Sie dazu einen beispielhaften CSS Code Ausschnitt an, in welchem Sie die Schriftart Arial einer Variable namens myFont zuweisen und mit Hilfe dieser alle Buttons und Hyperlinks stylen."

Was Variablen in CSS sind habe ich verstanden.
CSS-Variablen (benutzerdefinierte Eigenschaften) sind von CSS-Autoren definierte Einheiten, die bestimmte Werte enthalten, die im gesamten Dokument wiederverwendet werden können. Sie werden mit der Notation für benutzerdefinierte Eigenschaften festgelegt.

Mit dem zweiten Teil komme ich trotzdem nicht zurecht. Hat jemand eine Lösung für mich?
Danke schonmal.

scatello · 07.12.2022

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --myFont: "Arial";
}

button, a {
  font-family: var(--myFont);
}

</style>
</head>
<body>
  <p>
  <a href="https://www.google.de">Google</a>
  </p>
  <p>
    <button>Button 1</button>
    <button>Button 2</button>
  </p>
</body>
</html>

Siehe auch https://www.w3schools.com/css/css3_variables.asp

HTMLStudent · 08.12.2022

Ist das der CSS-Code? Bei Zeile 11 von unten "</head>" bekomme ich leider einen Fehler..

scatello · 08.12.2022

Wo genau bekommst du einen Fehler und wie lautet der?