{"id":13642,"date":"2025-03-31T11:11:10","date_gmt":"2025-03-31T08:11:10","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=13642"},"modified":"2025-03-31T16:38:46","modified_gmt":"2025-03-31T13:38:46","slug":"achieve-css-styling-goals-web-app-development-dhtmlx","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/achieve-css-styling-goals-web-app-development-dhtmlx\/","title":{"rendered":"How to Achieve CSS Styling Goals in Web App Development with DHTMLX"},"content":{"rendered":"<p>&#8220;Attractive things work better&#8221;\u2014these 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.<\/p>\n<p>In this article, we\u2019ll 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\u2019ll also share some practical tips to enhance the developer\u2019s styling experience with DHTMLX.<\/p>\n<h5>CSS Styling as a Core of Web App Design<\/h5>\n<p>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:<\/p>\n<ul>\n<li>enforcing visual consistency<\/li>\n<li>aligning design with brand identity<\/li>\n<li>improving readability and accessibility<\/li>\n<li>enhancing responsiveness<\/li>\n<\/ul>\n<p>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. <\/p>\n<h5>Why Flexible CSS Styling Matters in Modern Web Development<\/h5>\n<p>We at DHTMLX have been following all significant changes affecting web development for years to keep our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/\" rel=\"noopener\" target=\"_blank\">JavaScript UI components<\/a> 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.<\/p>\n<p>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. <\/p>\n<p>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, <em>:has()<\/em>, 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:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image5-1.png\" alt=\"popular CSS features\" width=\"1485\" height=\"569\" class=\"aligncenter size-full wp-image-13643\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image5-1.png 1485w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image5-1-300x115.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image5-1-768x294.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image5-1-1024x392.png 1024w\" sizes=\"auto, (max-width: 1485px) 100vw, 1485px\" \/><em>Source: <a href=\"https:\/\/2024.stateofcss.com\/en-US\/usage\/#favorite_new_features\" rel=\"noopener\" target=\"_blank\">State of CSS 2025<\/a><\/em><\/p>\n<p>The survey also says that some highly-anticipated features like conditional logic, mixins, and masonry layouts are coming soon. <\/p>\n<p>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.<\/p>\n<h5>Exploring DHTMLX CSS Styling Capabilities<\/h5>\n<p>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. <\/p>\n<h6>Customizable Built-in Themes<\/h6>\n<p>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. <\/p>\n<p>There is a live sample, where you can switch between Light and Dark themes in <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt<\/a>:<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/6v01zuxe?mode=mobile\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <a href=\"https:\/\/snippet.dhtmlx.com\/6v01zuxe?tag=grid&#038;mode=wide rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>DHTMLX themes are based on CSS variables, which can be used for further styling modifications.<\/p>\n<h6>CSS Variables<\/h6>\n<p>If predefined theming options are not enough for a specific use-case scenario, it is possible to use CSS variables to:<\/p>\n<ul>\n<li>change the color scheme of all themes,<\/li>\n<li>override color values for a particular theme,<\/li>\n<li>create a custom theme by overriding values of the internal CSS variables.<\/li>\n<\/ul>\n<p>Here is a <a href=\"https:\/\/snippet.dhtmlx.com\/9twmlfus?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">live sample<\/a> including custom themes created with CSS variavbles in DHTMLX Diagram.<\/p>\n<p>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.<\/p>\n<p>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:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\"><span class=\"sy0\">:<\/span><span class=\"kw5\">root<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; <span class=\"coMULTI\">\/* scales *\/<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-scale-background<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#8E8E8E<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-base-colors-border-light<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#C5C5C5<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-base-colors-border<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#DFE0E1<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-scale-color<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#FFF<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-base-colors-icons<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#00000099<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <br \/>\n&nbsp; <span class=\"coMULTI\">\/* tasks *\/<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-task-background<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#3db9d3<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-task-color<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#FFFFFF<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-project-background<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#6AA84F<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-project-color<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#FFFFFF<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <span class=\"coMULTI\">\/* links *\/<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-link-background<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#ffa011<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"re4\">--dhx-gantt-link-background-hover<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#ffa011<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-52-35-518.png\" alt=\"modified styling of Gantt elements\" width=\"1625\" height=\"280\" class=\"aligncenter size-full wp-image-13673\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-52-35-518.png 1625w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-52-35-518-300x52.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-52-35-518-768x132.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-52-35-518-1024x176.png 1024w\" sizes=\"auto, (max-width: 1625px) 100vw, 1625px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/t59618v5?tag=gantt&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nBy defining global CSS variables, it is also possible to maintain a unified design across different instances of the same component. <\/p>\n<h6>Templates for UI Elements<\/h6>\n<p>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:<\/p>\n<ul>\n<li>blank\/filled description of events in the JS Scheduling calendar built with <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Scheduler<\/a> <\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">...<br \/>\n<span class=\"me1\">scheduler<\/span>.<span class=\"me1\">templates<\/span>.<span class=\"me1\">event_class<\/span><span class=\"sy0\">=<\/span><span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>start<span class=\"sy0\">,<\/span>end<span class=\"sy0\">,<\/span>event<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>event.<span class=\"me1\">text<\/span><span class=\"br0\">&#41;<\/span> <span class=\"co1\">\/\/if event have description<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"st0\">&quot;past_event&quot;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/then set special css class for it<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n...<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/2025-03-31_16-09-47.gif\" alt=\"usage of templates\" width=\"1320\" height=\"720\" class=\"aligncenter size-full wp-image-13675\" \/><a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/samples\/index.html?sample=%2702_customization\/06_templates.html%27&#038;filter=%27%27\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<ul>\n<li>data values in a particular column (&#8220;Balance&#8221;) of the grid table based on <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGrid\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Grid<\/a><\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">...<br \/>\n<span class=\"me1\">template<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> balance <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> balance <span class=\"sy0\">&gt;<\/span> <span class=\"nu0\">0<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">?<\/span> `<span class=\"sy0\">&lt;<\/span>div style<span class=\"sy0\">=<\/span><span class=\"st0\">'color:green'<\/span><span class=\"sy0\">&gt;<\/span>\u2b06 $<span class=\"br0\">&#123;<\/span>value<span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>`<br \/>\n&nbsp; &nbsp; <span class=\"sy0\">:<\/span> `<span class=\"sy0\">&lt;<\/span>div style<span class=\"sy0\">=<\/span><span class=\"st0\">'color:red'<\/span><span class=\"sy0\">&gt;<\/span>\u2b07 $<span class=\"br0\">&#123;<\/span>value<span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>`<span class=\"sy0\">,<\/span><br \/>\n...<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image4.gif\" alt=\"confitional styling with templates\" width=\"872\" height=\"404\" class=\"aligncenter size-full wp-image-13650\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/1mxmshax?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Apart from that, CSS templates also help create visually distinct and well-organized layouts, improving readability and usability like in the following <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDataView\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Dataview<\/a> sample:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-44-26-838.png\" alt=\"CSS Template\" width=\"1852\" height=\"529\" class=\"aligncenter size-full wp-image-13671\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-44-26-838.png 1852w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-44-26-838-300x86.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-44-26-838-768x219.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/bandicam-2025-03-31-15-44-26-838-1024x292.png 1024w\" sizes=\"auto, (max-width: 1852px) 100vw, 1852px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/dataview_template_a?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h6>Custom CSS Classes<\/h6>\n<p>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 <strong>class<\/strong> attribute, enabling consistent and reusable styling.<\/p>\n<p>Let us consider several styling scenarios via CSS classes with DHTMLX Grid:<\/p>\n<ul>\n<li>Styling selection in the data table<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image2-1.png\" alt=\"custom selection with CSS classes\" width=\"1124\" height=\"328\" class=\"aligncenter size-full wp-image-13654\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image2-1.png 1124w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image2-1-300x88.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image2-1-768x224.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image2-1-1024x299.png 1024w\" sizes=\"auto, (max-width: 1124px) 100vw, 1124px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/xs7bixmg?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Here is how a custom CSS class for this scenario is created:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\"><span class=\"re1\">.custom<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"re4\">--dhx-color-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#ff5252<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"re4\">--dhx-s-grid-selection-background<\/span><span class=\"sy0\">:<\/span> <span class=\"kw3\">rgba<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">255<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">198<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">198<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>The name of the created CSS class is specified as the value of the <strong>css<\/strong> property in the Grid configuration:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> grid <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Grid<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;grid&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; ...<br \/>\n&nbsp; &nbsp; <span class=\"me1\">selection<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; css<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;custom&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<ul>\n<li>Styling rows<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image1-1.png\" alt=\"Styling rows with CSS classes\" width=\"1124\" height=\"329\" class=\"aligncenter size-full wp-image-13655\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image1-1.png 1124w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image1-1-300x88.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image1-1-768x225.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image1-1-1024x300.png 1024w\" sizes=\"auto, (max-width: 1124px) 100vw, 1124px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/2dxtwf9n?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Here is how a custom CSS class for this scenario is created:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\"><span class=\"re1\">.my_custom_row<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">background<\/span><span class=\"sy0\">:<\/span> <span class=\"kw4\">coral<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>The <strong>rowCss<\/strong> 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.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> grid <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Grid<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;grid&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; columns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ columns config<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; rowCss<span class=\"sy0\">:<\/span> row <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#40;<\/span>row.<span class=\"me1\">custom<\/span> <span class=\"sy0\">?<\/span> <span class=\"st0\">&quot;my_custom_row&quot;<\/span> <span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; data<span class=\"sy0\">:<\/span> dataset<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; adjust<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<ul>\n<li>Marking cells with colors<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image7.png\" alt=\"marking cells with colors\" width=\"1152\" height=\"328\" class=\"aligncenter size-full wp-image-13658\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image7.png 1152w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image7-300x85.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image7-768x219.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/03\/image7-1024x292.png 1024w\" sizes=\"auto, (max-width: 1152px) 100vw, 1152px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/9whjve0v?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Here is how a custom CSS class for this scenario is created:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\"><span class=\"re1\">.my_custom_mark<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">background<\/span><span class=\"sy0\">:<\/span> <span class=\"kw4\">lightcoral<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"re1\">.total_col<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">background<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#f2f2f2<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>To mark particular cells of the grid table, use the corresponding property in the column configuration. You set the value of the <strong>mark<\/strong> property as a function that returns a string with a custom CSS class for the mark.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/span> grid <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Grid<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;grid&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; columns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;...<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"me1\">id<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;population&quot;<\/span><span class=\"sy0\">,<\/span> header<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#123;<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Population&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mark<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>cell<span class=\"sy0\">,<\/span> data<span class=\"sy0\">,<\/span> row<span class=\"sy0\">,<\/span> col<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span> <span class=\"kw1\">return<\/span> cell <span class=\"sy0\">&gt;<\/span> <span class=\"nu0\">100000000<\/span> <span class=\"sy0\">?<\/span> <span class=\"st0\">&quot;my_custom_mark&quot;<\/span> <span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;&quot;<\/span> <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;density&quot;<\/span><span class=\"sy0\">,<\/span> header<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#123;<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Density (P\/Km\u00b2)&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mark<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>cell<span class=\"sy0\">,<\/span> data<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span> <span class=\"kw1\">return<\/span> <span class=\"st0\">&quot;total_col&quot;<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; ...<br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>There is also a <a href=\"https:\/\/docs.dhtmlx.com\/suite\/helpers\/base_elements\/#list-of-css-classes-for-styling-a-widget\" rel=\"noopener\" target=\"_blank\">set of CSS classes<\/a> from DHTMLX that can be used to change the appearance of Grid and other widgets.<\/p>\n<h5>Useful Tips on CSS Styling with DHTMLX<\/h5>\n<p>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.<\/p>\n<ul>\n<li><strong>Make the most of available CSS styling options<\/strong><\/li>\n<\/ul>\n<p>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. <\/p>\n<ul>\n<li><strong>Remember about CSS settings when exporting to PDF\/PNG<\/strong><\/li>\n<\/ul>\n<p>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. <\/p>\n<p>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 <strong>exportStyles<\/strong> array like in this <a href=\"https:\/\/snippet.dhtmlx.com\/jm8if6nh?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">sample<\/a>.<\/p>\n<ul>\n<li><strong>Control your styles using CSS specificity<\/strong><\/li>\n<\/ul>\n<p>When styling DHTMLX components (or any web elements), you should not forget about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_cascade\/Specificity\" rel=\"noopener\" target=\"_blank\">CSS specificity<\/a> 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.<\/p>\n<ul>\n<li><strong>Use the browser&#8217;s Element Inspector to debug and fine-tune styling<\/strong><\/li>\n<\/ul>\n<p>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. <\/p>\n<h5>Wrapping Up<\/h5>\n<p>DHTMLX components provide developers with a powerful set of options to meet styling requirements of any complexity. Whether it&#8217;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 <a href=\"https:\/\/dhtmlx.com\/docs\/download\/\" rel=\"noopener\" target=\"_blank\">free 30-day trial versions<\/a> of any DHTMLX component and try its styling capabilities and numerous features in action.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Attractive things work better&#8221;\u2014these 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 &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":13661,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72],"tags":[33,58,20,6,15],"class_list":["post-13642","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-all-posts","tag-diagram","tag-gantt","tag-dhtmlxgrid","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=13642"}],"version-history":[{"count":15,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13642\/revisions"}],"predecessor-version":[{"id":13664,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13642\/revisions\/13664"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/13661"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=13642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=13642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=13642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}