CSS

These transform functions slant or distort elements along the X or Y axis, creating a parallelogram effect. They’re useful for dynamic banners, stylized cards, and geometric layouts. Overview of Functions Function Axis Effect Equivalent skew() X and/or Y Slants both axes skewX() + skewY() skewX() Horizontal Slants left/right skew(angle, 0) skewY() Vertical Slants up/down skew(0,…

The translate() and translate3d() functions move elements from their original position — horizontally, vertically, or in 3D space. Unlike position or margin, translation doesn’t affect the layout of other elements. Overview of Functions Function Dimensions Values Description translate() 2D x or x, y Moves along X and Y translate3d() 3D x, y, z Moves along…

CSS transitions let you smoothly animate changes to CSS properties over a specified duration. They add polish, interactivity, and visual appeal — turning abrupt state changes into fluid motion. What is a Transition? A transition defines how a CSS property changes from one state to another over time. Instead of instantly jumping from red to…

These four longhand properties give you precise control over how transitions behave — which properties animate, how long they take, when they start, and how discrete changes are handled. Overview of Properties Property Description Default transition-property Which properties to animate all transition-duration How long the transition takes 0s transition-delay Wait before starting 0s transition-behavior How…

The animation property is one of the most powerful tools in CSS. It lets you create complex, multi-step animations — with full control over timing, repetition, direction, and more. What is an Animation? An animation in CSS is defined by two parts: Unlike transitions (which animate between two states), animations can have many stages and…

This lesson covers six essential animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. Overview of Properties Property Description Default animation-name Name of the @keyframes rule none animation-duration How long one cycle takes 0s animation-timing-function Speed curve ease animation-delay Wait before starting 0s animation-iteration-count How many times to repeat 1 animation-direction Direction of each cycle…

This lesson covers the remaining animation properties: animation-fill-mode, animation-play-state, animation-timeline, and animation-composition. Overview of Properties Property Description Default animation-fill-mode Styles before/after animation none animation-play-state Running or paused running animation-timeline Timeline that controls the animation auto animation-composition How multiple animations combine replace 1. animation-fill-mode Defines the styles applied to an element before and after the animation…

1. Selectors Basic Selectors Selector Syntax Description Element p { } Targets all elements by tag name Class .highlight { } Targets elements with a specific class ID #main-title { } Targets one unique element Universal * { } Targets all elements Attribute [type=”text”] { } Targets elements with a specific attribute Attribute Selectors Syntax…

1. Introduction to CSS CSS (Cascading Style Sheets) is the language used to control the visual presentation of HTML documents. It allows you to style everything from colors and fonts to layouts and animations. What is CSS? CSS specifies how HTML elements should be displayed on screen, paper, or in other media. It separates content…