Simple Custom CSS: Ausgabe unterscheidet sich von Vorlage

Hallo,

zunächst möchte ich mal nachfragen, ob ich in diesem Bereich des Forums richtig bin, ich war leicht unsicher bei der Wahl.

Es geht um Folgendes:

Ich möchte eine Box darstellen, welche letzendlich aus einer Hintergrundgrafik, einem Pfeilförmigem Button und einer kurzen Liste besteht.
Hierfür verwende ich das Plugin "Simple Custom CSS" unter dem "Stained Glass" Theme mit WordPress Version 4.3.

Der CSS Code den ich verwende funktioniert auch einwandfrei, jedenfalls sieht es fast exakt so aus wie meine Vorlage die ich mir zunächst in einem Rohdokument zurechtschrieb.
Und dieses fast ist eben der Haken der mich stört.

Nun wäre der Punkt gekommen an welchem ich euch eigentlich die URL geben sollte... naja die Sache hat nen Haken. Ich mache das in Form eines Praktikums. Mir wurde aufgetragen eine Homepage via WordPress zu entwerfen. Die Geschichte dahinter ist länger und genau gesehen kann hier auch niemand wirklich mit WordPress umgehen, im Gegenteil ich soll es selbständig erlernen und dann dem Rest die Sache erklären. Ebenso sei noch angemerkt, dass ich Anfänger im Gebiet WordPress UND Webentwicklung im allgemeinen bin.
Stattdessen habe ich nun einfach mal Grafiken angefertigt, welche aussagen sollen was nicht stimmt:

Bei dieser Grafik handelt es sich um die Vorlage die ich erstellte, die sich exakt so verhält wie ich es gerne möchte.
Während das folgende Bild zeigt, wie es in Wordpress aussieht. Die Schriftfarbe ist nicht weiß und wenn ich über den Link gehe, wechselt die Schrift in Violett und wird unterstrichen.
Jedoch soll der Link konstant in weißer Schrift angezeigt werden, egal wie nun der Zustand des Links ist. Auch die Schriftart wird nicht übernommen.

Der Code mit welchem ich sowohl mit als auch ohne Wordpress den Buttontext regle ist:

.BoxButton {
    position: relative;
    background: darkblue;
    margin: 12px;
    margin-left: 0px;
    padding:10px;
    padding-right: 50px;
    float:left;
    color: white;
      text-decoration:none;
    font: 20px Georgia, Times, sans-serif;
}

Naja, in der Vorlage funktioniert es ebenfalls ohne ".BoxButton a". Habe es aber Testweise nun dennoch ausprobiert mit:

.BoxButton: a{
  color:white;
  text-decoration: none;
  font: 20px Georgia, Times, sans-serif;
}

Das Problem hat sich dadurch allerdings nicht beheben lassen :/

Den Text unterhalb des Buttons konnte ich übrigens einwandfrei Formatieren, nur die Links wollen nicht wie ich es mag.

Hab nun auch diese Punkte mit demselben Inhalt wie bei .BoxButton a probiert. Das Ergebnis bleibt unverändert.

Ok. Ich habe mal Testweise kurz ein Standart Theme von WordPress genommen. Mir scheint so, als würde der Code des Theme VOR meinen Custom CSS Code gestellt werden, aber ausschließlich bei den Links.

Und schon funktioniert es sogar mit dem Code aus dem Eingangsbeitrag.
Das !important hat genügt.

Vielen Dank für die schnelle Hilfe :)

Naja, wie du sagtest scheint es bei CSS ja prioritäten zu geben. Ich weiß nicht in welcher Reihenfolge die liegen, damit hab ich mich nicht befasst.
Aber es hat genügt, dass ich die Teile, die eben den Link optisch ändern sollten mit einem !important versehen habe.

Demnach sieht es so aus:

color: white !important;
      text-decoration:none !important;
    font: 20px Georgia, Times, sans-serif !important;

Zitat von Monika

important nutz ich dann, wenn ich keine andere Idee mehr habe(was selten genug ist)
weil es vergewaltigt und ein Hilfsmittel ist :-)

Mir in meiner Faulheit genügt es letzendlich wenn das Ergebnis aussieht wie es soll :D :)