← Back to Tutorials
Getting Started
8 min read Beginner
🎨 STYLING TUTORIAL

Make Your PHPue App Beautiful

Learn different ways to style your PHPue applications - from global styles to component-scoped CSS.

This Is What You'll Create

A beautiful, modern card component with hover effects and animations

🎨 Style Your PHPue App

Learn how to make your PHPue applications look absolutely stunning with modern CSS and design techniques.

🌈 Gradients & Colors
✨ Animations
📱 Responsive Design
🎯 Modern Layouts

🌍 Method 1: Global Styles (Recommended)

📁

External CSS File

Create a global stylesheet that all your views and components can use.

✅ Best For:

• Consistent design system
• Reusable components
• Performance (cached)
• Team projects

1 Create assets/css/styles.css 

.styling-card {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    border-radius: 20px;
    padding: 40px;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 15px 35px rgba(238, 90, 36, 0.3);
    max-width: 500px;
    margin: 20px auto;
    text-align: center;
}

.styling-card h2 {
    margin: 0 0 20px 0;
    font-size: 32px;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.styling-card p {
    margin: 0 0 30px 0;
    opacity: 0.95;
    line-height: 1.6;
    font-size: 18px;
}

.styling-card button {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.4);
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.styling-card button:hover {
    background: rgba(255,255,255,0.35);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.style-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.style-feature {
    background: rgba(255,255,255,0.15);
    padding: 16px 12px;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.2s ease;
}

.style-feature:hover {
    transform: scale(1.05);
}

.emoji {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

2 Link in App.pvue header

💡 Important: Make sure your assets/ folder is in the root directory for production! 

<header>
    <link rel="stylesheet" href="/assets/css/styles.css">
</header>

📄 Method 2: App.pvue Header Styles

⚡

Global Styles in App.pvue

Define all your styles directly in App.pvue header - available everywhere.

✅ Best For:

• Small projects
• Quick prototyping
• Single-file setup
• Learning phase 
<header>
    <style>
        .styling-card {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
        border-radius: 20px;
        padding: 40px;
        color: white;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        box-shadow: 0 15px 35px rgba(238, 90, 36, 0.3);
        max-width: 500px;
        margin: 20px auto;
        text-align: center;
    }
    /* ... styles ... */
    </style>
</header>

🎯 Method 3: View-Scoped Styles

🔒

Styles Specific to One View

Add styles in the view's header - only available for that specific page.

✅ Best For:

• Page-specific styles
• Avoiding style conflicts
• Isolated components
• Experimental designs 
<!-- In your view file (e.g., views/styled-page.pvue) -->

<header>
    <style>
    .styling-card {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
        border-radius: 20px;
        padding: 40px;
        color: white;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        box-shadow: 0 15px 35px rgba(238, 90, 36, 0.3);
        max-width: 500px;
        margin: 20px auto;
        text-align: center;
    }
    /* ... styles ... */
    </style>
</header>


<template>
    <div class="styling-card">
        <!-- Your beautiful styled content -->
            <div class="styling-card">
                <h2>🎨 Style Your PHPue App</h2>
                <p>Learn how to make your PHPue applications look absolutely stunning with modern CSS and design techniques.</p>
                
                <div class="style-features">
                    <div class="style-feature">
                    <span class="emoji">🌈</span>
                    Gradients & Colors
                    </div>
                    <div class="style-feature">
                    <span class="emoji">✨</span>
                    Animations
                    </div>
                    <div class="style-feature">
                    <span class="emoji">📱</span>
                    Responsive Design
                    </div>
                    <div class="style-feature">
                    <span class="emoji">🎯</span>
                    Modern Layouts
                    </div>
                </div>
                
                <button onclick="alert('Let\'s make your app beautiful! 🎨')">
                    CTA
                </button>
            </div>
    </div>
</template>

⚠️ Method 4: Component Inline Styles (Use Carefully)

🚨

Inline Styles in Components

Components don't have headers, so you can put styles directly in template.

⚠️ Use With Caution:

• Style duplication: Each component instance repeats the same CSS
• Poor performance: Larger HTML files and slower rendering
• Hard to maintain: CSS scattered across multiple files

💡 Better alternatives: Use global styles, view scoped styles or create component-specific CSS files. 

<!-- In a component file -->
<template>
    <style>
    .styling-card {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
        border-radius: 20px;
        padding: 40px;
        color: white;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        box-shadow: 0 15px 35px rgba(238, 90, 36, 0.3);
        max-width: 500px;
        margin: 20px auto;
        text-align: center;
    }
    /* ... styles ... */
    </style>

    <div class="styling-card">
        <!-- Component content -->
    </div>
</template>

🏆 Styling Best Practices

🌍

Global Styles

Use for design system, reusable components, and team projects

assets/css/styles.css
🎯

View-Scoped

Use for page-specific styles and avoiding conflicts

<header><style></style></header>
🚨

Inline Styles

Avoid in components - causes duplication and performance issues

<template><style></style></template>
🎨

You're Now a PHPue Styling Pro!

You've learned all the ways to style your PHPue applications and when to use each method.

Quick Reference:

✓ Global CSS files
✓ App.pvue styles
✓ View-scoped styles
✓ When to avoid inline
More Tutorials Documentation