CSS Cheat Sheet

Used to style text appearance and spacing.

0.1 Font Properties

• font-family : Specifies the font type.
• font-size : Defines the size of the font (px, em, rem, %).
• font-weight : Controls the thickness of the font (normal, bold, lighter, bolder,100-900).
• font-style : Defines whether text isnormal, italic, or oblique.
• font-variant : Enables special text rendering (normal, small-caps).

0.2 Text Appearance & Formatting

• color : Sets the text color.
• text-align : Aligns text (left, right, center, justify, start,end).
• text-decoration : Addsunderline, overline, line-through, or none.
• text-transform : Converts text touppercase, lowercase, or capitalize.
• letter-spacing : Adjusts spacing between characters.
• word-spacing : Adjusts spacing between words.
• line-height : Controls the height of lines (normal, 1.5, 20px).
• text-indent : Defines indentation for the first line of text.
• text-shadow : Adds shadow to text (e.g., 2px 2px 5px gray).

0.3 Text Wrapping & Overflow

• white-space : Controls how whitespace is handled (normal, nowrap, pre, pre-wrap,pre-line).
• overflow-wrap : Controls text wrapping inside an element (normal, break-word, anywhere).
• word-break : Defines how words should break (normal, break-word, keep-all).
• hyphens : Controls automatic hyphenation (none, manual, auto).

0.4 Text Direction & Writing Mode

• direction : Sets text direction (ltr for left-to-right, rtl for right-to-left).
• unicode-bidi : Controls text embedding and direction handling (normal, embed,bidi-override).
• writing-mode : Defines text orientation (horizontal-tb, vertical-rl, vertical-lr).
• Used for multilingual layouts, right-to-left languages (like Arabic), and vertical text formatting.

0.5 Web Fonts & @font-face

• Enables custom fonts beyond system defaults.

• @font-face allows embedding fonts from external files (woff, woff2, ttf, etc.).

• Supports self-hosted fonts and third-party services like Google Fonts.

• Example:

0.6 Shadows

• text-shadow : Applies shadow effects to text.
  • box-shadow: 10px 10px 5px #888;
• box-shadow : Creates a shadow around an element's box.
  • text-shadow: 2px 2px 4px #000;

0.7 Comments

• /* This is a comment */

1.1 Selectors

Basic Selectors

• ID Selector (#id) : Selects an element with a specific ID.
• className Selector(.className) : Selects all elements with a given className.
• Element Selector(element) : Targets all instances of a specific HTML tag.
• Universal Selector(*) : Applies styles to all elements.

Combination Selectors

• Group Selector(A, B) : Applies the same style to multiple elements.
• Descendant Selector(A B) : Selects elements inside another element (nested).
• Child Selector(A > B) : Selects direct children only.
• Adjacent Sibling Selector(A + B) : Selects the immediate next sibling of an element.
• General Sibling Selector(A ~ B) : Selects all siblings that come after the first element.

Attribute Selectors

• Basic Attribute Selector([attribute]) : Selects elements with the given attribute.
• Exact Match([attribute="value"]) : Selects elements with an exact attribute value.
• Starts With([attribute^="value"]) : Selects elements where the attribute startswith a value.
• Ends With([attribute$="value"]) : Selects elements where the attribute ends with a value.
• Contains([attribute*="value"]) : Selects elements where the attribute contains a value.
• Contains Whole Word([attribute~="value"]) : Selects elements where the attribute contains a whole word.
• Contains with Dash([attribute|="value"]) : Selects elements where the attribute matchesexactly
• or starts with value-
  • [type="text"]
  • [href^="https"]
  • [className~="btn"]

Pseudo-classes

• User Action Pseudo-Classes

• :hover : When a user hovers over an element.

• :focus : When an element (like input) is focused.

• :active : When an element is being clicked.

• :visited : When a link has been visited.

• :link : Selects all unvisited links.

• Structural Pseudo-Classes

• :first-child : Selects the first child of a parent.

• :last-child : Selects the last child of a parent.

• :nth-child(n) : Selects the nth child (e.g., :nth-child(3) selects the third child).

• :nth-last-child(n) : Selects the nth child counting from the end.

• :only-child : Selects an element that is the only child of its parent.

• :first-of-type : Selects the first element of its type in a parent.

• :last-of-type : Selects the last element of its type in a parent.

• :nth-of-type(n) : Selects the nth occurrence of a specific type.

• :nth-last-of-type(n) : Selects the nth occurrence from the end.

• :only-of-type : Selects an element that is the only one of its type in a parent.

• Form & Input Pseudo-Classes

• :checked : Selects checked checkboxes or radio buttons.

• :enabled : Selects enabled form elements.

• :disabled : Selects disabled form elements.

• :required : Selects input fields with the required attribute.

• :optional : Selects input fields without the required attribute.

• :read-only : Selects fields that are read-only.

• :read-write : Selects fields that are editable.

• :valid : Selects input fields with valid input.

• :invalid : Selects input fields with invalid input.

• :in-range : Selects inputs within a valid range.

• :out-of-range : Selects inputs outside a valid range.

• :placeholder-shown : Selects input fields where the placeholder is visible.

• Logical & Negation Pseudo-Classes

• :not(selector) : Selects everything except the specified selector.

• :root : Selects the root element (<html>).

• :empty : Selects elements with no children (not even whitespace).

• :target : Selects an element that matches the URL hash (e.g., #section).

• :lang(language) : Selects elements with a specific language (e.g., :lang(en)).

Pseudo-elements

• Text & Content Pseudo-Elements

• ::before : Inserts content before an element.

• ::after : Inserts content after an element.

• ::first-letter : Styles the first letter of a text block.

• ::first-line : Styles the first line of a text block.

• ::selection : Styles selected text.

• Form & Input Pseudo-Elements

• ::placeholder : Styles the placeholder text inside inputs.

• ::marker : Styles the markers of list items (<li>).

• ::file-selector-button : Styles the file upload button in <input type="file">.

• ::backdrop : Styles the background of fullscreen elements (like <dialog>).

Specificity and Cascade

• Specificity Hierarchy

  • Specificity determines which CSS rule gets applied, with inline styles having the highest priority, followed by IDs, classes, and element selectors.
  • When conflicting rules occur, the one with higher specificity or the one declared last (in source order) will be applied.
  • The Cascade is the order in which rules are applied based on importance: inline > internal > external > user agent styles.

• !important Rule

  • The !importantrule forces a CSS property to override others, even with higher specificity, but should be used sparingly.

• Inheritance and Overriding Styles

  • Inheritance allows some properties (like color and font-family) to be passed from parent to child elements, while others (like margin) must be explicitly set.

1.2 Properties

Background and gradient

• Background
  Used to style backgrounds and element borders.

  • background : Shorthand for all background properties.
  • background-color : Sets the background color (red, #ff0000, rgba(255, 0, 0, 0.5)).
  • background-image : Sets a background image (url('image.jpg')).
  • background-size : Defines the size of the background image (cover, contain, auto).
  • background-position : Specifies the position of a background image (top left, center center).
  • background-repeat : Controls whether the background image repeats (repeat, no-repeat).
  • background-attachment : Determines if the background is fixed (scroll, fixed).
  • background-clip : Determines if the background extends to the border or padding.
  • background-origin : Specifies the starting position of the background image.
  • background-blend-mode : Defines how the background color and image blend.

• Gradient

  • Linear Gradient - background-image: linear-gradient(direction, color-stop1, color-stop2, …)
  • Radial Gradient - background-image: radial-gradient(shape size at position, color-stop1, color-stop2, …)
  • Conic Gradient - background-image: conic-gradient(from angle at position, color-stop1, color-stop2, …)
  • Repeating Gradients - repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient

• Blend Modes

  • background-blend-mode : Blends background layers.
  • mix-blend-mode : Blends an element with its backdrop.
  • isolation : Controls whether an element creates a new stacking context for blending.

• filter

  • filter : Applies graphical effects like blur, brightness, and contrast.
  • blur() : Applies a blur effect.
  • brightness() : Adjusts brightness.
  • contrast() : Adjusts contrast.
  • grayscale() : Converts to grayscale.
  • hue-rotate() : Rotates the hue.
  • invert() : Inverts colors.
  • opacity() : Adjusts transparency.
  • saturate() : Adjusts saturation.
  • sepia() : Applies a sepia effect.
  • drop-shadow() : Adds a shadow effect.

Shadow & Effects Properties

• box-shadow : Adds a shadow around an element (5px 5px 10px rgba(0,0,0,0.5)).
• text-shadow : Adds a shadow to text.
• filter : Applies graphical effects (blur, brightness, contrast).
• backdrop-filter : Applies effects behind the element (useful for glassmorphism).
• mix-blend-mode : Determines how an element's content blends with the background.
• opacity : Controls the transparency of an element.
• mask : Clips an element using a mask image.

1.3 Values

Colors

• Named Colors : Predefined color names:
  • red, blue,green, yellow, purple, cyan, orange,pink, etc.
• Hexadecimal (#RRGGBB) : Specifies red, green, and blue values in hex format:
  • #ff0000 (red),#00ff00 (green), #0000ff (blue), #ffffff (white),#000000(black)
• Hex with Alpha (#RRGGBBAA) : Adds transparency (AA = alpha value, from 00 to FF):
  • #ff000080 (50% transparent red)
• RGB (rgb(r, g, b)) : Uses red, green, and blue values (0-255):
  • rgb(255, 0, 0) (red),rgb(0, 255, 0) (green), rgb(0, 0, 255) (blue)
• RGBA (rgba(r, g, b, a)) : Adds transparency (0-1 range for a):
  • rgba(255, 0, 0, 0.5) (50% transparent red)
• HSL (hsl(h, s, l)) : Hue (0-360), Saturation (0-100%), Lightness (0-100%):
  • hsl(0, 100%, 50%) (red),hsl(240, 100%, 50%) (blue)
• HSLA (hsla(h, s, l, a)) : Adds transparency:
  • hsla(0, 100%, 50%, 0.5) (50% transparent red)

Length Units

Absolute Units

• These do not change based on context.

• px : Pixels (most commonly used).
• cm : Centimeters.
• mm : Millimeters.
• in : Inches.
• pt : Points (1 pt = 1/72 inch).
• pc : Picas (1 pc = 12 pt).

Relative Units

• These adjust based on surrounding elements.

• em : Relative to the font size of the element.
• rem : Relative to the root element (<html>).
• ex : Relative to the height of the lowercase letter x.
• ch : Relative to the width of the0 (zero) character.
• % : Percentage relative to parent element.
• vw : 1% of the viewport width.
• vh : 1% of the viewport height.
• vmin : 1% of the smaller viewport dimension (width or height).
• vmax : 1% of the larger viewport dimension.

Unit Table

Display Values

• block : Takes full width, starts on a new line (<div>, <p>).
• inline : Takes only as much width as needed, stays in line (<span>, <a>).
• inline-block : Likeinline, but allows setting width & height.
• none : Hides the element.
• flex : EnablesFlexbox layout.
• grid : Enables CSS Grid layout.
• table : Makes the element behave like a <table>.
• table-cell : Makes the element behave like a <td>.
• list-item : Makes the element behave like a list (<li>).

Positioning Values

• static : Default value, elements flow naturally in the document.
• relative : Position relative to itsoriginal position.
• absolute : Posite to thenearest positioned ancestor.
• fixed : Position relative to theviewport, stays fixed when scrolling.
• sticky : Sticks to a position until a scroll threshold is met.

Border Styles

• solid : A continuous solid line.
• dashed : A series of dashes.
• dotted : A series of dots.
• double : Two solid lines.
• groove : 3D effect, looks carved into the page.
• ridge : 3D effect, opposite ofgroove.
• inset : 3D effect, makes it look inside the page.
• outset : 3D effect, makes it look like it is coming out.
• none : No border.
• hidden : Similar tonone, but for table elements.

Used to define how elements are positioned on the page.

2.1 Display & Visibility

• display : Controls the display behavior (block, inline, inline-block, flex,grid, none, table, table-cell, list-item,contents).
• visibility : Shows or hides elements without removing them from the layout (visible, hidden,collapse).
• opacity : Controls the transparency of an element (0 to 1).
• visibility : Controls the visibility of an element (visible, hidden, collapse).

2.2 Positioning

• position : Specifies how an element is positioned (static, relative, absolute, fixed,sticky).
• top : Moves the element from the top.
• bottom : Moves the element from the bottom.
• left : Moves the element from the left.
• right : Moves the element from the right.
• z-index : Defines the stack order of elements, determining which one appears on top.
• transform : Applies 2D or 3D transformation to an element (translate, rotate, scale,skew).
• transform-origin : Defines the point of origin for a transformation.

2.3 Overflow & Clipping

• overflow : Handles content overflow (visible, hidden, scroll, auto).
• overflow-x : Handles horizontal overflow (visible, hidden, scroll, auto).
• overflow-y : Handles vertical overflow (visible, hidden, scroll, auto).
• clip-path : Clips an element into a specific shape (circle(), polygon(), ellipse()).
• resize : Allows or prevents an element from being resizable (none, both, horizontal,vertical).

2.4 Float & Clear

• float : Floats an element to the left or right of its container (left, right, none).
• clear : Prevents elements from flowing around floating elements (left, right, both, none).
• clearfix hack : Used to clear floats without modifying HTML

Defines spacing, sizing, and borders of elements.

3.1 Spacing Properties

• margin : Spaceoutside the element (auto, 10px, 5%).
• margin-top : Space above the element.
• margin-right : Space to the right of the element.
• margin-bottom : Space below the element.
• margin-left : Space to the left of the element.
• padding : Spaceinside the element, around content.
• padding-top : Padding above the content.
• padding-right : Padding to the right of the content.
• padding-bottom : Padding below the content.
• padding-left : Padding to the left of the content.

3.2 Border Properties

• border : Defines the border around an element.
• border-width : Sets the thickness of the border.
• border-style : Defines the border type (solid, dashed, dotted, double, none).
• border-color : Sets the color of the border.
• border-top : Defines the top border.
• border-right : Defines the right border.
• border-bottom : Defines the bottom border.
• border-left : Defines the left border.
• border-radius : Rounds the corners of an element.
• border-collapse : Controls border spacing in tables (collapse, separate).
• border-spacing : Defines space between table borders.

3.3 Dimension Properties

• width : Sets the width of an element.
• height : Sets the height of an element.
• max-width : Defines the maximum width an element can have.
• max-height : Defines the maximum height an element can have.
• min-width : Defines the minimum width an element can have.
• min-height : Defines the minimum height an element can have.

3.4 Box Model Behavior

• box-sizing : Defines whetherwidth and height include padding and border.
• overflow : Controls content overflow (visible, hidden, scroll, auto).
• overflow-x : Controls horizontal overflow.
• overflow-y : Controls vertical overflow.
• visibility : Controls element visibility (visible, hidden, collapse).
• clip-path : Clips an element to a specific shape.
• aspect-ratio : Defines the width-to-height ratio of an element.

Flexbox (Flexible Box Layout) is a one-dimensional layout model that allows for responsive designs
and efficient space distribution between items within a container.

4.1 Displaying a Flex Container

• display: flex; : Defines a flex container.
• display: inline-flex; : Defines a flex container but behaves like an inline element.

4.2 Flex Container Properties

4.2.1 flex-direction

• Defines the direction in which the flex items are laid out.
  • row : Items are arranged horizontally (default).
  • row-reverse : Items are arranged horizontally in reverse.
  • column : Items are arranged vertically.
  • column-reverse : Items are arranged vertically in reverse.

4.2.2 flex-wrap

• Controls whether the flex container allows items to wrap onto multiple lines.
  • nowrap : All items will be on one line (default).
  • wrap : Items will wrap onto multiple lines if needed.
  • wrap-reverse : Items will wrap onto multiple lines in reverse order.

4.2.3 justify-content

• Aligns flex items along the main axis (horizontal by default).
  • flex : Items are aligned to the start of the container.
  • flex : Items are aligned to the end of the container.
  • center : Items are aligned to the center of the container.
  • space-between : Items are spaced evenly with the first item at the start and the last item at the end.
  • space-around : Items are spaced evenly with equal space around them.
  • space-evenly : Items are spaced evenly with equal space between and around them.

4.2.4 align-items

• Aligns flex items along the cross-axis (vertical by default).
  • flex : Aligns items to the start of the container.
  • flex : Aligns items to the end of the container.
  • center : Aligns items to the center of the container.
  • baseline : Aligns items to their baseline (for text).
  • stretch : Stretches items to fill the container (default).

4.2.5 align-content

• Aligns multiple lines of flex items along the cross-axis when there is extra space.
  • flex : Lines are aligned to the start of the container.
  • flex : Lines are aligned to the end of the container.
  • center : Lines are aligned to the center of the container.
  • space-between : Lines are spaced evenly with the first line at the start and the last line at the end.
  • space-around : Lines are spaced evenly with equal space around them.
  • stretch : Lines are stretched to fill the container.

4.3 Flex Item Properties

4.3.1 flex-grow

• The ability of a flex item to grow relative to other items in the container.
  • A value of 1 (or more) means the item will grow to fill available space.

4.3.2flex-shrink

• Defines the ability of a flex item to shrink if the container is too small.
  • A value of 1 (or more) means the item will shrink when space is limited.

4.3.3flex-basis

• Defines the initial size of a flex item before any growing or shrinking.
  • Can be set in px,%, em, etc. (e.g., flex-basis: 100px;).

4.3.4flex

• A shorthand for combiningflex-grow, flex-shrink, and flex-basis in one property.
  • flex: 1; : Automatically grows to fill
  • flex: 0 1 100px; : Can grow, can shrink, and has a base size of 100px.

4.3.5align-self

• Allows an individual flex item to override thealign-items value.
  • auto : Inherits fromalign-items (default).
  • flex,flex, center, baseline, stretch : Override default alignment for this item.

4.4 Flexbox Shorthand

4.4.1flex shorthand

• flex-grow flex-shrink flex-basis combined into one property.
  • flex: 1; is shorthand forflex-grow: 1; flex-shrink: 1; flex-basis: 0%;.

4.4.2gap

• Defines space between flex items.
  • gap: 10px; : Sets uniform spacing between items.

4.5 Flexbox Alignment & Ordering

4.5.1order

• Controls the order in which flex items appear in the container.
  • Default is 0. Items with higherorder values appear later in the container.

4.5.2 flex-direction andflex-wrap combination

• Horizontal vs Vertical Layout:Using flex-direction: column; with flex-wrap: wrap; for vertical wrapping.
• Wrapping in Rows/Columns:Combine wrap with flex-direction to control how items wrap in both directions.

4.6 Responsive Flexbox Design

• Media Queries : Combineflexbox with media queries to create responsive layouts that adapt to different screen sizes.
• Flexible Containers: Useflex-grow and flex-shrink to ensure elements adjust as needed on different devices.

4.7 Nested Flex Containers

• Flexbox can be used inside other flex containers, allowing for complex, nested layouts.
• Each flex container inside a parent has its own alignment, order, and flex properties.

CSS Grid Layout is a powerful two-dimensional system for building complex web layouts.
It allows you to arrange content into rows and columns, giving you more control over both horizontal and vertical alignment.

5.1 Displaying a Grid Container

• display: grid; : Defines a grid container.
• display: inline-grid; : Defines a grid container but behaves like an inline element.

5.2 Grid Container Properties

5.2.1grid-template-columns

• Defines the number and size of the columns in the grid.
  • Example:grid-template-columns: 200px 1fr 2fr; (3 columns with different sizes).

5.2.2grid-template-rows

• Defines the number and size of the rows in the grid.
  • Example:grid-template-rows: 100px auto; (2 rows with fixed and automatic heights).

5.2.3grid-template-areas

• Specifies named grid areas for layout, using strings to represent the grid structure.
  • Example:grid-template-areas: "header header header" "sidebar content content";

5.2.4grid-gap (or gap)

• Defines the space between rows and columns in the grid.
  • Example: grid-gap: 10px; (sets both row and column gaps).

5.2.5grid-auto-rows

• Defines the size of rows that are created automatically (for items that overflow).
  • Example: grid-auto-rows: 100px;(sets the height of any automatically created rows).

5.2.6grid-auto-columns

• Defines the size of columns that are created automatically.
  • Example:grid-auto-columns: 1fr; (sets the width of any automatically created columns).

5.2.7justify-items

• Aligns grid items along the horizontal axis (inline axis).
  • start, center,end, stretch (default).

5.2.8align-items

• Aligns grid items along the vertical axis (block axis).
  • start, center,end, stretch (default).

5.2.9place-items

• A shorthand for align-items andjustify-items to align grid items both horizontally and vertically.

5.2.10justify-content

• Aligns the entire grid content horizontally within the grid container.
  • start, center,end, space-between, space-around, space-evenly.

5.2.11align-content

• Aligns the entire grid content vertically within the grid container.
  • start, center,end, space-between, space-around, stretch.

5.2.12place-content

• A shorthand for align-content andjustify-content to align grid content both horizontally and vertically.

5.3 Grid Item Properties

5.3.1 grid-column,grid-column

• Defines where a grid item starts and ends along the column axis.
  • Example:grid-column: 1; grid-column: 3; (spans 2 columns).

5.3.2grid-row, grid-row

• Defines where a grid item starts and ends along the row axis.
  • Example:grid-row: 1; grid-row: 3; (spans 2 rows).

5.3.3grid-column

• A shorthand for grid-columnand grid-column.
  • Example: grid-column: 1 / 3;(spans 2 columns from start to end).

5.3.4grid-row

• A shorthand for grid-row andgrid-row.
  • Example: grid-row: 1 / 3;(spans 2 rows from start to end).

5.3.5grid-area

• A shorthand for grid-row,grid-column, grid-row, and grid-column.
  • Example: grid-area: header;(places an item in a named grid area).

5.3.6justify-self

• Aligns a single grid item horizontally within its grid area.
  • start, center,end, stretch (default).

5.3.7align-self

• Aligns a single grid item vertically within its grid area.
  • start, center,end, stretch (default).

5.3.8place-self

• A shorthand for align-self andjustify-self to align a single grid item both horizontally and vertically.

5.4 Grid Shorthand

5.4.1grid

• A shorthand for combininggrid-template-columns, grid-template-rows, grid-template-areas,grid-gap, justify-items, align-items, etc.
  • Example:grid: 200px auto / 1fr 3fr;
  • (2 rows with fixed and flexible heights, and 2 columns with flexible widths).

5.5 Responsive Grid Design

5.5.1 Media Queries with Grid

• Combine grid with media queries to create responsive layouts that adjust based on screen size.

  • Example:

5.5.2 Auto-Fit and Auto-Fill

• grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  • Automatically adjusts the number of columns based on available space.

5.6 Nested Grid Containers

• You can nest grid containers within each other for more complex layouts.
• Child grid containers behave like individual grids inside their parent grid.

6.1 Transitions

• Used for animations and smooth transitions.

• transition : Shorthand for transition properties.

• transition-property : Defines which property should be animated (all, opacity, background-color).

• transition-duration : Duration of the transition (0.3s, 500ms).

• transition-timing-function : Controls the easing (ease, linear, ease-in-out).

• transition-delay : Adds a delay before transition starts.

6.2 Animations

• animation : Shorthand for animation properties.

• animation-name : Specifies the keyframe animation name.

• animation-duration : Duration of the animation.

• animation-timing-function : Controls animation easing.

• animation-delay : Adds delay before animation starts.

• animation-iteration-count : Defines how many times an animation repeats (infinite, 1, 2).

• animation-direction : Defines the direction (normal, reverse, alternate).

• keyframe

The transform property allows elements to be visually manipulated in 2D or 3D space,
including translation, rotation, scaling, and skewing.

7.1 2D Transformations

• translate(x, y) : Moves an element along the X and Y axes.
• translateX(x) : Moves an element along the X-axis.
• translateY(y) : Moves an element along the Y-axis.
• rotate(angle) : Rotates an element clockwise or counterclockwise.
• scale(x, y) : Resizes an element along the X and Y axes.
• scaleX(x) : Scales an element along the X-axis.
• scaleY(y) : Scales an element along the Y-axis.
• skew(x-angle, y-angle) : Skews an element along the X and Y axes.
• skewX(angle) : Skews an element along the X-axis.
• skewY(angle) : Skews an element along the Y-axis.
• matrix(a, b, c, d, e, f) : A shorthand for multiple transformations in one function.

7.2 3D Transformations

• translate3d(x, y, z) : Moves an element in 3D space.
• translateZ(z) : Moves an element along the Z-axis.
• rotate3d(x, y, z, angle) : Rotates an element in 3D space.
• rotateX(angle) : Rotates an element around the X-axis.
• rotateY(angle) : Rotates an element around the Y-axis.
• rotateZ(angle) : Rotates an element around the Z-axis.
• scale3d(x, y, z) : Scales an element in 3D space.
• perspective(value) : Defines the perspective depth for 3D transformations.

7.3 Additional Transform Properties

• transform-origin : Defines the point around which a transformation occurs.
• transform-style : Specifies how nested elements are rendered in 3D (flat, preserve-3d).
• backface-visibility : Controls the visibility of the back side of a transformed element (visible, hidden).

Responsive design ensures that web pages adapt to different screen sizes and devices using
flexible layouts, images, and media queries.

8.1 Viewport & Scaling

• meta viewport : Controls how a webpage is displayed on mobile devices.
• width=device-width : Sets the viewport width to the device width.
• initial-scale=1.0 : Sets the initial zoom level.

8.2 Flexible Layouts

• max-width : Ensures elements don't exceed a specific width.
• min-width : Sets the minimum width for an element.
• height, min-height,max-height : Controls element height.
• vh (viewport height) &vw (viewport width) : Defines sizes relative to the viewport.

8.3 Media Queries

• @media (max-width: value) : Styles apply when screen width is below a certain value.
• @media (min-width: value) : Styles apply when screen width is above a certain value.
• @media (min-width: value) and (max-width: value) : Styles apply within a range.
• @media (orientation: landscape) : Styles apply only in landscape mode.

8.4 Fluid Typography

• font-size: clamp(min, preferred, max) : Ensures text scales between a min and max size.
• font-size: vw : Adjusts text size based on the viewport width.

8.5 Flexible Grid & Flexbox

• display: flex : Enables flexible layout.
• flex-wrap: wrap : Ensures items wrap in smaller screens.
• display: grid : Enables CSS Grid for responsive design.
• grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) : Creates a flexible grid.

8.6 Responsive Images & Media

• max-width: 100% : Ensures images don't overflow their container.
• height: auto : Maintains aspect ratio when resizing images.
• picture & srcset : Allows different images for different screen sizes.
• object-fit: cover : Ensures media fits its container without distortion.

8.7 Mobile-First vs. Desktop-First

• Mobile-First : Start with small screens, then use min-width media queries for larger screens.
• Desktop-First : Start with large screens, then use max-width media queries for smaller screens.

CSS variables, also known as custom properties,
allow you to define reusable values throughout your stylesheet.

9.1 Defining & Using Variables

• --variable-name : Defines a custom property.
• var(--variable-name, fallback) : Retrieves the value of a variable.

9.2 Scope & Inheritance

• Variables are scoped within the selector where they are defined.
• Declaring variables in :root makes them global.
• Variables inherit values from parent elements unless overridden.

9.3 Updating Variables Dynamically

• Variables can be updated using JavaScript (document.documentElement.style.setProperty).
• Can be modified within :hover,@media, and other dynamic selectors.

9.4 Practical Use Cases

• Theming: Define primary and secondary colors.
• Dynamic Spacing: Store consistent margins and paddings.
• Typography Scaling: Adjust font sizes with variables.
• Light/Dark Mode: Switch themes by modifying variable values.

9.5 Limitations

• Variables do not work insidemedia queries unless redefined within them.
• Cannot be used inside calc() for certain properties like @keyframes.

Advanced CSS techniques for creating dynamic, flexible, and visually enhanced designs.

10.1 Variables (Custom Properties)

CSS variables, also known as custom properties, allow dynamic and reusable styling.

• Declaration:--variable-name: value;
• Usage:property: var(--variable-name, fallback);
• Scope: Variables declared in:root are global; others are local to their selector.
• Updating Variables: Can be changed dynamically using JavaScript or CSS states (:hover, @media).

10.2 CSS Functions

CSS functions enable dynamic calculations, adaptive designs, and reusable styles.

10.2.1calc()

• Performs real-time mathematical operations (+, -, *, /).
• Supports different units (px,%, em, rem, vw, vh).
• Useful for flexible spacing, responsive layouts, and adaptive typography.

10.2.2var()

• Retrieves the value of a CSS variable.
• Allows for dynamic styling with fallback values.
• Used inside properties likebackground, color, width, etc.

10.2.3min(), max(), clamp()

• min(value1, value2, ...) : Chooses the smallest value.
• max(value1, value2, ...) : Chooses the largest value.
• clamp(min, preferred, max) : Ensures a value stays within a specified range.
• Ideal for responsive typography, dynamic layouts, and flexible images.

10.3 Filters and Blend Modes

Enhance visuals using effects and blending techniques.

Filters (filter)

• Applies graphical effects (blur,brightness, contrast, grayscale, hue-rotate,invert, opacity, saturate, sepia).
• Can be combined for multiple effects.
• backdrop-filter applies effectsbehind an element.

Blend Modes (mix-blend-mode,background-blend-mode)

• mix-blend-mode controls how elements blend with those behind them.
• background-blend-mode defines how a background image blends with its background color.

10.4 Clip-path and Masking

Controls element visibility using geometric shapes or images.

10.4.1 Clip-path (clip-path)

• Crops an element to a shape (circle(), polygon(), inset(), ellipse()).
• Useful for custom designs, irregular shapes, and UI elements.

10.4.2 Masking (mask, mask-image)

• Uses an image or gradient to control element visibility.
• mask-composite controls how multiple masks blend.
• Ideal for advanced visual effects like cut-out text or layered transparency.

10.5 CSS Shapes

• Defines non-rectangular layouts usingCSS Shapes.
• shape-outside : Defines wrapping text around shapes (circle(), polygon(), ellipse()).
• shape-margin : Adds space around the shape.
• Works best with floated elements for advanced text wrapping effects.