CSS Tutorial

Datum
25.10.2020

In dieser Tutorial-Reihe erkläre ich dir, das Basiswissen von CSS. Von Typografie bis zum Layout bekommst du hier, das Basiswissen, vermittelt.

Was ist CSS?

CSS ist eine Gastaltungs und Formatierungssprache, mit dieser Sprache kann man HTML Elemente stylen. Mit CSS kannst du Schrift, Farbe und Form einer Website definieren. CSS wird von allen Browser unterstützt und ist somit ein Web-Standart, den Standart definiert die World Wide Web Consortium. Der große Vorteil von CSS ist, es kann der Inhalt vom gestalterischen getrennt werden. Dadurch gewinnt man bei einer Website eine übersichtlichkeit und kann eine klare Struktur aufbauen.

CSS Tutorials

Styles definieren

CSS Styles definieren

Übersicht, wie du Styles auf HTML-Elemente anwendest. Von der Klasse bis zum hover Effekt. CSS Styles definieren

Kombinationsmöglichkeiten in CSS

CSS Klassen kombinieren Teaser

Anleitung, wie du verschiedene Selektoren miteinander verknüpfst. Des weiteren eine Übung, wie du ein Teaser-Element baust. CSS Klassen kombinieren.

das Flexbox System

css flexbox tutorial teaser mit code

Mit Flexbox kannst du die Website designen und gestalten. Mit diesem System ist es möglich ein dynamisches Design zu erstellen, sprich es passt sich der Bildschirmgröße an. CSS Flexbox Tutorial.

Transitions versetzt starten

CSS Transition Teaser

Mit transitions kannst du einfache Animationen, mit CSS, erstellen. In diesem Tutorial, zeige ich dir, wie du diese verketten kannst und mehrere Effekte aneinander reihst CSS mehrere Transition versetzt starten.

Checkbox stylen

CSS Checkbox styling teaser

Formelemente mit CSS zu stylen ist nicht gerade einfach, da dies Systemschaltflächen sind. Deswegen am Beispiel der Schwersten Schaltfläche ein Tutorial, wie du das Design änderst CSS: Checkbox styling.

Übungsaufgaben

css animation verlauf uebungsaufgaben_teaser

Ich habe ein paar CSS Fingerübungen geschrieben, hier kannst du diese nachmachen und dein CSS Wissen erweitern bzw. abfragen. CSS Übungsaufgaben [Animation & Verlauf]

geplante Tutorials 2021

  • CSS in HTML einbinden
  • das Grid Stystem
  • Animationen mit CSS
  • responsive Tabellen
  • Formelemente stylen
  • Pseudoklassen
  • Typografie/Schrift definieren
  • Farben und Verläufe
  • CSS Debuggen

Schreibe einen Kommentar

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