Schulung · Workshop · Coaching · Beratung

CSS Einstieg: Stylesheets lesen und anpassen – Kurs an einem Tag

CSS Einstieg: vorhandene Stylesheets lesen und gezielt anpassen

Dauer: ab 1 Tag | Preis: ab 900 EUR (Netto) | Termin: Ganztägig + halbtägig

An einem Tag verstehen Sie, wie der Browser CSS anwendet, warum eine Regel greift oder nicht, und wie Sie mit dem Inspektor kleine Änderungen sicher selbst vornehmen.

Warum ist der Abstand hier so groß? Vorhandenes CSS lesen und verstehen

Wer in Webprojekten Verantwortung trägt, stößt ständig auf CSS: im Ticket zur falschen Schriftgröße, im Pull Request mit zwanzig geänderten Zeilen Stylesheet, in der Abstimmung mit der Agentur. Der kompakte CSS Einstieg zeigt an einem Tag, wie der Browser Stile anwendet und wie Sie vorhandenes CSS so weit lesen, dass Sie Fehler eingrenzen und kleine Änderungen selbst vornehmen. Er richtet sich an Projektleitung, Redaktion, Product Owner und Backend-Entwickler:innen – nicht an Menschen, die ein Layout von Grund auf entwerfen wollen.

Der Tag folgt dem Weg einer Regel bis auf den Bildschirm: Standard-Stile des Browsers, Selektoren und Kombinatoren, dann die Kaskade mit Spezifität, !important und Cascade Layers – der häufigste Grund, warum eine Änderung „nicht greift“. Box-Modell, Einheiten, Schriften und Farben behandeln wir so weit, dass Sie Werte sicher anpassen. Flexbox, Grid sowie Media und Container Queries lernen Sie im Überblick lesen; wie man damit selbst gestaltet, ist Thema des Grundkurses CSS für Einsteiger. Im praktischen Teil arbeiten Sie mit dem Inspektor, finden die Quelldatei einer Regel und prüfen mit Baseline und caniuse.com, ob ein Sprachmittel in den Zielbrowsern funktioniert.

In den Chrome-Entwicklertools steht inzwischen ein Assistent auf Basis von Gemini bereit, der zu einem markierten Element erklärt, welche Regeln wirken und warum. Für Nicht-Spezialist:innen ist das eine echte Abkürzung – solange man die Antwort im Inspektor gegenprüft. Wir üben, wie Sie solche Erklärungen nutzen, sich eine Änderung als kleinen Diff vorschlagen lassen und sie mit Vorher-nachher-Screenshots abnehmen, bevor sie ins Ticket oder in den Pull Request wandert.

Ein guter Teil der CSS-Tickets, die zwischen Fachabteilung und Entwicklung hin- und hergehen, wäre in fünf Minuten erledigt, wenn jemand den Inspektor öffnet. Man muss kein Layout entwerfen können, um zu sehen, welche Regel einen Abstand verursacht. Wer die Kaskade lesen kann, schreibt präzisere Tickets, versteht Rückfragen der Agentur und traut sich an kleine Korrekturen selbst heran – und weiß auch, wann eine Änderung besser beim Frontend-Team bleibt.
Themen und Inhalte für Ihre Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung:

CSS Einstieg: vorhandene Stylesheets lesen und gezielt anpassen

Wie der Browser Stile anwendet
  • Was CSS leistet und wo die Grenze zu HTML und JavaScript verläuft
  • Standard-Stile des Browsers (User-Agent-Stylesheet) im Inspektor erkennen
  • Grundvokabular lesen: Regel, Selektor, Deklaration, Eigenschaft, At-Regel
  • Wo Stile stehen können: CSS-Datei, style-Element, style-Attribut, Komponenten-CSS
  • Vom Stylesheet zur Darstellung: Einlesen, berechnete Werte, Layout und Zeichnen
  • Reset und Normalisierung: warum Projekte mit einer eigenen Grundlage beginnen
Selektoren in fremdem Code lesen
  • Grundlegende Selektortypen: Element, Klasse, ID, Attribut und Pseudoklasse
  • Kombinatoren entziffern: Leerzeichen, >, + und ~
  • Klassennamen nach BEM wie card__title--active deuten
  • Verschachtelte Regeln mit & lesen – in nativem CSS und in Sass-Dateien
Die Kaskade: warum eine Regel gewinnt
  • Reihenfolge der Kaskade: Herkunft, Wichtigkeit, Ebene, Spezifität, Position im Code
  • Spezifität berechnen und zwei konkurrierende Selektoren vergleichen
  • Die Regel !important: warum sie Probleme verschiebt statt löst
  • Cascade Layers mit @layer erkennen und eigene Regeln in die richtige Ebene setzen
  • Durchgestrichene Deklarationen im Inspektor als Hinweis auf verlorene Konflikte deuten
Box-Modell, Einheiten, Schrift und Farbe
  • Das Box-Modell verstehen: Inhalt, Innenabstand, Rahmen, Außenabstand und box-sizing
  • Ränder und Auffüllungen einstellen: margin, padding und gap
  • Maßeinheiten lesen: px, rem, em, %, vw und berechnete Werte mit clamp()
  • Mit Schriftarten arbeiten: font-family, Größe, Gewicht und Zeilenhöhe anpassen
  • Farben ändern: Hex, rgb(), oklch() und Variablen wie var(--color-primary)
  • Rahmen, Rundungen und Hintergründe gezielt anpassen
Layouts im Überblick
  • Seitenstruktur erkennen: Normalfluss, Positionierung, Flexbox oder Grid?
  • Flexbox lesen: Richtung, Ausrichtung, Umbruch und Abstände
  • CSS Grid lesen: Spalten, benannte Bereiche und die Einheit fr
  • CSS-Frameworks im Code erkennen: Bootstrap-Klassen und Tailwind-Utilities
  • Responsive Regeln nachvollziehen: Media Queries und Container Queries
Gezielt ändern und prüfen
  • Aufbau der CSS-Dateien eines Projekts verstehen: Basis, Layout, Komponenten
  • Browser-Inspektor: Regel finden, Wert live ändern, berechnete Werte und Box-Ansicht
  • Herausfinden, aus welcher Datei eine Regel stammt – auch über Source Maps
  • Browser-Unterstützung klären: Baseline-Status bei MDN und die Website caniuse.com
  • CSS prüfen mit dem W3C-Validator und Stylelint – und deren Grenzen bei neuen Sprachmitteln
  • Änderungen klein halten: eine präzisere Regel ergänzen statt fremde Regeln zu überschreiben
  • CSS-Fehler im Ticket gut beschreiben: Element, Breite, Screenshot, betroffene Regel
CSS-Fragen mit KI-Assistenz klären
  • KI-Assistenz in den Chrome-Entwicklertools fragen, warum eine CSS-Regel auf ein Element wirkt
  • Erklärungen des Assistenten im Inspektor gegenprüfen, bevor Sie etwas ändern
  • CSS-Änderung als kleinen Diff vorschlagen lassen, begrenzt auf die betroffenen Selektoren
  • Vorher-nachher-Screenshots auf drei Breiten als Abnahme einer kleinen Stiländerung
Praxisprojekt: Änderungswünsche an einer Produktseite
  • Fünf typische Tickets: Abstand, Schriftgröße, Farbe, Umbruch auf dem Smartphone, Button-Zustand
  • Ursache jeweils im Inspektor finden und die verantwortliche Regel benennen
  • Korrektur umsetzen und auf Smartphone-, Tablet- und Desktopbreite prüfen
Lernziele
  • Sie erklären, wie der Browser Standard-Stile, Autoren-Stile und die Kaskade zusammenführt.
  • Sie bestimmen mit dem Inspektor, welche Regel einen Abstand, eine Farbe oder einen Umbruch verursacht.
  • Sie lesen Selektoren, Spezifität, Cascade Layers sowie Flexbox- und Grid-Angaben in vorhandenem Code.
  • Sie nehmen kleine CSS-Änderungen vor und prüfen deren Browser-Unterstützung mit Baseline und caniuse.com.
Zielgruppe
  • Projektleitung, Product Owner und Redaktion, die CSS-Tickets beurteilen und formulieren
  • Backend-Entwickler:innen, die gelegentlich Frontend-Code anpassen
  • Alle, die vorhandenes CSS lesen und gezielt ändern statt neu gestalten wollen

*) Die Inhalte werden individuell abgestimmt und mit Praxisbeispielen abgerundet.

Ein Symbol für einen Kalender.

Offene Termine

Kostenlose Reservierung
Ein Symbol für Angebot erhalten.

Unser Angebot

Sind Sie auf der Suche nach einer Veranstaltung, die genau Ihrem Bedarf entspricht? Einer Veranstaltung, welche nur Inhalte vermittelt, die Sie selbst gewählt haben und speziell auf Ihr Unternehmen zugeschnitten ist? Dann sind Sie bei uns richtig!

Dauer

Ein Symbol für Dauer.
ab 1 Tag (8 UE)

Die Dauer richtet sich nach Ihren Vorstellungen und inhaltlichen Wünschen. Sie bekommen genau das, was Sie brauchen.

Preis

Ein Symbol für Preis.
ab 900 EUR (Nettopreis)
ab 1.071 EUR (Bruttopreis)

Die Preise verstehen sich bei Unternehmern gemäß § 14 BGB zzgl. MwSt. Der dargestellte Ab-Preis gilt für firmeninterne Veranstaltungen und entspricht dem niedrigsten Gesamtpreis für Veranstaltungen mit bis zu drei (3) Teilnehmenden.

Termin

Ein Symbol für einen Kalender.
Ganztägig + halbtägig
nach Vereinbarung

Ihr Wunschtermin wird bei der Planung berücksichtigt. Die Veranstaltung findet ganztägig + halbtägig zu flexiblen Zeiten statt.

Ihre Vorteile

Ein Symbol für ein Vorgespräch durchführen.
Persönliches Vorgespräch
Ein Symbol für die individuelle Vorbereitung.
Individuelle Vorbereitung
Ein Symbol für Experten aus der Praxis.
Experten aus der Praxis
Ein Symbol für ein Zertifikat.
Inklusive Zertifikat

Unsere Garantien

1. Relevanz-Garantie

Wir passen den Inhalt spezifisch an die Bedürfnisse jedes Teilnehmers an. Irrelevante Themen werden ausgespart, um den größtmöglichen Nutzen zu garantieren.

2. Qualitäts-Garantie

Durch regelmäßiges Feedback optimieren wir unsere Schulungen kontinuierlich und garantieren Ihnen ein Lernerlebnis der Extraklasse.

3. Zufriedenheits-Garantie

Unsere Zufriedenheitsgarantie spricht für sich – bei Unzufriedenheit entstehen Ihnen keine Kosten.

Wir helfen gerne weiter!

Rufen Sie uns an, schreiben eine E-Mail oder nutzen das Kontaktformular.

Jetzt anfragen
Einige Unternehmen, für die wir tätig waren

DAW SE

3M Deutschland GmbH

L.N. Schaffrath GmbH & Co. KG

Teilnehmer

Feedback

Herr Hecker ist sehr gut auf individuelle Wünsche, Fragen und Anregungen eingegangen. Eine sehr informative, interessante und gelungene Veranstaltung.
Teilnehmer

Feedback

Herr Hecker hat das Thema sehr anschaulich dargestellt und ist auf alle Fragen eingegangen. Ich fühle mich jetzt gut vorbereitet, um durchzustarten.
Teilnehmer

Feedback

Die gelassene, professionelle Art hat mir gut gefallen. Kompetent, engagiert, professionell. Gute Beispiele, sympathisches Auftreten. Eigene Themenideen wurden aufgegriffen.
Unser Angebot für Ihre firmeninterne Beratung, Coaching, Workshop, Training und Weiterbildung

Lösungen für Ihren Bedarf an Coaching, Workshop, Training, Schulung und Weiterbildung

Profitieren Sie von unserer langjährigen Expertise in der beruflichen Weiterbildung, modernen Lernmethoden und einem Portfolio von über 600 IT-, Online- und Digital-Beratungsleistungen.
Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Weiterbildung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

✓
Ein Symbol für eine einzelne Person.

Für eine Person

Training & Coaching für Einzelpersonen

  • Passgenaue Inhalte auf den einzelnen Teilnehmer zugeschnitten
  • Ein sehr effektives Format, das schnell Ergebnisse bringt
  • Individuelles Training und Coaching motivieren und wirken
Jetzt anfragen
✓
Ein Symbol für eine Gruppe von Personen.

Für eine Gruppe

Training & Workshops für Teams und Abteilungen

  • Bedarfsgerechte Inhalte auf die Herausforderung der Praxis zugeschnitten
  • Konsequente Praxisorientierung, modernste Techniken und Tools
  • Neue Fähigkeiten und Kenntnisse nachhaltig in den Arbeitsalltag integrieren
Jetzt anfragen
✓
Ein Symbol für ein Unternehmen.

Für eine Firma

Training-Komplett-Lösungen für Ihr Unternehmen‍

  • Ganzheitliche Konzepte für Ihre Mitarbeiterentwicklung
  • Individueller Skill-Katalog zur Erweiterung Ihres internen Weiterbildungsangebots
  • Nachhaltige Personalentwicklung realisieren
Jetzt anfragen

Anfrage für eine unverbindliche + kostenlose Erstberatung zum Thema

CSS Einstieg - Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung

Wir freuen uns über Ihre Anfrage und antworten so schnell es geht!

Ich interessiere mich für den Termin:

Termin anfragen

Das Angebot von "HECKER CONSULTING" richtet sich ausschließlich an Unternehmen und Behörden (iSv § 14 BGB). Verbraucher (§ 13 BGB) sind vom Vertragsschluss ausgeschlossen. Mit Absendung der Anfrage bestätigt der Anfragende, dass er nicht als Verbraucher, sondern in gewerblicher Tätigkeit handelt. § 312i Abs. 1 S. 1 Nr. 1-3 und S. 2 BGB (Pflichten im elektronischen Geschäftsverkehr) finden keine Anwendung.

Vielen Dank, Ihre Nachricht wurde empfangen!
Beim Absenden des Formulars ist etwas schiefgelaufen.
Beratung, Coaching, Workshop, Training, Schulung

Ähnliche Leistungen, die Sie interessieren könnten.

Wir erweitern ständig unser Beratungsportfolio. Über 600 IT-, Online-, Digital-Beratungsleistungen haben wir für Sie im Programm. Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Beratung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

Mehr IT-, Online-, Digital-Beratungsleistungen anzeigen >>
Nach oben