Sign up
Sign up
Still Confused?
Affiliate IconRequest a Callback

Styling Our To-Do List App with CSS

Styling Our To-Do List App with CSS

Now, let’s make it look clean and polished.

In the same src/ folder, open or create App.css and replace the contents with:

/* src/App.css */

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: black;
}

.App {
  text-align: center;
  background-color: black;
  min-height: 100vh;
  padding: 40px 20px;
  color: white;
}

input[type="text"] {
  padding: 10px;
  width: 250px;
  border: none;
  border-radius: 5px;
  outline: none;
}

button {
  margin-left: 10px;
  padding: 10px 14px;
  background-color: #00ffcc;
  border: none;
  border-radius: 5px;
  color: black;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #00ccaa;
}

ul {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}

li {
  background-color: #1e1e1e;
  margin-bottom: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  transition: transform 0.2s;
}

li:hover {
  transform: scale(1.02);
}

input[type="checkbox"] {
  transform: scale(1.3);
  margin-right: 12px;
}

footer {
  margin-top: 40px;
  font-size: 14px;
}

footer a {
  color: #00ffcc;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

This CSS:

  • Sets a dark background
  • Styles the task input, buttons, and list items
  • Adds hover effects for interactivity
  • Keeps the layout responsive and clean

Share

You can share this topic with your family and friends on Social Media.

Share in

Building a To-Do List App Using ReactJS

author

Building a To-Do List App Using ReactJS

MODULE 1 : Introduction
lessonWhat is ReactJS?
lessonWhat is a To-Do list App?
lessonAim of the Project
MODULE 2 : Pre-requisites and Tech Stack Used
lessonBasic Requirements
lessonTech Stack Used
lessonInput and Output of the Project
MODULE 3 : Necessary Concepts
lessonComponents in React
lessonArrow Functions & Event Handling in ReactJS
lessonState & Hooks
lessonHow User Actions Drive UI Changes
MODULE 4 : Step-by-Step Implementation
lessonSetting up the environment
lessonCreate Application Structure (Directory Overview)
lessonStep-by-Step Coding Our To-Do List App
lessonStyling Our To-Do List App with CSS
lessonRun and Test The To-Do List App Locally
MODULE 5 : Deployment
lessonUpload Your Project to GitHub
lessonDeploy Your React App to Netlify
MODULE 6 : Conclusion
lessonLearning Outcomes of Our Project
lessonLive Link & Output Screenshot
lessonMCQs
lessonResources for Further Learning

Building a To-Do List App Using ReactJS

MODULE 1 : Introduction
lessonWhat is ReactJS?
lessonWhat is a To-Do list App?
lessonAim of the Project
MODULE 2 : Pre-requisites and Tech Stack Used
lessonBasic Requirements
lessonTech Stack Used
lessonInput and Output of the Project
MODULE 3 : Necessary Concepts
lessonComponents in React
lessonArrow Functions & Event Handling in ReactJS
lessonState & Hooks
lessonHow User Actions Drive UI Changes
MODULE 4 : Step-by-Step Implementation
lessonSetting up the environment
lessonCreate Application Structure (Directory Overview)
lessonStep-by-Step Coding Our To-Do List App
lessonStyling Our To-Do List App with CSS
lessonRun and Test The To-Do List App Locally
MODULE 5 : Deployment
lessonUpload Your Project to GitHub
lessonDeploy Your React App to Netlify
MODULE 6 : Conclusion
lessonLearning Outcomes of Our Project
lessonLive Link & Output Screenshot
lessonMCQs
lessonResources for Further Learning
Gift IconUnlock Your Exclusive Rewards!

You have exclusive rewards which you can unlock by earning Geekoins. Explore your rewards now!

Explore Rewards