Welcome to the second lesson of our course on building an image generation web application with PHP! In the previous lesson, we created the foundational HTML structure for our application using PHP, including the main layout, tab navigation, form elements, and containers for displaying images and history. While the structure is in place, our application currently lacks visual appeal and usability.
In this lesson, we'll focus on improving the appearance of our application by adding a style layer. This will help transform our basic HTML structure into an attractive, user-friendly interface.
In a typical PHP project, static files such as stylesheets are stored in a folder called public or assets. In our project, we will place our stylesheet in a folder named public and link it in our PHP-generated HTML.
Here’s how you can link a stylesheet in your PHP template:
This tells the browser to load the style.css file from the public folder at the root of your project. Now, let's create this file and add our styles to it.
First, create a file named style.css inside your public folder. This file will contain all the styles for your application.
Here is an example of what you can add to your style.css file to style the main layout, navigation tabs, form elements, and image display areas:
Explanation: This block styles the <body> element. It sets a modern, readable font, a light gray background, and removes default margins. The body uses Flexbox to center its content both vertically and horizontally, with padding at the top and bottom for spacing.
Explanation: The .container class creates a white card-like area for your app’s content. It adds padding inside, rounded corners, and a subtle shadow for depth. The width is responsive, but never exceeds 600px.
Explanation: The .tabs class arranges the tab buttons in a row and centers them horizontally, with space below for separation from the rest of the content.
Explanation: styles the navigation tabs, giving them padding, a blue background, white text, and rounded corners. The hover effect lightens the blue for interactivity.
Make sure your main PHP template includes the link to the stylesheet. Here is an example of how your main template might look:
This template includes the stylesheet and uses the class names and IDs referenced in the style.css file. The structure matches what you created in the previous lesson, so you can simply add the stylesheet link and the new CSS file.
To reinforce what you've learned, try the following:
- Modify the colors, padding, or font in your
style.cssfile and observe how the appearance of your application changes. - Experiment with the layout by adjusting the
max-widthof the container or the padding of the form elements. - Try adding your own styles to further customize the look and feel of your application.
By experimenting with these styles, you'll gain a better understanding of how the visual layer works in your PHP web application.
In the next lesson, we will add interactivity to our application so users can switch between tabs and interact with the form. For now, enjoy your newly styled application!
