Error in JavaFX: CSS Parser anticipating COLON

Encountered an error and struggling to find the issue as everything seems right from my perspective:

CSS Code:

@font-face {
    font-family: 'Titillium';
    font-style: normal;
    font-weight: normal;
    src: url('Titillium.ttf');
}

.root{
    -fx-font-family: "Titillium";
}

.label{
    -fx-font-size: 14pt;
}

.title {
    -fx-font-size: 24pt;
}

.textfield{
    -fx-font-size: 15pt;
}

.list-cell{
    -fx-font-size: 15pt;
}

.combo-box{
    -fx-font-size: 12pt;
}

#detaillist .list-cell{
    -fx-background-color: transparent;
}

#subtitle{
    -fx-font-size: 10pt;
}

and this is my Java Code where I apply the style:

title = new Label("Note created on " + Selector.getSelectedNotiz().getDatum().toLocaleString());
title.setTextFill(Color.BLACK);
//--------------- Issue Here ----------------------
title.setStyle("title");
cmbLernender = new ComboBox<String>();
k = new Label("Competence");
k.setTextFill(Color.BLACK);

this all appears correct...

but upon running, the following error arises:

Sep 15, 2014 1:25:30 PM com.sun.javafx.css.parser.CSSParser declaration
WARNING: CSS Error parsing '*{title}: Expected COLON at [1,7]

Appreciate any assistance.

Peace out

Answer №1

To apply a custom styleclass to the Label named title, you can do the following:

title.getStyleClass().add("custom-title");

If you prefer to directly add styles to your control without using external css or style classes, you can do so like this:

title.setStyle("-fx-background-color: crimson; -fx-text-fill: ivory;");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to programmatically insert new rows into a table

I am currently working with the foundation 5 framework (not sure if this is relevant). I need to ensure that each CELL is treated as a distinct item/value when passing information to another page, and I am unsure of how to approach this issue. It should cr ...

Navigate to the next screen using the "Continue" button in the Tab

I am currently developing an app where I want the user to be redirected to a new activity when they click on a TabBar arrow icon. I am familiar with using the onBackPressed() function to go back, but I am unsure how to switch to another activity by clickin ...

I need to specify the path to the driver executable using the webdriver.chrome.driver system property, but luckily I have already set it correctly

https://i.sstatic.net/6DuU1.jpgjava.lang.IllegalStateException: I am facing an issue with setting the path to the driver executable as required by the webdriver.chrome.driver system property, even though my path is correct. if (browser.equalsIgnoreCa ...

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

tips for serializing a custom JSON structure

How can I format the JSON data as shown below? "Tyre": { "title": "Tyre", "cls": "TyreCondition", "items": [ { "firstItem": [ { "titl ...

Ways to set a background image for two separate components in Angular

Trying to figure out how to integrate this design: https://i.sstatic.net/r70a4.png The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content ...

Delete the CSS class from a specific HTML element

Having just started learning HTML and CSS, I encountered an issue. I applied a CSS class to a table element. Subsequently, I inserted a child table within the parent table. The problem arose when the CSS class of the parent table also influenced the child ...

Setting a CSS grid column to have a minimum width of `max-content` and a specific

I am trying to create a CSS grid where the column widths adjust based on the content, but with a minimum width of 100px. I attempted using minmax(max-content, 100px), however it did not produce the desired result. In the example below, the narrow column sh ...

Tips for displaying only one image when clicked and hiding other divs:

Currently tackling a project that involves JavaScript and I've hit a roadblock. Before you dive into the text, take a look at the image. Check out the picture here. I have successfully created a slider, but now I want to implement a feature where cli ...

Tips for modifying the appearance of this input document

Hey there, I have this input element created in React: <span className="btn-file" type='button'> <div style={{display:'flex',justifyContent:'space-around'}}> <span style ...

Is there a way to show a message when I hover over a different text?

I've been attempting to show a text when hovering over another text, but for some reason it's not working. I've followed all the steps from similar questions, but unfortunately, it still doesn't seem to be functioning correctly. Here i ...

Mobile Website Blog Page With Dual Sidebars Issue

I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section. Everything looks great on Desktop view. However, when viewed on a mobile phone, the order changes to: left-sidebar>content> ...

What is the best way to differentiate the behavior of two identical classes using a single JavaScript function?

Can someone help me figure out how to make two circles move differently with the same JavaScript function? I'm new to JavaScript and struggling to differentiate between classes in HTML to achieve this. My goal is to have each circle move randomly and ...

"Enhanced Bootstrap 4 table featuring a single column that stands out in size compared

I have set up a Bootstrap4 table with multiple columns, but I need one of them to be larger in order to accommodate more text. I want to specify the minimum width for this larger column and let Bootstrap4 adjust the sizes of the other columns accordingly. ...

How can I extract the text within a Span tag using Selenium WebDriver?

Is there a way to retrieve the text from a span tag and print it using Selenium Webdriver? I am looking to extract the text UPS Overnight - Free The HTML code is as follows: div id="customSelect_3" class="select_wrapper">> <div class="select ...

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Here is a question that closely relates to this one: Enable div to scroll by keyboard without clicking I am aware that explicitly focusing on the element will enable the desired behavior. My inquiry is whether there is a way to achieve this implicitly. ...

Ensure that the left div spans 100% of the width of the container, while the right div remains on the right side and maintains a

Is there a way to create an effect with a div where the left side is 100% and the right side stays fixed? <!DOCTYPE html> <html> <style> .left { width: 100%; float: left; border: #ccc solid 1px; } .right { width: 50px; float:left; border ...

using the post-increment operator on a class instance variable

The result of running this code snippet is: c: 1 , id: 0 I am curious as to why the expected output is not: c: 0 , id: 1 class A { private static long counter; private final long identifier = counter++; public A() { print("c: " + cou ...

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...

Display an HTML code snippet on the webpage

I'm facing a situation that has been discussed before on this platform. However, I want to present my problem in a different light. I am working with PHP and need to display an HTML string from the database on my webpage. The issue is that the CSS app ...