“Attractive things work better”—these words from well-known usability expert Don Norman are certainly applicable to modern web development. Today, dev teams must focus as much on the visual appeal of a web project as they do on its functionality. CSS styling plays a crucial role in meeting key design requirements, ensuring that web applications are not only aesthetically pleasing but also user-friendly and engaging.
In this article, we’ll explore the significance of CSS styling in web design, its increasing importance in modern web apps, and how DHTMLX UI components empower developers to achieve diverse styling goals. In addition, we’ll also share some practical tips to enhance the developer’s styling experience with DHTMLX.
CSS Styling as a Core of Web App Design
Web app design is the process of creating the visual and interactive aspects of a web application and CSS styling is an indispensable part of this process. CSS styling helps transform raw HTML into visually appealing and easy-to-navigate UIs. Web developers use CSS to achieve the following goals:
- enforcing visual consistency
- aligning design with brand identity
- improving readability and accessibility
- enhancing responsiveness
To put it briefly, web app design defines the blueprint for web project design, while CSS styling serves as a toolset for bringing design ideas to life.
Why Flexible CSS Styling Matters in Modern Web Development
We at DHTMLX have been following all significant changes affecting web development for years to keep our JavaScript UI components up to date with the latest requirements. It is a constantly changing environment, where some trendy things of today may be gone and forgotten tomorrow. However, some fundamental things like CSS styling remain essential in web development, regardless of how technologies evolve.
Taking into account web development trends of recent years and our long-standing experience in the industry, we can say for sure that businesses and dev teams now care about the visual design of web applications more than ever before.
When exploring modern web development trends, you are likely to encounter popular concepts such as dark mode, animations, modern layout techniques, etc. The increasing focus on visual design is largely attributed to the rapid evolution of the CSS landscape. In recent years, the CSS ecosystem has been enriched with a wide range of great features like Subgrid, :has(), variables, container queries, etc., enabling dev teams to solve problems that previously required JavaScript workarounds. The respondents of the latest State of CSS survey named their favorites among new CSS features:
Source: State of CSS 2025
The survey also says that some highly-anticipated features like conditional logic, mixins, and masonry layouts are coming soon.
High requirements for the visual part of modern web apps force dev teams to look for instruments to ensure flexible styling. We also see a high demand for strong styling capabilities among DHTMLX users and do our best to meet this requirement. Last year, our top JavaScript UI components (Gantt, Scheduler, Grid, Diagram) received a serious boost in this aspect. Let us delve deeper into this topic.
Exploring DHTMLX CSS Styling Capabilities
When choosing popular DHTMLX libraries to add advanced functionalities to a web project, web developers can be sure that our JavaScript components have enough means to cover their styling needs. In order not to be unfounded, let us go through the main styling options offered in DHTMLX libraries.
Customizable Built-in Themes
Predefined themes allow web developers to specify a set of styles and design rules that can be applied across an entire project. With themes, it is easy to make all UI elements follow a uniform style, adapt to brand style guidelines, and help meet accessibility standards. DHTMLX libraries are shipped with multiple built-in themes, including Material, Light, Dark, and high-contrast options.
There is a live sample, where you can switch between Light and Dark themes in DHTMLX Gantt:
DHTMLX themes are based on CSS variables, which can be used for further styling modifications.
CSS Variables
If predefined theming options are not enough for a specific use-case scenario, it is possible to use CSS variables to:
- change the color scheme of all themes,
- override color values for a particular theme,
- create a custom theme by overriding values of the internal CSS variables.
Here is a live sample including custom themes created with CSS variavbles in DHTMLX Diagram.
These theming options are available for most of our products and follow the same technical principles. The documentation of the desired component provides more details.
CSS variables simplify the styling of specific UI elements in DHTMLX components by defining reusable style properties. For instance, here is an example of a Gantt chart with modified color of scales, tasks, and links:
/* scales */
--dhx-gantt-scale-background: #8E8E8E;
--dhx-gantt-base-colors-border-light: #C5C5C5;
--dhx-gantt-base-colors-border: #DFE0E1;
--dhx-gantt-scale-color: #FFF;
--dhx-gantt-base-colors-icons: #00000099;
/* tasks */
--dhx-gantt-task-background: #3db9d3;
--dhx-gantt-task-color: #FFFFFF;
--dhx-gantt-project-background: #6AA84F;
--dhx-gantt-project-color: #FFFFFF;
/* links */
--dhx-gantt-link-background: #ffa011;
--dhx-gantt-link-background-hover: #ffa011;
}
Check the sample >
By defining global CSS variables, it is also possible to maintain a unified design across different instances of the same component.
Templates for UI Elements
DHTMLX UI components support templates, allowing for more flexibility in customizing the appearance of elements within the UI. Templates are frequently used to dynamically apply CSS styling and custom content to UI elements based on specific conditions such as:
- blank/filled description of events in the JS Scheduling calendar built with DHTMLX Scheduler
scheduler.templates.event_class=function(start,end,event){
if (event.text) //if event have description
return "past_event"; //then set special css class for it
};
...
- data values in a particular column (“Balance”) of the grid table based on DHTMLX Grid
template: (value, { balance }) => balance > 0
? `<div style='color:green'>⬆ ${value}</div>`
: `<div style='color:red'>⬇ ${value}</div>`,
...
Apart from that, CSS templates also help create visually distinct and well-organized layouts, improving readability and usability like in the following DHTMLX Dataview sample:
Custom CSS Classes
A CSS class is an important mechanism for flexible and efficient styling of DHTMLX libraries. It allows assigning style rules to one or multiple HTML elements based on their class attribute, enabling consistent and reusable styling.
Let us consider several styling scenarios via CSS classes with DHTMLX Grid:
- Styling selection in the data table
Here is how a custom CSS class for this scenario is created:
--dhx-color-primary: #ff5252;
--dhx-s-grid-selection-background: rgba(255, 198, 198, 1);
}
The name of the created CSS class is specified as the value of the css property in the Grid configuration:
...
selection: true,
css: "custom"
});
- Styling rows
Here is how a custom CSS class for this scenario is created:
background: coral;
}
The rowCss property serves as a function that takes the id of a row as a parameter and returns a string with the name of a custom CSS class.
columns: [
// columns config
],
rowCss: row => (row.custom ? "my_custom_row" : ""),
data: dataset,
adjust: true
});
- Marking cells with colors
Here is how a custom CSS class for this scenario is created:
background: lightcoral;
}
.total_col {
background: #f2f2f2;
}
To mark particular cells of the grid table, use the corresponding property in the column configuration. You set the value of the mark property as a function that returns a string with a custom CSS class for the mark.
columns: [
...
id: "population", header: [{ text: "Population" }],
mark: function (cell, data, row, col) { return cell > 100000000 ? "my_custom_mark" : "" }
},
{
id: "density", header: [{ text: "Density (P/Km²)" }],
mark: function (cell, data) { return "total_col"; }
},
...
});
There is also a set of CSS classes from DHTMLX that can be used to change the appearance of Grid and other widgets.
Useful Tips on CSS Styling with DHTMLX
DHTMLX provides developers with a versatile set of styling options, but it is necessary to use these tools efficiently to achieve a polished and maintainable design. Below are some key tips to optimize CSS styling with DHTMLX components.
- Make the most of available CSS styling options
DHTMLX components have a well-structured default CSS, but if a project design requires some specific adjustments, the APIs of our JS libraries are geared up for achieving these goals. Instead of manually overriding core styles, it is very likely that quick and effective solutions can be found in fully documented APIs.
- Remember about CSS settings when exporting to PDF/PNG
DHTMLX components (like Gantt, Grid, Scheduler, and Diagram) support export to various file formats. However, custom styles (e.g., modified colors, fonts, or layout adjustments) are not included in the exported file by default. To ensure that custom CSS styles are reflected in the exported file, it is required to specify a config for displaying custom CSS after export.
In the DHTMLX Diagram component, for instance, you should define a set of styles that you want to be exported via setting absolute paths to the desired styles to the exportStyles array like in this sample.
- Control your styles using CSS specificity
When styling DHTMLX components (or any web elements), you should not forget about CSS specificity required for applying styles correctly. When overriding DHTMLX styles, it is important to ensure that your CSS rule has a higher specificity (priority) than the default styles.
- Use the browser’s Element Inspector to debug and fine-tune styling
Modern browsers offer built-in Developer Tools designed to assist with various aspects of programming. The Element Inspector specifically helps examine UI elements, tweak CSS styles in real time, and identify potential styling conflicts.
Wrapping Up
DHTMLX components provide developers with a powerful set of options to meet styling requirements of any complexity. Whether it’s applying a theme, refining the appearance of individual UI elements, or modifying styles dynamically, DHTMLX simplifies the process. With the right approach, DHTMLX JavaScript libraries give dev teams great opportunities for combining advanced functionalities with visual creativity. We invite you to download free 30-day trial versions of any DHTMLX component and try its styling capabilities and numerous features in action.