CSS Fundamentals Demo

A comprehensive guide to modern CSS concepts and techniques

Typography & Font Styling

Serif Typography

Traditional and elegant typeface featuring small decorative strokes called serifs. Ideal for printed materials and formal documents where readability in long texts is essential.

Sans-Serif Typography

Modern and clean typeface without decorative strokes. Perfect for digital interfaces, websites, and applications due to excellent screen readability and contemporary appearance.

Monospace Typography

Fixed-width typeface where each character occupies the same horizontal space. Essential for code editors, terminals, and any context requiring precise character alignment.

CSS Units: Pixels, Em, and Rem

Pixel Units (px) Absolute measurement unit - 16px font size with fixed dimensions that don't scale with user preferences or parent elements.
Em Units (em) Relative to parent element - 1.2em font size that scales based on the immediate parent's font size, creating cascading effects.
Root Em Units (rem) Relative to root element - 1.1rem font size that scales consistently based on the document root, avoiding inheritance issues.

Image Formatting & Styling

Circular Images

Circular formatted image

Rounded Rectangles

Square formatted image

Profile Style

Profile image

Card Thumbnails

Thumbnail image

Demonstrates border-radius, object-fit, and box-shadow properties for professional image presentation

CSS Box Model

Content Area with Padding, Border & Margin
Box Model Calculation: Content (240px) + Padding (40px) + Border (10px) = Total Width: 290px
Understanding the box model is crucial for precise layout control and spacing calculations.

CSS Selectors & Targeting

ID Selector: Targets a unique element using #unique-element selector with highest specificity

Class Selector: Applies styling to elements with .highlight class, reusable across multiple elements

Pseudo-selector Example: This paragraph demonstrates nth-child selector usage

Pseudo-selector Example: Alternating styles applied automatically through CSS rules

Interactive Hover Effect: Mouse over this element to see transition animations and state changes

Flexbox Layout System

Flexible Item
Responsive Layout
Dynamic Sizing
Flexbox Properties: justify-content (horizontal alignment), align-items (vertical alignment), flex-wrap (wrapping behavior), gap (spacing between items), flex (growth/shrink ratios)

CSS Grid Layout System

Grid Item One
Grid Item Two
Grid Item Three
Grid Item Four
Grid Item Five
Grid Item Six
Grid Features: auto-fit (responsive columns), minmax() (flexible sizing), gap (consistent spacing), grid-template-columns (column definitions)

Responsive Design Implementation

Resize your browser window to observe responsive behavior across different screen sizes:

  • Mobile Devices: Single column layout with optimized spacing (< 480px)
  • Tablet Devices: Adjusted grid systems and flexible components (< 768px)
  • Desktop Displays: Full multi-column layout with maximum content density (> 768px)
Responsive Techniques: Media queries, fluid grids, flexible images, relative units, mobile-first approach, progressive enhancement, and adaptive breakpoints