IONIC - 3.8 Creation of a to do list (4)
Click here for more videos available on our youtube channel !Now that the HTML layout of the to-do list is ready, we move on to the styling in home.page.scss. The goal here is to give the app a cleaner look, with neutral colors and a bit of breathing room around each element. Of course these values are not mandatory — feel free to adapt the colors and spacing to your own taste.
We start with ion-content and change its background-color to a slightly off-white, #f9f9f9, which gives the page a neutral background. We then target the .tasks class, the card around each task, and add a light padding: 10px plus a clean background-color: #fff so each task stands out clearly against the page.
Styling task titles, dates and empty state
For the .task-title class we set margin: 0 and padding: 0, switch the display to inline-block so the title sits nicely next to the checkbox, add a small margin-left: 14px to shift it from left to right, and use font-weight: bold with a font-size: 15px. The color is a light electric blue #3880ff to match Ionic's primary tone.
For the .task-date class we also use margin: 0 and padding: 0, a bold font-weight and a smaller font-size: 11px, which is enough for a secondary line. To push it slightly below the title, we add margin-top: 28px.
The empty-state block uses the .empty class. We give it padding: 10px, text-align: center to properly center the text, a margin-top: 50px so it sits in the middle of the screen, and a basic black font color. Looking at the result, the design is much better than at the start: the off-white background makes each white task card stand out clearly. We test it by inserting a task such as "eat a fruit", and everything displays nicely. The style stays intentionally basic to keep the focus on the structure, but you can play with brighter colors based on your personal taste. That is it for the to-do list project videos — in the next one we will go through a small quiz to review what we learned. See you soon.
Summary
This lesson covers the CSS styling phase of building a to-do list application in Ionic. You'll learn how to apply styling to the main container, individual task items, and buttons using padding, margin, fonts, and colors to create a clean, visually distinct interface with proper spacing and typography.
Key points
- Apply background colors and padding to create visual hierarchy—use neutral off-white (#F9F9F9) for the main container and white for task items
- Use margin and padding values strategically: 10px padding, 14px left margin for offset, 28px top margin for items, 50px top margin for buttons
- Style text with font-weight: bold, custom font sizes (15px), and accent colors (electric blue #3883AF) to distinguish different elements
- Use display: inline-block on list items to create proper visual layout and volume in the form
- Center text alignment for button elements and ensure consistent spacing for a polished appearance
- Customize colors and spacing based on personal preferences—the CSS structure is flexible and encourages personalization
FAQ
What are the main CSS properties used to style the to-do list in this lesson?
The lesson focuses on background-color, padding, margin, font-weight, font-size, color, display (inline-block), text-align, and margin-top properties to style the container, task items, and buttons.
What specific color values and spacing measurements are recommended?
Use #F9F9F9 for a neutral off-white background, #FFFFFF for task items, and #3883AF for electric blue text. Apply spacing values including 10px padding, 14px left margin, 28px top margin for items, and 50px top margin for buttons.
Can I modify the colors and styling shown in the tutorial?
Yes—the lesson emphasizes that CSS styling is about personalization. You can choose different colors and spacing values based on your preferences while maintaining the same CSS property structure and hierarchy.