Das Entwickler Tool: Große Hilfe für deine CSS-Änderungen

Du willst ein paar gestalterische Anpassungen auf deiner Seite vornehmen?
Nichts leichter als das, wenn man die HTML-Bezeichnung des Elements kennt und den CSS-Befehl.

Es gibt zwar einheitliche Werte für die HTML-Elemente, aber gerade wenn es um feiner definierte Elemente (Klassen) geht, dann ist jedes Theme ein bisschen anders.

Um den richtigen Code zu finden um das Element zu bearbeiten kann dir das Entwickler Tool von Chrome sehr weiterhelfen.

Hier kann man das Element auswählen und erhält die HTML-Bezeichnung – den Selector. Danach kann man CSS-Befehle eingeben und sehen, wie sich diese auf die Seiet auswirken würden. Das schöne daran – es ist nur für dich in diesem Moment sichtbar. Die Änderungen im Entwickler Tool haben noch keine Auswirkungen auf deine Seite. Du kannst also in Ruhe Sachen ausprobieren und schauen wie sich das auf deine Seite auswirken würde.

Wie das Ganze in Aktion aussieht, kannst du dir im Video anschauen:

 

 

5 Antworten
  1. Manuela says:

    Toll erklärt! Vielen Dank, Maja! Endlich konnte ich meine Änderungen spielend leicht umsetzen. Dann ist das Ganze ein Kinderspiel :-)

    Antworten

Trackbacks & Pingbacks

  1. […] Dieses Feld kann man zwar auch für Design-Änderungen nehmen, die man mit CSS zum Beispiel aus dem Entwickler-Tool tätigen möchte. Wenn man jedoch eine eigene Schrift verwenden will, dann muss man diese Schrift […]

  2. […] Dieses Feld kann man zwar auch für Design-Änderungen nehmen, die man mit CSS zum Beispiel aus dem Entwickler-Tool tätigen möchte. Wenn man jedoch eine eigene Schrift verwenden will, dann muss man diese Schrift […]

  3. […] die Frontansicht wechseln und das Entwickler Tool […]

  4. […] –> Zum Video-Tutorial: „Mit dem Entwickler Tool arbeiten„ […]

Schreib einen Kommentar

Willst du an der Diskussion teilnehmen?
Dann schreib mir

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert