You know your Vaadin UI components are ultimately rendered as HTML right? HTML is the language that browsers understand. But there is another kind of language that browsers also understand: CSS. CSS stands for Cascading Style Sheets and allows developers and web designers to specify the appearance of a web page in separate files. Suppose you have an HTML file page.html:
<html>
<body>
<h1>Hello</h1>
<div>
I'm a div :)
</div>
</body>
</html>This page will be rendered like this:
With CSS, we can create a .css file to specify styling rules. Let's say we want to change the background and font colors of the body content. We can create a rule to do exactly that:
body {
background-color: #555;
color: #eef;
}The previous rule stands for something like "for each body element in the HTML file, use #555 as background color and #eef as font color".