How to add CSS to your application

 

In this episode of Build It With Tim, we'll dive into the world of CSS customization within your Tadabase applications. Our goal is to introduce you to the fundamentals of using CSS and custom CSS to enhance the appearance of your applications. We'll explore various aspects, helping you understand where and how to apply CSS effectively.

The Basics of CSS: CSS, or Cascading Style Sheets, is a fundamental tool for customizing the look and feel of your Tadabase applications. We started by discussing the importance of understanding CSS selectors, classes, and IDs. These are essential elements that allow you to target specific components on your page for customization.

Areas to Apply CSS: We walked you through the different areas within Tadabase where you can apply CSS:

1. Global CSS in App Settings: The most global area where you can add CSS is in your app settings under the custom header/footer code. Changes made here will apply across the entire application. Wrap your CSS inside style tags in this section.

2. Page Layouts and Pages: You can apply CSS at the page layout level, which will affect every page within that layout. For more specific changes, you can add CSS directly to individual pages.

3. Custom Classes and Inline CSS: Tadabase allows granular control through inline CSS and custom classes. You can add custom CSS classes to columns, rows, and components, enabling targeted customization.

CSS Selectors and Inspecting Elements: We emphasized the importance of understanding CSS selectors. You can identify specific elements on your page by inspecting them, allowing you to pinpoint the exact components you want to style. By using classes and IDs, you can ensure your styles apply to the right elements.

Important Considerations: We discussed the use of the !important rule, which ensures that your custom CSS takes priority over existing styles. This is particularly useful when you need to override default styles or conflicting CSS.

Loading External Stylesheets: Additionally, we explored the Resource tab in the custom header/footer code section. This tab allows you to load external CSS files via a URL, enabling you to apply predefined styles to your application.

Tools for Real-time CSS Editing: Lastly, we introduced the Live CSS browser extension, a valuable tool for real-time CSS editing. This extension allows you to experiment with CSS directly in your live application, providing instant feedback and ensuring your changes align with your vision for the application's appearance.

By understanding these concepts and utilizing the mentioned tools and techniques, you can take your Tadabase applications to the next level in terms of visual customization. We encourage you to explore further resources on CSS to deepen your knowledge and refine your skills in creating visually appealing and unique applications.

Thank you for joining us in this episode of Build It With Tim. We hope you found this introduction to CSS customization helpful and inspiring for your Tadabase projects. Stay tuned for more exciting tips and tutorials in our future episodes.

Happy building!

Features Discussed:

1. Custom Header/Footer (Time: 2:50)
   Learn about the different areas to add custom CSS within your application.
2. Global CSS (Time: 3:02)
   Learn how to apply CSS globally across your application using the settings in the Tadabase platform. For example, you'll explore how to use the design tab, assign custom CSS classes, and apply styles to rows, columns, or components without specifying elements, making it easier to manage the visual design of your app.
3. CSS Classes (Time: 4:02)
   Learn how to utilize the page builder to inspect and modify elements on the page. For instance, you'll learn how to use the developer tools to target specific elements like columns or components and apply styles using IDs or custom classes, ensuring precise control over your app's appearance.
4. Custom Classes and Inline CSS (Time: 5:20)
   Understand the importance of custom CSS classes and inline CSS for styling specific elements. For example, you'll see how to create classes for different fields, modify styles using inline CSS, and how to use the "important" declaration to override default styles, giving you full control over your application's visual customization.

 

---

Transcript Summary

Introduction

Hey everybody, this is Build It with Tadabase. On today's episode, we are learning fun stuff with CSS. We’re going to talk about an introduction to how you can use CSS or custom CSS inside your Tadabase application. The goal here is to get our feet wet on how we can add more advanced customization, like changing the background color of a page, or eventually doing something more complex. Understanding some basics today will help us with that in the future.

Overview

Some of the things we’ll cover today include:

• Exploring Tadabase as a platform and the areas where you can apply CSS.
• How to find CSS selectors and understand the difference between default classes and custom classes.
• The use of !important in CSS and why you might need it.
• Loading external stylesheets.

Useful Tool: Live CSS

Before we dive into the platform, I want to show off a browser extension I use frequently called Live CSS. If you search for Live CSS in the Chrome Web Store, you’ll find it. I believe there’s also a Firefox version, though I’m not 100% sure. This tool is compatible with Chrome and Microsoft Edge, and I highly recommend it. It lets us add CSS live inside of your application, so you can see changes happening right away, ensuring you're on the right path with your CSS.

Adding CSS in Tadabase

Global CSS in App Settings

The most global area to add CSS is in your app settings, under the custom header/footer code. Anything entered here will apply across the entire application. For example, if you wanted to change the background color for all pages, you could add it here. Since we’re working in the header area of the app, you need to wrap your CSS inside a <style> tag.

CSS in Page Layouts

The next place to add CSS is inside a page layout. In addition to page layouts, you can also add CSS directly to individual pages using the CSS tab at the top of the screen. CSS added to a page layout will apply to every page within that layout. If you want CSS specific to one page, add it to the CSS tab of that page.

Inline CSS and Custom Classes

For more granular control, you can add CSS directly to components, rows, or columns via the design tab. This is considered inline CSS. You don’t need to specify the element you’re applying CSS to because it’s inherited by editing the design tab. You can also add custom CSS classes here, which can then be used as selectors throughout Tadabase.

Assigning CSS to Fields

You can also assign CSS to individual fields within a component. For example, you can give a field a CSS class like client-name and then style that class as needed.

Finding Selectors and Applying CSS

To find selectors, inspect the page using your browser’s developer tools. Right-click on an element to see its classes and structure. For example, you can find classes like row, column, or data-table and use them to apply CSS.

Targeting Elements by Class or ID

You can target elements by class or ID. For instance, using the .my-column class will apply CSS to every element with that class. If you want to target a specific element, you can use its unique ID. When using a class, prefix it with a period (.), and when using an ID, prefix it with a hash (#).

Understanding !important

Sometimes, your CSS changes might not apply as expected. This could be due to the order in which CSS is loaded or because another style has priority. The !important rule ensures that your CSS takes priority over other conflicting styles.

Loading External Stylesheets

In the custom header/footer code section of your app settings, there’s a resources tab where you can load external files like stylesheets. You can decide whether to load the file in the header or footer. This is useful if you want to apply an external theme or additional styles across your application.

Conclusion

That’s it for today’s video. Even as an introduction, there’s a lot to talk about and learn when it comes to CSS and customizing the appearance of your application. If this interests you, I highly recommend browsing the web for resources on how CSS works and the basics. Hopefully, in conjunction with this video, you now have a decent understanding of where to apply CSS, why you would pick a certain location, and some tools to help you configure and test your CSS.