CSS

Master CSS to control layout, colors, typography, and responsive design. Learn modern styling techniques used in real-world web interfaces.

95 lessons · 0 examples

CSS Tutorial(49)

CSS is the language used to style and layout web pages. Learn how to control colors, fonts, spacing, and layout with CSS.

CSS Introduction

This introduction explains what CSS is and why it is used. Learn how CSS works together with HTML to build modern websites.

CSS syntax defines how rules are written and applied. Learn about selectors, properties, and values.

CSS selectors are used to target HTML elements. Learn how to select elements by type, class, id, and more.

Learn different ways to add CSS to your web pages. Understand inline, internal, and external CSS methods.

CSS comments are used to explain code and improve readability. Comments are ignored by the browser.

Learn common CSS errors and how to fix them. Understand why styles may not be applied as expected.

CSS colors allow you to style text and backgrounds. Learn about color names, RGB, HEX, and HSL values.

CSS Backgrounds

CSS backgrounds control background colors and images. Learn how to set background images, repeat, and position.

CSS borders are used to style the edges of elements. Learn about border width, style, color, and radius.

CSS margins create space outside elements. Learn how to control spacing around elements.

CSS padding creates space inside elements. Learn how padding affects layout and box size.

CSS Height / Width

CSS height and width properties control element dimensions. Learn fixed, auto, and percentage values.

The CSS box model explains how elements are sized. Learn about content, padding, border, and margin.

CSS outlines are lines drawn outside borders. They do not affect layout or element size.

CSS text properties control text appearance. Learn about alignment, decoration, spacing, and transformation.

CSS fonts define how text looks. Learn how to use font families, sizes, and web-safe fonts.

CSS icons are commonly added using icon libraries. Learn how to style and size icons with CSS.

CSS links allow you to style different link states. Learn how to style hover, active, and visited links.

CSS lists can be styled to remove bullets or customize markers. Learn how to control list appearance.

CSS tables allow you to style rows, borders, and spacing. Learn how to improve table readability.

The CSS display property defines how elements are displayed. Learn block, inline, and none behaviors.

CSS max-width limits element width responsively. Learn why max-width is better than fixed widths.

CSS positioning controls element placement. Learn static, relative, absolute, fixed, and sticky positions.

CSS Position Offsets

Position offsets move positioned elements. Learn how top, right, bottom, and left work in CSS.

CSS z-index controls element stacking order. Learn how overlapping elements are layered.

CSS overflow controls content that exceeds container size. Learn hidden, scroll, and auto values.

CSS float positions elements to the left or right. Learn how float affects layout and text flow.

CSS Inline-block

Inline-block allows elements to flow inline while keeping block properties. Useful for layouts.

CSS alignment controls positioning of elements and text. Learn horizontal and vertical alignment techniques.

CSS Combinators

CSS combinators define relationships between selectors. Learn descendant, child, and sibling selectors.

CSS Pseudo-classes

Pseudo-classes define special element states. Learn how to style hover, focus, and active states.

CSS Pseudo-elements

Pseudo-elements style specific parts of elements. Learn how to use ::before and ::after.

CSS opacity controls element transparency. Learn how opacity affects child elements.

CSS Navigation Bars

CSS navigation bars help structure menus. Learn how to create horizontal and vertical menus.

CSS dropdowns display hidden content on interaction. Learn how to build simple dropdown menus.

CSS Image Gallery

CSS image galleries display images in grids or layouts. Learn basic gallery styling techniques.

CSS Image Sprites

CSS image sprites combine multiple images into one. Improve performance by reducing HTTP requests.

CSS Attr Selectors

Attribute selectors target elements by attributes. Learn powerful selection techniques in CSS.

CSS forms improve usability and design. Learn how to style inputs, labels, and buttons.

CSS counters automatically number elements. Useful for lists and custom numbering.

CSS units define measurement values. Learn px, em, rem, %, vw, and vh units.

CSS Inheritance

CSS inheritance controls how styles are passed to child elements. Learn which properties inherit.

CSS Specificity

CSS specificity determines which rules are applied. Learn how selectors compete in priority.

The !important rule overrides other CSS rules. Learn when and when not to use it.

CSS Math Functions

CSS math functions like calc() allow dynamic values. Create flexible and responsive layouts.

CSS Optimization

CSS optimization improves performance and maintainability. Learn best practices for clean CSS.

CSS Accessibility

Accessible CSS improves usability for all users. Learn contrast, focus, and readable design techniques.

CSS Website Layout

CSS website layout techniques structure pages. Learn common layout patterns and best practices.

CSS Advanced(29)

CSS Rounded Corners

Learn how to create rounded corners using border-radius, including circles, pills, and elliptical shapes.

CSS Border Images

Learn how to use the border-image property to create image-based borders with slicing, repeating, and stretching.

CSS Backgrounds

Advanced background techniques: multiple backgrounds, background-size, background-origin, and background-clip.

Learn how CSS represents colors using keywords, hex, rgb/rgba, and hsl/hsla, plus practical tips for readability and UI.

Create smooth color transitions with linear, radial, and conic gradients using CSS gradient functions.

Learn shadow effects in CSS, including practical patterns and the box-shadow property syntax.

CSS Text Effects

Text overflow, wrapping, vertical writing modes, and text-shadow for common UI text effects.

CSS Custom Fonts

Learn how to use custom fonts with @font-face, supported font formats, and best practices like font-display.

CSS 2D Transforms

Learn 2D transforms in CSS, including translate/rotate/scale, scaling tips, and advanced skew/matrix transforms.

CSS 3D Transforms

Learn CSS 3D transforms, including rotateX/rotateY/rotateZ, perspective, and common 3D UI patterns.

CSS Transitions

Learn how CSS transitions animate property changes smoothly, including timing functions and practical transform hover effects.

Create CSS animations with @keyframes, control timing, iteration, direction, and build common UI patterns like spinners and pulses.

Build clean CSS-only tooltips using :hover, positioning, transitions, and a tooltip arrow.

CSS Image Styling

Style images with borders and rounding, apply visual effects, and build hover overlay patterns with CSS.

CSS Image Modal

Create an image modal (lightbox) using CSS with the :target technique, including overlay, centering, and close button.

CSS Image Centering

Learn multiple ways to center images: inline centering, block centering with margin auto, and perfect centering inside containers using flex or grid.

CSS Image Filters

Apply visual effects to images using CSS filter functions such as blur, grayscale, brightness, contrast, and more.

CSS Image Shapes

Create shaped images with border-radius and clip-path, and wrap text around shapes using shape-outside.

Learn how object-fit controls how images and videos scale inside fixed-size boxes (cover, contain, fill, none, scale-down).

CSS object-position

Control which part of an image or video is visible inside a fixed-size box using object-position.

Learn CSS masking to reveal parts of an element using mask-image, gradients, and mask sizing/positioning.

Build clean CSS buttons, add smooth hover effects, and create aligned button groups with consistent borders and radiuses.

Style pagination links with CSS: basic pagination, active/disabled states, hover effects, and rounded pagination.

CSS Multiple Columns

Create multi-column text layouts using column-count/column-width, control gaps and rules, and manage spanning content.

CSS User Interface

UI-focused CSS features like resize, outline-offset, and user-select, plus practical patterns for better interaction.

Learn CSS custom properties with var(): define variables, override them, use them with JavaScript, and update them in media queries.

Register CSS custom properties with @property to enable type checking, inheritance control, and smooth animations of CSS variables.

Learn how box-sizing changes how width/height are calculated, and why border-box is the modern default for layouts.

CSS Media Queries

Use media queries to create responsive layouts: breakpoints, min/max width, orientation, and user preferences like reduced motion.

CSS Flexbox(4)

Flexbox is a layout model for aligning items in rows or columns. Learn the core concepts: flex container, flex items, axes, and common patterns.

Learn the core Flexbox container properties: display:flex, flex-direction, flex-wrap, gap, and alignment using justify-content and align-items.

Learn the most important flex item properties: order, flex-grow, flex-shrink, flex-basis, the flex shorthand, and align-self.

Flex Responsive

Build responsive layouts with Flexbox using flex-wrap, flexible bases, gap, and media queries for breakpoint control.

CSS Grid(5)

CSS Grid is a two-dimensional layout system for building rows and columns. Learn the core concepts: grid container, tracks, gaps, and placement.

Learn CSS Grid container essentials: defining tracks, controlling gaps, and aligning grid content and items.

Learn how to place and control grid items: explicit placement with lines, named areas, per-item alignment, and ordering layers.

Grid 12-column Layout

Build a classic 12-column layout with CSS Grid: create 12 equal columns, span items, manage gutters with gap, and make it responsive.

Use @supports (feature queries) to apply CSS only when a browser supports a feature—ideal for progressive enhancement with Grid.

CSS Responsive (RWD)(8)

Responsive Web Design (RWD) makes websites adapt to different screens using viewport, flexible grids, media queries, and responsive media.

Use the viewport meta tag to make responsive layouts render correctly on mobile devices.

Build responsive grid layouts using CSS Grid and Flexbox patterns that adapt to screen size.

RWD Media Queries

Use media queries to change layouts and typography at breakpoints with a clean mobile-first approach.

Make images responsive using max-width, object-fit for thumbnails, and patterns that prevent overflow.

Make videos and iframes responsive using aspect-ratio or wrapper techniques for embeds.

Responsive frameworks provide grid systems and components to build consistent layouts faster (e.g., Bootstrap, utility-first CSS).

Responsive templates combine common layout patterns like header/sidebar/content and adapt them with breakpoints.