Introduction to CSS in Our Symfony Application

Welcome to the second lesson of our course on building an image generation web application with Symfony! In our previous lesson, we created the HTML structure for our application using Twig templates, setting up the tabs, form elements, and containers that will make up our user interface. While the structure is in place, our application currently lacks visual appeal and usability.

In this lesson, we'll focus on styling our application using CSS (Cascading Style Sheets). CSS is a styling language that allows us to control the appearance of HTML elements, including colors, fonts, spacing, and layout. By adding CSS to our application, we'll transform the basic HTML structure into an attractive, user-friendly interface.

Remember that in a Symfony application, static files like CSS are stored in a directory called public. We've already linked our CSS file in the HTML using the Twig asset function:

<link rel="stylesheet" href="{{ asset('css/style.css') }}">

This tells Symfony to look for a file named style.css in the public/css folder. Now, let's create this file and add our styles to it.

Let's start by styling the basic page layout, including the body element and the main container. This will set the foundation for our application's appearance.

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
}

In this code, we're styling the body element to use a modern sans-serif font stack, with 'Segoe UI' as the primary font. We've set a light gray background color (#f0f0f0) and removed the default margin. We've also added padding to the top and bottom of the page.

The display: flex, flex-direction: column, justify-content: center, and align-items: center properties work together to center our content both horizontally and vertically on the page. The min-height: 100vh ensures that the body takes up at least the full height of the viewport, which helps with the centering.

For the .container class, we've set a white background, added padding for spacing, and used border-radius to round the corners. The box-shadow property adds a subtle shadow effect, giving the container a slight elevation above the background. We've set the width to 100% but limited the maximum width to 600 pixels, which will make our application responsive while preventing it from becoming too wide on large screens.

With these styles in place, our application already looks much better. The content is centered on the page, and the white container stands out against the light gray background.