ePortfolio: CSS Mastery | Prasun Parajuli

🎨 3. Cascading Style Sheets (CSS)

CSS controls the visual presentation of web pages — layout, colors, typography, animations, and responsive behavior. This section demonstrates core CSS concepts with live, interactive examples.

📌 Three Ways to Apply CSS

Inline: <p style="color:red;"> → This text uses inline color.

Internal / External: Best practice uses external stylesheets. This page uses internal & external concepts (embedded & global).

<link rel="stylesheet" href="styles.css">   ← external (reusable)

🎯 Selectors (Class, ID, Combinators)

🔵 This paragraph uses a class selector (.example).

🟢 This uses an ID selector (#unique-selector-demo) – border left accent.

📌 Descendant selector: inside a div → targeted by .demo-container p.

📦 CSS Box Model

🧩 Box Model
Hover → padding/border grow

Every element is a rectangle: content → padding → border → margin.

📏 Flexbox — One-dimensional layout

HTML

CSS

React

Node

✨ Hover items → translateY & shadow. Flex properties: justify-content: center; flex-wrap: wrap;

🔲 CSS Grid — Two-dimensional layout

Grid 1

Grid 2

Grid 3

Grid 4

Grid 5

Grid 6

grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) → responsive columns.

✨ Animations & Transitions

CSS
Anim

⬆️ Button uses transition on hover (background, letter-spacing, scale). Circle uses @keyframes pulseGlow infinite.

🎛️ CSS Custom Properties (Variables)

:root {
    --primary-color: #1a1a2e;
    --accent-color: #e94560;
    --border-radius: 20px;
}

This box uses var(--accent-color) and var(--border-radius) from root.

✅ CSS variables allow dynamic theming and easy maintenance.

🎭 Pseudo-classes (:hover, :focus) & Pseudo-elements (::before)

Hover over me

::before adds an emoji on hover; :hover changes background & padding.

Other pseudo-classes: :first-child, :nth-of-type, :focus (input focus effects).

📱 Responsive Design — Media Queries

🔍 Resize your browser window! Background & text indicator changes based on viewport width.

Media queries apply different styles at breakpoints (e.g., @media (max-width: 680px)). This portfolio also adapts navigation, padding, and grid layout on mobile.

Current viewport indicator: Resize to see change

⚖️ Specificity & Cascade

CSS rules are applied based on specificity: inline > ID > class > element. Important: !important overrides, but use sparingly.

This paragraph has inline color: green but also a class? Inline wins.

→ Result: Inline style (> class) makes text green. Demonstrates cascade priority.

🌈 Gradients & Backgrounds

✨ Linear Gradient (dark to accent)

Radial gradient

💡 CSS brings life to HTML and is essential for front-end and full stack developers. This page demonstrates layout models, animations, responsiveness, and modern techniques used in real-world projects.

⬆ Back to top