How to Resolve CSS Conflicts

• Feb 22, 2024

Global CSS selectors for common HTML tags, such as <table>, can affect other controls and widgets that are based on regular HTML elements. Conflicts between global CSS styles and DevExpress styles may cause disruption in DevExpress ASP.NET controls’ appearance.

Follow the recommendations below to resolve the issue:

• Use DevExpress project templates to create an application. These templates do not include global styles that might affect other controls derived from regular HTML elements.

• Use CSS classes with unique names rather than the global selectors. This technique allows you to apply style settings to particular HTML elements only.

  Custom CSS Class

  /* This style affects table elements with the specified class name only. */
  
  <style type="text/css">
      table.SomeCssClassName {...}
  </style>
  
  <table class="SomeCssClassName">...</table>
  

  Global Selector

  /* This style affects every table element and may corrupt appearance of controls and widgets. */
  
  <style type="text/css">
      table { ... }
  </style>
  
  <table>...</table>
  

See Also

• Why HTML table rendering can be different when a page contains DevExpress ASP.NET controls