Styling HTML Elements
A guide to styling HTML elements in Vaadin applications.
Native HTML elements, like <div> and <span>, can be styled the way you would normally style HTML: with CSS and utility classes. CSS class names are typically used to target specific instances of HTML elements.
Source code
Java
var warningBox = new Div("Warning!");
warningBox.addClassNames("warning-message");Java
tsx
tsx
Source code
CSS
.warning-message {
background-color: #ff8904;
}Utility classes like Tailwind CSS or Lumo Utility Classes can be applied directly to HTML elements:
Source code
Java
var warningBox = new Div("Warning!");
warningBox.addClassNames("bg-orange-400 p-20");Java
tsx
tsx
Inline styles can also be applied to individual elements and components.
Source code
Java
var warningBox = new Div("Warning!");
warningBox.getStyles().setBackground("#ff8904");Java
tsx
tsx
Theme style properties can be used to apply theme styles to any HTML element:
Source code
CSS
.warning-message {
background-color: var(--lumo-warning-color);
}e85f0b5a-a8f2-41c5-94ed-918f122a4eb9