CSS (Cascading Style Sheets) is the language used to style web applications. In Tadabase, CSS allows you to customize every visual aspect of your application, from colors and fonts to layouts and animations. This article teaches you how to write and apply custom CSS to create unique, branded applications.

CSS controls how HTML elements appear on screen. A CSS rule consists of a selector (what to style) and declarations (how to style it).

Basic CSS Syntax:

selector {
    property: value;
    property: value;
}

Example:

.button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

Selectors target specific elements to style.

Common Selectors:

/* Class Selector */
.my-class {
    color: blue;
}

/* ID Selector */
#my-id {
    font-size: 20px;
}

/* Element Selector */
button {
    border: none;
}

/* Multiple Classes */
.button.primary {
    background-color: green;
}

/* Descendant Selector */
.container .button {
    margin: 10px;
}

/* Child Selector */
.container > .button {
    padding: 5px;
}

Colors:

color: #333333; /* text color */
background-color: #f5f5f5;
border-color: #cccccc;

Fonts:

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;

Spacing:

margin: 20px; /* outside spacing */
padding: 15px; /* inside spacing */
margin-top: 10px;
padding-left: 20px;

Borders:

border: 1px solid #cccccc;
border-radius: 5px; /* rounded corners */
border-top: 2px solid blue;

Sizing:

width: 100%;
height: 300px;
max-width: 1200px;
min-height: 50px;

Application CSS applies to all pages in your app.

How to Add:

1. Go to App Settings
2. Navigate to "Advanced" section
3. Find "Custom CSS" area
4. Write your CSS code
5. Save changes

Example:

/* Change all buttons to blue */
.btn {
    background-color: #3498db !important;
    border-color: #2980b9 !important;
}

/* Customize navigation */
.navbar {
    background-color: #2c3e50 !important;
}

/* Adjust spacing globally */
.component-container {
    margin-bottom: 30px;
}

Page CSS applies only to specific pages.

How to Add:

1. Open page in Page Builder
2. Click Page Settings
3. Find "Custom CSS" section
4. Add page-specific styles
5. Save page

When to Use Page CSS:

• Styles unique to one page
• Testing before global application
• Page-specific layouts
• Overriding app-level styles

Some components allow inline CSS for specific styling.

Example: Rich Text Component

<style>
.custom-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

<div class="custom-card">
    <h3>Featured Content</h3>
    <p>Your content here...</p>
</div>

Use browser developer tools to find element classes:

1. Right-click element in your app
2. Select "Inspect" or "Inspect Element"
3. View HTML structure and classes
4. Identify classes to target
5. Write CSS using those classes

Components:

.td-table /* table component */
.td-form /* form component */
.td-details /* details component */
.td-card /* card component */
.td-chart /* chart component */

Buttons:

.btn /* all buttons */
.btn-primary /* primary buttons */
.btn-secondary /* secondary buttons */
.btn-success /* success buttons */
.btn-danger /* danger buttons */

Forms:

.form-control /* input fields */
.form-group /* form field groups */
.form-label /* field labels */
.form-select /* dropdown fields */

Navigation:

.navbar /* navigation bar */
.nav-item /* nav menu items */
.nav-link /* nav links */
.dropdown-menu /* dropdown menus */

Example 1: Button Styling

/* Custom primary button */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

Example 2: Table Styling

/* Modern table design */
.td-table {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.1) !important;
}

.td-table thead {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    color: white !important;
}

.td-table thead th {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    padding: 15px !important;
}

.td-table tbody tr:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.01) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
}

Example 3: Form Styling

/* Elegant form design */
.td-form {
    background: white !important;
    padding: 30px !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1) !important;
}

.form-label {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.form-control {
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
    outline: none !important;
}

Media queries apply different styles based on screen size.

Syntax:

/* Styles for tablets and smaller */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

/* Styles for mobile phones */
@media (max-width: 480px) {
    .navbar {
        font-size: 14px;
    }
}

Common Breakpoints:

/* Mobile */
@media (max-width: 576px) { }

/* Tablet */
@media (max-width: 768px) { }

/* Desktop */
@media (max-width: 992px) { }

/* Large Desktop */
@media (max-width: 1200px) { }

Hide on Mobile:

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

Show Only on Mobile:

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
}

Stack on Mobile:

.row {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
}

Variables make theme management easier.

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #333333;
    --border-radius: 8px;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.button {
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.success-button {
    background-color: var(--secondary-color);
}

CSS animations add visual interest.

Fade In Animation:

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.component {
    animation: fadeIn 0.5s ease-in;
}

Hover Effects:

.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

Pulse Animation:

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.notification-badge {
    animation: pulse 2s infinite;
}

Linear Gradient:

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Radial Gradient:

.spotlight {
    background: radial-gradient(circle, #ffffff 0%, #f0f0f0 100%);
}

Gradient Text:

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Box Shadow:

.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.card-elevated {
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

Text Shadow:

.hero-title {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Inner Shadow:

.inset-element {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

Corporate Blue:

/* Corporate Blue Theme */
:root {
    --primary: #0066cc;
    --secondary: #004c99;
    --accent: #00aaff;
    --background: #f5f7fa;
    --text: #333333;
}

Modern Purple:

/* Modern Purple Theme */
:root {
    --primary: #6b46c1;
    --secondary: #9333ea;
    --accent: #a855f7;
    --background: #faf5ff;
    --text: #1f2937;
}

Fresh Green:

/* Fresh Green Theme */
:root {
    --primary: #10b981;
    --secondary: #059669;
    --accent: #34d399;
    --background: #f0fdf4;
    --text: #064e3b;
}

Create dark mode styles:

/* Dark mode styles */
.dark-mode {
    --background: #1a1a1a;
    --surface: #2d2d2d;
    --text: #ffffff;
    --border: #404040;
}

.dark-mode body {
    background-color: var(--background) !important;
    color: var(--text) !important;
}

.dark-mode .card {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

Import and use Google Fonts:

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
}

Establish consistent text sizing:

h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { font-size: 2rem; line-height: 1.3; }
h3 { font-size: 1.75rem; line-height: 1.4; }
h4 { font-size: 1.5rem; line-height: 1.4; }
h5 { font-size: 1.25rem; line-height: 1.5; }
h6 { font-size: 1rem; line-height: 1.5; }

p { font-size: 1rem; line-height: 1.6; }
small { font-size: 0.875rem; }

Organize CSS with comments:

/*=====================
    VARIABLES
=====================*/
:root {
    --primary-color: #3498db;
}

/*=====================
    GLOBAL STYLES
=====================*/
body {
    font-family: Arial, sans-serif;
}

/*=====================
    COMPONENTS
=====================*/
.button { }
.card { }

/*=====================
    UTILITIES
=====================*/
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }

Use !important to override Tadabase defaults:

/* Use !important sparingly but necessary for Tadabase */
.btn-primary {
    background-color: #3498db !important;
    border-color: #2980b9 !important;
}

Optimize CSS for performance:

• Minimize complex selectors
• Avoid excessive animations
• Use CSS instead of images when possible
• Combine similar rules
• Remove unused CSS

Debugging techniques:

1. Inspect Element - Right-click and inspect
2. Toggle Styles - Check/uncheck to test
3. Edit Live - Modify CSS in real-time
4. View Computed - See final applied styles
5. Check Specificity - See why styles override

Issue: Styles Not Applying

• Check selector specificity
• Add !important if needed
• Verify correct class names
• Clear browser cache
• Check for typos

Issue: Responsive Not Working

• Verify media query syntax
• Check viewport meta tag
• Test breakpoint values
• Clear cache and test

Comprehensive custom theme:

/*=====================
    MODERN THEME
=====================*/

/* Variables */
:root {
    --primary: #667eea;
    --secondary: #764ba2;
    --success: #10b981;
    --danger: #ef4444;
    --background: #f8f9fa;
    --surface: #ffffff;
    --text: #1f2937;
    --border: #e5e7eb;
    --radius: 12px;
    --shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Global */
body {
    font-family: 'Inter', -apple-system, sans-serif !important;
    background-color: var(--background) !important;
    color: var(--text) !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 12px rgba(0,0,0,0.15) !important;
}

/* Tables */
.td-table {
    background: var(--surface) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
}

.td-table thead th {
    background: var(--primary) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 16px !important;
}

.td-table tbody tr:hover {
    background: #f8f9fa !important;
}

/* Forms */
.form-control {
    border: 2px solid var(--border) !important;
    border-radius: calc(var(--radius) / 2) !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Cards */
.card {
    background: var(--surface) !important;
    border-radius: var(--radius) !important;
    padding: 24px !important;
    box-shadow: var(--shadow) !important;
    border: none !important;
}

/* Navigation */
.navbar {
    background: var(--surface) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    padding: 16px 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 15px !important;
    }

    .btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .td-table {
        font-size: 14px !important;
    }
}

You now understand CSS fundamentals and how to apply custom styling to Tadabase applications. The next article covers built-in themes and how to customize them for your brand.

Hands-On Exercise (To Be Added)

Exercise placeholders will include practical activities such as:

• Writing CSS to change button colors
• Creating a custom table style
• Implementing responsive design for mobile
• Building a complete custom theme

Knowledge Check (To Be Added)

Quiz questions will test understanding of:

• CSS selector types and usage
• When to use !important
• Responsive design with media queries
• CSS best practices and organization