Mit dem Google-Developer-Tool hat der Anwender die Möglichkeit das Frontend, die Html und die CSS gleichzeitig zu betrachten.

Grundlagen zur CSS

In den CSS-Dateien werden alle Styling-Informationen einer Website gespeichert.

CSS                                                              HTML                                                                                              Frontend

Der Multishop verwendet verschiedene CSS-Dateien.
Beispielsweise in der style.css ist Standard-Design definiert.
Die layout.css kann vom Shop-Admin im Backend bearbeitet werden. Hier definierte Stylings „überschreiben“ das Standard-Design.

Style.css                                                                                                                    Layout.css

^{Der grundsätzliche Aufbau der Syntax ist immer gleich:}

#footer {

Wie finde ich heraus, was ich ich in die CSS schreiben muss und wozu brauche ich die Google-Developer-tools?

Mit einem Rechtsklick auf der Maus öffnet man ein Popup-Fenster.

In diesem Fenster hat man mehrere Optionen, welche man wählen kann.

Die für Sie interessante Option ist  "Untersuchen".

Wenn Sie auf "Untersuchen" geklickt haben, öffnet sich meist am rechten Rand auf der Website das Developer Tools Menü.

Jetzt haben Sie einen Überblick über die CSS, die HTML und das Frontend der Website.

Sie haben nun die Möglichkeit zu sehen, wie die Website strukturiert und designet ist.

Mit dem Google Developer Tool können sie z.B anschauen wie sich die Website auf verschieden Geräten darstellt.

So kann das responsive Design der Website getestet werden.

PC

Mobilgeräte

Nur temporäre Änderungen 

Wenn sie permanent sein sollen dann muss man sie manuell in die CSS einfügen

nur die Eigenschaften in die CSS die du ändern möchtest