Introduction to CSS and Sass
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".
Note
#555 and #eef are colors expressed as the combination...
