Effizienter CSS Komplettkurs

Hallo allerseits,

in dem Kurs möchte ich euch CSS beibringen und das möglichst schnell.

Dabei werden trotzdem tief in die Themen schauen, sodass ihr danach echtes Verständnis entwickelt.

Jedes Thema hat den folgenden Aufbau

• Beschreibung

• Syntax

• Beispiele

• Nützliche Informationen

• Verwendungsmöglichkeiten

Nach jedem Thema werdet ihr die folgenden Fragen beantworten können

• Was kann es

• Wie wird des definiert

• Wie wendet man es an

• Welche Informationen sind dazu noch wichtig

• Wann verwendet man es

Es werden die folgenden Themen behandelt

• CSS Setup in HTML

• CSS Übersicht

• Inline CSS

• Farbwert: Benannte Farben

• color

• background-color

• Internes CSS

• Elementselektor

• Kommentare

• Einheit: px

• padding

• margin

• border-style

• border-width

• border-color

• border

• border-radius

• width

• height

• min-width

• min-height

• max-width

• max-height

• Box-Modell

• box-sizing

• font-style

• font-weight

• font-size

• line-height

• font-family

• font

• Einheit: %

• Viewport

• Einheit: vw

• Einheit: vh

• Einheit: vmin

• Einheit: vmax

• Einheit: em

• Einheit: rem

• Hex-Farben

• RGB-Farben

• HSL-Farben

• Farbtransparenz

• Farbwert: transparent

• Farbwert: currentColor

• Vererbung von Eigenschaften

• Wert: inherit

• Wert: initial

• Wert: unset

• Wert: all

• Externes CSS

• Cascading Order

• important

• CSS Spezifität

• Klassenselektor

• ID-Selektor

• Universalselektor

• Attributselektor

• Gruppenselektor

• Nachfahrenselektor

• Kindselektor

• Direkte Geschwisterselektoren

• Allgemeine Geschwisterselektoren

• Kombinierte Selektoren

• display (1): Basis

• top, right, bottom, left

• position

• z-index

• visibility

• opacity

• float

• clear

• display (2): flex

• gap, column-gap, row-gap

• order

• flex-wrap

• flex-direction

• flex-flow

• flex-grow

• flex-shrink

• flex-basis

• flex

• display (3): grid

• grid-template-columns

• grid-template-rows

• grid-column-start

• grid-column-end

• grid-column

• grid-row-start

• grid-row-end

• grid-row

• grid-auto-columns

• grid-auto-rows

• grid-auto-flow

• grid-template-areas, grid-area

• justify-content

• align-content

• justify-items

• align-items

• justify-self

• align-self

• place-content

• place-items

• place-self

• outline-style

• outline-color

• outline-width

• outline

• outline-offset

• text-shadow

• box-shadow

• text-decoration-line

• text-decoration-color

• text-decoration-style

• text-decoration-thickness

• text-decoration

• text-align

• text-align-last

• vertical-align

• text-indent

• text-transform

• font-variant

• Fallback Fonts

• Google Fonts

• @font-face

• overflow, overflow-x, overflow-y

• resize

• cursor

• user-select

• appearance

• filter

• backdrop-filter

• overflow-wrap

• white-space

• text-overflow

• word-break

• letter-spacing

• word-spacing

• list-style-type

• list-style-position

• list-style-image

• list-style

• border-collapse

• border-spacing

• table-layout

• root, var

• calc

• min, max

• attr

• after

• before

• content

• first-letter

• first-line

• marker

• selection

• clearfix

• hover

• focus

• focus-within

• active

• first-child, last-child

• nth-child(n), nth-last-child(n)

• first-of-type, last-of-type

• nth-of-type(n), nth-last-of-type(n)

• empty

• only-child

• only-of-type

• required, optional

• disabled, enabled

• invalid, valid

• checked

• read-only, read-write

• in-range, out-of-range

• visited, link

• not(selector)

• lang(language)

• target

• background-image

• background-position

• background-size

• background-repeat

• background

• background-attachment

• background-origin

• background-clip

• object-fit

• object-position

• aspect-ratio

• linear-gradient

• repeating-linear-gradient

• radial-gradient

• repeating-radial-gradient

• conic-gradient

• repeating-conic-gradient

• translate, translateX, translateY

• scale, scaleX, scaleY

• rotate, rotateX, rotateY, rotateZ

• skew, skewX, skewY

• transform

• transition-delay

• transition-duration

• transition-property

• transition-timing-function

• transition

• animation-name

• animation-duration

• animation-delay

• animation-iteration-count

• animation-direction

• animation-timing-function

• animation-fill-mode

• animation-play-state

• animation

• @keyframes

• column-count

• column-width

• columns

• column-gap

• column-span

• column-rule-style

• column-rule-width

• column-rule-color

• column-rule

• direction

• writing-mode

• text-orientation

• @import

• @media

Es gibt eine Lektion mit einer Übersicht zu allen Themen im Schnelldurchlauf. Diese könnt ihr euch anschauen, um einen Einblick in den Kurs zu bekommen.

Vielen Dank für die Aufmerksamkeit.

Gruß
Marek