CSS not working for me yet

This is my first attempt at changing CSS in a Vaadin project. I am doing something wrong.
I have a theme called ‘pizza’ and in my application class I have:


and inI have a file: VAADIN/themes/pizza/styles.css
To which I added

.logostyle {
background: white;
color: red;
font-size: 24pt;

and I have a label to which I set up this:

	logo = new Label();

I think that should work but it doesn’t make any difference. The label is rendered in the default font.
Can anyone see the step(s) I missed?


Unless I’m missing something, it looks like it should work like that. If you set the font-size you may also need to set the line-height property.

Too low specificity can sometimes cause CSS rules to be ignored. More specific rules override less specific ones and you may need to add a specifier in the rule to make it more specific. For example, use “.containingstyle .mycomponentstyle {…}” instead of just “.mycomponentstyle” and set the containing style name for a containing layout component. You could use “.v-app .mycomponentstyle” as well.

If you have problems with CSS styling, I really recommend using Firebug to see what’s going on. Just open the Firebug Panel, click the Inspect-button, click the element in the UI and you get the HTML and CSS styling for it. The Net tab shows what files are loaded so if there’s a missing CSS file or it loads a wrong one, you should see it there.

I found the problem, it was staring me in the face.
I’ve got so used to clicking ‘no’ when it asks me to recompile the widgets I do it automatically.
When I picked ‘yes’ the style sheet changes began to appear.
You are quite right that I need to expand the vertical size of the field, but at least is is showing up in red and big, proving the CSS is taking effect.

Thanks for your help