CSS Complete Guide (incl. Animation, Flexbox, Grid & Sass)

Explore how to apply the CSS color property to change text color and the background color to style backgrounds, using hex, rgb, rgba, and hsl formats in inline styles.

Discover css basic selectors—tag name, class, and id selectors—and descendant selectors with practical examples, guiding you to apply styles using internal or external css files.

Learn how to use the css outline property to create outlines around elements, covering outline width, style, color, offset, and shorthand techniques with practical examples.

Learn how to use CSS height and width with pixel and percentage values, contrast fixed versus dynamic units, and manage overflow by applying minimum and maximum height.

Learn how min-height and max-height properties control container size in CSS, preventing overflow and capping height at 200 and 600 pixels, with practical examples.

Learn how CSS overflow manages content spilling from fixed height containers using hidden, scroll, auto, and visible values. Explore overflow-x and overflow-y to control horizontal and vertical scrolling.

Learn how to apply CSS border radius to create curved corners and shapes using individual properties and the shorthand, with px and percent values, including circles and ovals.

Learn how the css float property positions elements side by side using left and right values. Explore how float creates space and enables responsive layouts with practical div examples.

Explore how the CSS clear property prevents floats from overlapping content by clearing left, right, or both sides, with practical examples of left, right, and clear both usage.

Explore CSS clip-path to create circle, ellipse, inset, and polygon shapes by radii and x/y positions, with practical examples of centering and resizing.

Discover how to use the CSS shape outside property with clip path shapes: circle, ellipse, inset, and polygon, to control text flow and reduce whitespace around images.

Learn to prevent text copying with the CSS user-select property, using values auto, none, text, and all, via a live HTML demo.

Explore how to create image and gradient borders with the CSS border-image property, covering border-image-source, border-image-slice, border-image-width, border-image-offset, border-image-repeat, and the shorthand.

Learn how the CSS !important hack changes priority by forcing inline, id, class, and tag selectors to apply, with practical examples using color and inline styling.

Explore CSS font properties, including font size, family, weight, style, variant, and line height, using static and dynamic values like px, percent, em, and rem, plus font shorthand.

Discover how to format text with CSS text properties like text-align, text-align-last, text-transform, text-indent, word-spacing, and letter-spacing, with practical examples for alignment, capitalization, indentation, and spacing.

Explore text decoration properties, including text-decoration-line, color, and style values such as underline, overline, line-through, and solid, dotted, dash, double, wave. Use the shorthand for heading styling with demos.

Explore word wrap and word break in css, learn how break-word and normal help long words, and how break-all breaks by characters, with keep-all as the default.

Explore how the css white-space property governs text wrapping and spaces—covering normal, nowrap, pre, pre-line, and pre-wrap—and observe overflow behavior.

Learn how to use CSS writing-mode and text-orientation to rotate text vertically, and apply values such as upright, mixed, or sideways for Mandarin or Chinese text.

Learn how to split text into multiple columns using the CSS column-count property, and control gaps, rules, width, and column-span with practical examples.

Learn how to use the @font-face rule to embed custom fonts on your web pages, including sourcing fonts, defining a font-family, and applying it with CSS.

Discover how Google fonts reduce server load by serving fonts from Google, embed Montserrat via a link tag, and apply font-family to headings.

Explore how to customize unordered lists with CSS list-style-type, using disk, square, circle, or a custom string and symbols, and adjust placement with list-style-position in real-time.

Learn how the current color value propagates from a parent color to child elements, affecting text, borders, and backgrounds, with practical notes on when not to use it with backgrounds.

Explore CSS hyphens and hyphenate-characters: control automatic word breaks with none, manual (soft hyphens), or auto using language, and customize hyphenation symbols with hyphenate characters.

Explore how padding inline and padding block control spacing from the start, end, top, and bottom, with practical examples using left/right, percent values, and vertical writing mode.

Explore how CSS margin inline and margin block replace traditional left/right and top/bottom margins, using start/end semantics, practical examples, and behavior under different writing modes.

Explore how to apply borders using border-inline and border-block in CSS, compare them with border-left/right, and understand how writing mode changes border orientation.

Learn to use the css background-image property, control background-repeat and background-position, and combine multiple images with the shorthand background, including color options.

Learn how to use the background-clip property to control background color and images across content box, padding box, and border box, including text clipping with transparent text.

Master conic gradient in CSS to create color transitions around a center for the background with multiple colors, degrees, and starting angles, with rotation, center position, and repeating gradients.

Apply the CSS opacity property to make elements and their content semi-transparent from 0 to 1, as demonstrated on a div, image, and text in an HTML document.

Explore the CSS display property and how it shapes rendering and layout using values such as none, inline, block, inline-block, and list-item.

Create a basic HTML layout with header, menu, content, sidebar, and footer using core CSS properties learned earlier. Use floats and box-sizing to build a simple static, non-responsive page.

Explore CSS position properties, including static, relative, absolute, fixed, and sticky, and learn how left, right, top, and bottom move elements within their containers.

Learn how CSS z-index controls the stacking order of positioned elements, using absolute positioning and top/left coordinates to arrange boxes A, B, C, and D.

Master CSS media queries to create responsive designs by targeting screen breakpoints with max-width and min-width, exploring print, screen, and speech types, and adapting layouts for mobile, tablet, and desktop.

Master CSS table styling by applying properties like border-spacing, border-collapse, vertical-align, caption-side, empty-cells, and table-layout to control borders, spacing, alignment, captions, and overall table structure.

Master the CSS resize property to adjust a div’s width and height in horizontal, vertical, or both directions. See how overflow enables resizing and how resize none disables it.

Explore how the CSS object-fit property resizes images or videos to fit containers while preserving aspect ratio using values like fill, contain, cover, none, and scale down.

Explore how display: flow-root fixes float containment by making a parent establish a new block formatting context, eliminating overflow and clear fix workarounds and stabilizing layout.

Explore how to use the prefers-color-scheme media query to tailor CSS for light and dark modes, adapting background and text colors based on the user's system color scheme.

Discover how to use the CSS display-mode media query to switch styles for browser, full screen, and minimal UI, applying different colors and layout changes.

Master CSS print media by designing for print and screen, using link tag with print.css, @media print, and hiding header, nav, and sidebar to print only the content.

Explore the CSS @page at-rule for print media, setting margins and size, adding page breaks, and targeting first, left, and right pages with pseudo-classes.

Learn how to control print layouts using CSS break before, break after, and break inside, with page and avoid values to manage page breaks for headings and tables.

Learn CSS measurement units, from absolute fixed pixels to relative em and rem, plus viewport units (vw, vh, vmin, vmax). See how parent and root font sizes drive sizing.

Explore CSS viewport units, including vw, vh, vmax, and vmin, and learn how they relate to the browser window, not the parent element, with practical examples and differences from percentages.

Explore how the CSS calc() function performs arithmetic to adjust widths, paddings, background positions, and centering, including responsive layouts with 100vh minus header and footer heights.

Min() function chooses the smallest value among options like 50% and 500px to create dynamic widths without media queries, and can be applied to width, margin, padding, and numeric properties.

Explore CSS pseudo classes, including first-child, last-child, nth-child, nth-last-child, nth-of-type, and only-child, with practical examples in HTML lists and paragraphs.

Master CSS pseudo-classes such as :first-of-type, :last-of-type, :empty, :not, :lang, and link states (:link, :hover, :visited, :active) to style specific elements like li, span, and a in real HTML.

Explore the remaining CSS pseudo-classes including read-only, read-write, valid, invalid, default and root; see practical demonstrations on input fields, checkboxes, radios, and selects with borders and colors.

Explore the CSS fullscreen pseudo class, toggle a div to fullscreen with JavaScript, and apply fullscreen styles (background, font size) and targeted changes (paragraph color), including the not fullscreen variant.

Explore how the is() pseudo class targets multiple elements across containers with a single selector, reducing CSS size and boosting page speed for headings, paragraphs, and hover.

Learn how CSS has pseudo class selects a parent element based on its children, with examples like h1:has(span) and p:has(b), and apply underline via direct and class-based selectors.

Explore CSS pseudo elements in depth, focusing on first letter, first line, selection, and placeholder selectors, with practical examples and how to apply them in HTML.

Explore how to customize list markers with the marker pseudo-element using the ::marker selector in css to color markers separately from text, with practical examples for ul and li.

Learn to style the file input button using the file-selector-button pseudo selector, customizing background, border, padding, and text color with practical HTML and CSS examples.

Master css counters by learning counter-reset and counter-increment, using before and content to auto-number sections and subsections, with numeric, alphabetic, and roman styles.

Learn to use caret-color to change the cursor in input fields and text areas. Apply hex and rgba formats; auto yields the default black, and transparent hides the caret.

Learn how to use the CSS @import rule to include one CSS file in another, control media types like print and screen, and apply styles across a page.

Learn how to use icon fonts like Font Awesome in web pages, linking fonts, choosing solid versus other styles, and applying icons via HTML, CSS, and CDN for faster loading.

Explore CSS scrollbar styling using WebKit prefix and pseudo elements for scrollbar, thumb, track, and corner, then apply width, colors, gradients, borders, and shadows in Chrome, Safari, and Opera.

Explore how to implement smooth scrolling with the CSS scroll-behavior property, applying it to the HTML element or specific containers to create seamless transitions between internal page sections.

Explore CSS scrollbar styling by learning scrollbar color, width, and gutter, with practical examples across Chrome, Safari, and Firefox and hands-on demonstrations.

Explore how to use the aspect-ratio property to create perfect squares and responsive images, experiment with 1:1, 1:2, and 2:1 ratios, and avoid using both width and height properties.

Explore the CSS filter property to apply effects such as none, blur, brightness, contrast, drop shadow, grayscale, and URL for SVG images, with a live VS Code and browser demo.

Explore how to apply the CSS backdrop filter to an inner div over a background image, using blur, brightness, contrast, hue rotate, invert, sepia, saturate, and a hover transition.

Learn how to use CSS transform scale to resize elements in two dimensions, using scale, scaleX, and scaleY to adjust width and height with examples like 2x, 3x, and 0.5.

Explore CSS 2D transformation with transform and skew variants, tilt elements along x and y axes, and use transform-origin with percentage or pixel values for rotation points and animation prep.

Master css 3d transformation by learning rotate x, rotate y, rotate z, and rotate 3d. Explore perspective and transform origin through practical demos.

Learn CSS transform 3D techniques using translate x, translate y, translate z, translate 3D, and rotate x/y, with the transform property to create dynamic 3D effects.

Learn to apply CSS 3D transformations with scale x, scale y, scale z, and scale 3D, and adjust transform origin to control the 3D scaling effect.

Learn how CSS perspective creates a 3d look by applying perspective on the container and rotating a div on hover along the x axis, with perspective-origin guiding the viewpoint.

Discover how the CSS backface-visibility property works with transform to hide or reveal the back face during 3D rotation, using visible and hidden values.

Design a CSS animated link button that slides on hover and changes text color, using an anchor with class btn, inline-block layout, a border, and an after pseudo-element with transitions.

Learn to build an editable animated text effect with CSS glow and a mirror reflection, using contenteditable, CSS animation, and box-reflect for a creative web design.

Design an animated eyes follow mouse cursor project with CSS and JavaScript, using flexbox layout and grid concepts, hover mouth changes, and smooth transitions.

Create a 3D wave circle loader with CSS animation, using 15 spans, perspective, and translateZ to form a wave while staggered delays produce the motion.

Learn to build a CSS 3D layered image hover effect by stacking images in a container and applying transform, opacity, and transition on hover to create a 3D depth.

Create a 3d rotation animation using css transforms and perspective. Build a box with div and span elements, apply rotateX and rotateY, and run a 5s infinite animation.

Create an animated rain effect under a cloud by duplicating spans with the rain class, using CSS variables for random durations and a keyframed translateY animation.

Explore how CSS grid creates a two-dimensional layout using a grid container with display: grid, replacing float layouts and boosting code readability, without relying on frameworks.

learn to control spacing in css grid with grid row gap, grid column gap, and the grid gap shorthand, using practical pixel values like 10px, 20px, and 30px.

Discover how to name and position grid items with grid area and grid template areas in CSS grid, implementing header, menu, boxes, sidebar, and footer across a three-column layout.

Explore how the CSS grid minmax function controls row and column sizing, using max-content and min-content to dynamically adjust height and width for responsive layouts.

Demonstrate implicit and explicit grid by defining two columns with repeat, three rows of 100px, and a 20px gap, then control implicit behavior with grid auto rows, columns, and flow.

Explore how CSS grid auto-fill and auto-fit control column creation with minmax and repeat, enabling responsive layouts and adaptive item placement.

Explore fit-content in CSS grid to size columns with max widths like 200px and 400px, and use minmax with min-content to manage grid cell height.

Discover how the CSS grid order property repositions grid items to specific positions, including moving the first item to the sixth place and understanding the default value.

Learn how to create overlapping grid items in CSS grid, control their stack order with z-index, and position and align them using grid column/row properties and alignment rules.