Home
Javascript
Apply Styles to the Application

Apply Styles to QR Code Generator Application

The next step is to add styles to each element to make it visually appealing using CSS. We can create n styling files one for each component. In this project, we will create two CSS files, one for the QrGenerator component and another for the App component.

Modify the QrGenerator component to add styling for each element. Using the className attribute, we can match the styling to the element. Make sure to import the style file into the component.

// QrGenerator.jsx



import "./QrGenerator.css";



function QrGenerator() {

  return (

    <div className="qr-generator">

      <div className="input-container">

        <input

          type="text"

          id="input"

          placeholder="Eg: https://google.com/ "

        />

        <button className="submit">

          Generate

        </button>

      </div>

      <div className="display-container">

        <img src="/" alt="QR code" id="qr" />



        <a className="download-btn" href={qrCode} download="qrcode.png">Download QR Code</a>

      </div>

    </div>

  );

}



export default QrGenerator;

The next step is to create a styling file for QrGenerator. Create a file in the component folder QrGenerator.css. And write styles for each element.

/* QrGenerator.css */



/* Applying style for the body */

body{

    background-color: rgb(1, 46, 66);

    color: white;

}



/* Main container for QR generator */

.qr-generator{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

}



/* Input container */

.input-container{

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    padding: 10px;

    margin: 35px 5px;

}



/* Input[text] field */

#input{

    width: 25rem;

    height: 50px;

    padding: 1rem;

    border-radius: 15px;

    border: 2px solid rgb(0, 0, 0);

}



/* QR generate button */

.submit{

    width: max-content;

    height: 50px;

    background: none;

    border: none;

    font-size: 1.5rem;

    font-weight: bold;

    color: white;

    cursor: pointer;

}



/* Hover style for generate button */

.submit:hover{

    color: rgb(83, 251, 12);

}



/* Display container */

.display-container{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2rem;

}



/* QR code image */

.qr{

    height: 5rem;

    width: 5rem;

}



/* Download button */

.download-btn{

    width: max-content;

    text-decoration: none;

    color: rgb(22, 203, 34);

    align-content: center;

    padding: 10px;

    border-radius: 25px;

    height: 50px;

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

}



/* Download button hover feature */

.download-btn:hover{

    color: white;

}

Now, let’s add some styling to the App component.

// App.js

import "./App.css";

import QrGenerator from "./components/QrGenerator";

function App() {

  return (

    <div className="App">

      <h1>QR Code Generator</h1>

      <QrGenerator />

      <a href="https://www.guvi.in/" className="copywright">

        Made by Guvi💚

      </a>

    </div>

  );

}



export default App;

Modify the App.css file to include new stylings.

/* App.css */



*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: Georgia;

}



.App{

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100vh;

}



.copywright{

  color: white;

  text-decoration: none;

  font-size: 1rem;

  margin-top: 20px;

  top: 0%;

  bottom: 100%;

}

Once you add the styling, the application will look like the below output.

Recommended Handbooks

4.7

C++ Handbook

Level up your programming skills with our C++ Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

5966

3 hrs

4.7

Python Basics Handbook

Level up your programming skills with our Python Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

6078

3.5 hrs

4.6

Javascript Handbook

Level up your programming skills with our JavaScript Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

5752

2 hrs

Build Your Stopwatch Using ReactJS

Start your first project in React JS by building an interactive stopwatch application.

English

2 hrs

Building a Random Joke Generator Using ReactJS

Build a React app that fetches and displays random programming jokes using JokeAPI. Simple, fun, and perfect for beginners learning API calls and state management.

English

0.5 hrs

Build a Character Counter in React JS

Start your first project in React JS by building an interactive character counter application.

English

1.5 hrs

Build a Birthday Reminder App using React JS

Start your first project in React JS by building a dynamic Birthday Reminder app that uses components and state to manage and display a list of birthdays.

English

1.5 hrs

Building Random Password Generator using ReactJS

A React-based app to generate strong, customizable passwords with copy-to-clipboard support. Live and responsive via Netlify.

English

0.5 hrs

Temperature Converter Project in React

A beginner-friendly React app that converts temperatures between Celsius, Fahrenheit, and Kelvin with real-time results and clean CSS styling. Live on Netlify.

English

0.5 hrs

Building a To-Do List App Using ReactJS

Build a React To-Do List App that lets users add, edit, complete, and delete tasks in real-time. Clean UI, no backend, and perfect for mastering React basics.

English

0.5 hrs

Building a Weather App Project Using ReactJS

Build a React app that fetches and displays real-time weather data with animated icons, live clock, and a sleek UI. Great for beginners to learn React, APIs, and state management.

English

0.5 hrs

Building a Quiz App in ReactJS

Build a React Quiz App with category selection, random questions, and a live scorecard. Clean UI, no backend, and perfect for mastering React fundamentals.

English

0.5 hrs

Building a GenZ Carousel App in React

Build a Gen-Z Image Carousel App with uploads, animated slides, and thumbnail navigation. No backend needed—perfect for learning React, hooks, and styling basics.

English

0.5 hrs

ReactJS Projects

Learn ReactJS by building projects that mirror real-world applications. Strengthen your skills with step-by-step guidance and hands-on coding experience.

English

2 hrs

Apply Styles to QR Code Generator Application

Contents

Build Your QR Code Generator using React JS

Recommended Handbooks

C++ Handbook

Python Basics Handbook

Javascript Handbook

Build Your Stopwatch Using ReactJS

Building a Random Joke Generator Using ReactJS

Build a Character Counter in React JS

Build a Birthday Reminder App using React JS

Building Random Password Generator using ReactJS

Temperature Converter Project in React

Building a To-Do List App Using ReactJS

Building a Weather App Project Using ReactJS

Building a Quiz App in ReactJS

Building a GenZ Carousel App in React

ReactJS Projects